Gulp-sofa-module NPM

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.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: '<!--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: '', 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

<!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>

bundle gulp modules sofa

@babel/core @babel/preset-env autoprefixer babel-preset-minify concat fs less path postcss sass through2

@infinitebrahmanuniverse/nolb-gulp-s @everything-registry/sub-chunk-1812

5 years ago

5 years ago

5 years ago

5 years ago