gulp-sofa-module
v1.3.5
Published
Simplified adding CSS and JS from modules to HTML pages using Gulp
Downloads
15
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>