gulp-sofa-module
v1.3.5
Published
Simplified adding CSS and JS from modules to HTML pages using Gulp
Downloads
9
Readme
sofa
Simplified adding CSS and JS from modules to HTML pages using Gulp
Structure:
/
|- modules/
| |- breadcrumbs/
| | |- popup.js
| | |- style.scss
| | |- template.html
| | |- yellow-line.scss
| |- menu/
| |- floating.js
| |- style.scss
| |- template.html
|
|- example.htmlGulp:
const gulp = require('gulp');
const sofa = require('gulp-sofa-module');
function htmlBuild() {
return gulp.src(path.to.html)
.pipe(/* Any plugins */)
.pipe(sofa({path:'./modules', inserts:{js: '<!--forJS-->', css: '<!--forCSS-->'}}))
.pipe(gulp.dest(path.build))
}Options for gulp
[ required fields ]
path {String} - path to the directory with modules (at the same level of nesting files will be connected in html)
[ optional fields ]
pathBuild {String} - different from the "path" parameter, specified if necessary for connecting files to html (by default is taken from the "path")
insertPlace {String} - tag before which links to files (js, css) will be established
( example: sofa({insertPlace: '</body>'}) )
(if not specified, default is insert before the '</head>')
inserts {Object} - tags, before which links (separately for js and css) to files
will be set ( example: sofa({inserts: {js: '<!--forJS-->', css: '<!--forCSS-->'} )
(if not specified, default is insert before the '</head>')
compress {Boolean} - compress files. By default "true".
jsSourceMap {Boolean} - include inline sourcemap in js file. By default "false".
onePlace {Boolean} - put all the module files in one directory with the name of the page. Important, 'gulp.dest' not used for this item. By default "false" (styles - currently only * .scss is supported).
dest {String} - (for onePlace) directory name or path where the assembly will be stored
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sofa</title>
<!--forCSS-->
</head>
<body>
@sofa:{"module":"menu", "extra":{"js":["floating"]}, "anotherTemplate": "another"};
@sofa:{"module":"breadcrumbs", "extra":{"js":["popup"],"css":["yellow-line"]}};
<!--forJS-->
</body>
</html>Options for html
"module" {String} directory name (or folder path)
"extra": {Object} - names of additional files
noTemplate: {Boolean} - exclude html templates from processing. By default "false"
anotherTemplate: {String} - html template name instead of default template.
Index.html (transformed)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sofa</title>
<link type="text/css" rel="stylesheet" href="./modules/menu/style.css">
<link type="text/css" rel="stylesheet" href="./modules/breadcrumbs/style.css">
<link type="text/css" rel="stylesheet" href="./modules/breadcrumbs/yellow-line.css">
</head>
<body>
<ul class="menu">
<li class="menu__item">Menu another:</li>
<li class="menu__item"><a href="#">About Us</a></li>
<li class="menu__item"><a href="#">Red page</a></li>
<li class="menu__item menu__current">Blue page</li>
</ul>
<ul class="breadcrumbs">
<li class="breadcrumbs__item"><a href="#">Home</a></li>
<li class="breadcrumbs__item"><a href="#">Group</a></li>
<li class="breadcrumbs__item breadcrumbs__current breadcrumbs_yellow">Subgroup</li>
</ul>
<script type="text/javascript" src="./modules/breadcrumbs/popup.js"></script>
</body>
</html>