Simplified adding CSS and JS from modules to HTML pages using Gulp
npm install gulp-sofa-module#### Structure:
``
/
|- modules/
| |- breadcrumbs/
| | |- popup.js
| | |- style.scss
| | |- template.html
| | |- yellow-line.scss
| |- menu/
| |- floating.js
| |- style.scss
| |- template.html
|
|- example.html
#### Gulp:
`
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: '', css: ''}}))
.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: '
)
(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: '', css: ''} )
(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
`
Sofa
@sofa:{"module":"menu", "extra":{"js":["floating"]}, "anotherTemplate": "another"};
@sofa:{"module":"breadcrumbs", "extra":{"js":["popup"],"css":["yellow-line"]}};