Hebspack NPM | npm.io

Installation

Hebspack is meant to be used on a folder containing skins. Hebspack only bundles skins that have configured 'hebspack-config.json' in root directory.

Installation steps:

Assuming you have Node version 11 or later installed.

Run this command inside a folder containing skins. If skins are located inside a different folder then you need to specify which one.

npm init

This will generate 'package.json' file. Default options are fine.

Then run this command to download and install hebspack package

npm install hebspack

This will download and install all dependencies.

Optionaly. Change curent skins folder by adding 'skinpath' field in in 'package.json' file. Example:

{
  "name": "skins",
  "version": "1.0.0",
  ...
  "hebspackconfig":{
    "skinsath": "/Users/admin/sites/cms/public/skins/"
  }
}

Optionaly. Set list of projects to bundle by adding 'skins' field in in 'package.json' file. Example:

{
  "name": "skins",
  "version": "1.0.0",
  ...
  "hebspackconfig":{
    "skins": ["skin-innatonu","skin-aka","skin-viceroy"]
  }
}

Migrating from Code Kit:

Run the following command changing 'skin-name' to name of skin folder.

npx hebspack skin-name

This will generate default config file and execute initial build.

Replace the following code inside root .tpl file.

<style>
    {inline_css path="assets/desktop/styles/initial/styles.min.css" paths_to_replace=['../fonts/' => 'assets/desktop/fonts/', '../images/' => 'assets/desktop/images/']}
</style>

With this code.

{asset_loader position="head" paths_to_replace=['../fonts/' => 'dist/desktop/fonts/', '../images/' => 'dist/desktop/images/'] manifest="dist/desktop/assets.manifest.json"}

This will load inline files that are listed in json manifest. Paths_to_replace are paths inside inline css that has to be replaced in order for the links to work relative to root directory.

Replace the following line inside root .tpl file.

{block name="assets"}
    <link rel="stylesheet" href="{asset path="assets/desktop/styles/styles.min.css" cdn=false}" async defer>
    <script src="{asset path="assets/desktop/scripts/scripts.min.js" cdn=false}"></script>
{/block}

With this code.

{block name="assets"}
    {asset_loader position="body" manifest="dist/desktop/assets.manifest.json"}
{/block}

This will load inline files that are listed in json manifest.

Copy @codekit-prepend file names from "scripts.js" or similiar entry point.

// @codekit-prepend "libraries/_jquery.js", "libraries/_jquery.ui.js", "libraries/_cookie.js", "libraries/_json.js", "libraries/_what-input.min.js", "libraries/_validation.js", "libraries/_validation-en.js", "libraries/_hebs.bp.js", "libraries/_swiper.js", "libraries/_galleria.js", "_variables.js", "_polyfills.js", "_ada.js";

Paste these file names in 'hebspack-config.json' replacing 'libFiles' array elements to ensure the order of script loading is correct.

...
"libFiles":[  
    "_jquery.js", "_jquery.ui.js", "_cookie.js", "_json.js", "_what-input.min.js", "_validation.js", "_validation-en.js", "_hebs.bp.js", "_swiper.js", "_galleria.js", "_variables.js", "_polyfills.js", "_ada.js"
],
...

This will load specified files in the order they are given and then every other file in library folder.

Copy @codekit-append file names from "scripts.js" or similiar entry point.

// @codekit-append "_common.js", "_booking.js", "_photos.js", "_promotiles.js", "_events.js", "_reviews.js", "_google-maps.js", "_maps.js", "_poi.js", "_galleries.js", "_pressroom.js", "_rooms.js", "_venues.js", "_feeds.js", "_calendar.js";

Paste these file names in 'hebspack-config.json' replacing 'scriptsFiles' array elements to ensure the order of script loading is correct.

...
"scriptsFiles":[  
    "_common.js", "_booking.js", "_photos.js", "_promotiles.js", "_events.js", "_reviews.js", "_google-maps.js", "_maps.js", "_poi.js", "_galleries.js", "_pressroom.js", "_rooms.js", "_venues.js", "_feeds.js", "_calendar.js"
],
...

This will load specified files in the order they are given and then every other file in scripts folder.

Bundler commands

npx hebspack [skin-name] [options]

skin-name

skin-name	Description
skin-name	Runs bundling for specified skin only
	By default bundling runs for every found skin

options

options	Description
-b, -browsersync	Start browsersync

Examples

npx hebspack

This will run bundler for every skin that contains 'hebspack-config.json'.

npx hebspack skin-name -b

This will run bundler for a skin, which name is "skin-name" and start browsersync.

Custom Task Declaration

Custom task creation steps:

Create a folder called 'gulp-tasks' inside a skin folder.
Create 'task-name.js' inside 'gulp-tasks' folder changing the name to suit your task.
Modify 'taskSeries' field in 'hebspack-config.json' by adding 'task-name' to a new of existing series.

...
    "taskSeries":[
        {
        ...
        "slug": "newSeries",
            "tasks":[ "task-name"]
        },
        }
    ]
...

Declare a task inside 'task-name.js' choosing one of the following methods:

Callback

You can provide a callback parameter to your task’s function and then call it when the task is complete:

const del = require('del');

module.exports = function(done) {
    del(['.build/'], done);
});

Return a Stream

You can also return a stream, usually made via gulp.src or even by using the vinyl-source-stream package directly. This will likely be the most common way of doing things.

const del = require('del');

module.exports = function() {
    return gulp.src('client/**/*.js')
        .pipe(minify())
        .pipe(gulp.dest('build'));
});

Return a Promise

Return a promise and Gulp will know when it’s finished:

const promisedDel = require('promised-del');

module.exports = function() {
    return promisedDel(['.build/']);
});

Return a Child Process

You can spawn child processes and just return them as well!

const spawn = require('child_process').spawn;

module.exports = function() {
   return spawn('rm', ['-rf', path.join(__dirname, 'build')]);
});

Return a RxJS observable

It's also possible to return an RxJS observable.

const Observable = require('rx').Observable;

module.exports = function() {
   return Observable.return(42);
});

Default config walkthrough

{
   /*General settings*/
   "generalOptions":{
      /*Bundler environment mode*/    
      "environment": "production",
      /*Defines bundler task series to run*/    
      "taskSeries":[
         {
            "slug": "init",
            "tasks":[ "style-init","script-init","image-init","font-init","php-plugins-init"]
         },
         {
            "slug": "watch",
            "tasks":[ "style-watch","script-watch","image-watch","font-watch","php-plugins-watch"]
         }
      ]
   },
    /*Source and destination folder/file names*/
    "paths": {
        /*Source folder and file names*/
        "src": {
            /*Folder containing project assets*/
            "sourceFolder": "assets",
            /*Folder containing project styles*/
            "styleFolder": "styles",
            /*Main style files to be bundled separately*/
            "styleFiles": [
                "promotiles.scss",
                "styles.scss",
                "test.scss",
                "initial/styles.scss"
            ],
            /*Folder containing project scripts*/
            "scriptsFolder": "scripts",
            /*Folder containing styles destinated for inline usage*/
            "inlineStyleFolder": "initial",
            /*Specifies order for Javascript library files*/
            "libFiles": [
                "_jquery.js",
                "_jquery.ui.js",
                "_cookie.js",
                "_json.js",
                "_what-input.min.js",
                "_validation.js",
                "_validation-en.js",
                "_hebs.bp.js",
                "_swiper.js",
                "_galleria.js",
                "_variables.js",
                "_polyfills.js",
                "_ada.js"
            ],
            /*Javascript library folder*/
            "libFolder": "libraries",
            /*Main Javascript files*/
            "scriptsEntry": "scripts.js",
            /*Specifies order for Javascript files*/
            "scriptsFiles": [
                "_common.js",
                "_booking.js",
                "_photos.js",
                "_promotiles.js",
                "_events.js",
                "_reviews.js",
                "_google-maps.js",
                "_maps.js",
                "_poi.js",
                "_galleries.js",
                "_pressroom.js",
                "_rooms.js",
                "_feeds.js",
                "_calendar.js"
            ],
            /*Ignores all Javascript files with specified suffix*/
            "ignoreSuffix": "scripts.min.js",
            /*Folder containing project images*/
            "imagesFolder": "images",
            /*Folder containing project fonts*/
            "fontsFolder": "fonts",
            /*Folder containing project plugins*/
            "pluginsFolder": "plugins"
        },
        /*Destination folder and file names*/
        "dist": {
            /*Destination folder for bundling*/
            "outputFolder": "dist",
            /*Destination style folder*/
            "styleFolder": "styles",
            /*Destination scripts folder*/
            "scriptsFolder": "scripts",
            /*Name for a single Javascript file output*/
            "outputScript": "scripts.min.js",
            /*Destination images folder*/
            "imagesFolder": "images",
            /*Destination fonts folder*/
            "fontsFolder": "fonts"
        }
    },
    /*Specifies tasks and plugins to run*/
    "run": {
        /*Settings for default environment*/
        "default": {
            /*Script plugins*/
            "script": {
                "sourcemaps": false,
                "uglify": false,
                "stripDebug": false,
                "babel": false
            },
            /*Style plugins*/
            "style": {
                "sourcemaps": false,
                "autoprefixer": false,
                "extractMedia": false,
                "cleanCSS": false
            }
        },
        /*Settings for development environment*/
        "development": {
            /*Script plugins*/
            "script": {
                "sourcemaps": false,
                "uglify": false,
                "stripDebug": false,
                "babel": false 
            },
            /*Style plugins*/
            "style": {
                "sourcemaps": false,
                "extractMedia": true,
                "cleanCSS": false,
                "autoprefixer": false
            }
        },
        /*Settings for production environment*/
        "production": {
            /*Script plugins*/
            "script": {
                "sourcemaps": true,
                "uglify": true,
                "stripDebug": true,
                "babel": false
            },
            /*Style plugins*/
            "style": {
                "sourcemaps": true,
                "extractMedia": false,
                "cleanCSS": true,
                "autoprefixer": true
            }
        }
    },
    /*Plugins options*/
    "pluginOptions": {
        /*Settings for default environment*/
        "default": {
            /*Script plugins options*/
            "script": {
                /*Allowed extensions*/
                "extensions": [".js"],
                "uglify": {
                    "mangle": false,
                    "compress": false
                },
                "babel":{
                "presets": ["@babel/env"],
                "sourceType": "script",
                "compact": false
                }
            },
            /*Style plugins options*/
            "style": {
                /*Allowed extensions*/
                "extensions": [".scss"],
                "cleanCSS": {
                    "sourcemaps": true,
                    "level": {
                        "1": {
                            "removeQuotes": false
                        },
                        "2": {

                        }
                    },
                    "compatibility": {
                        "properties": {
                            "urlQuotes": true
                        }
                    }
                },
                "autoprefixer": {
                    "browsers": [
                        "last 2 versions"
                    ],
                    "cascade": false
                }
            },
            "php_plugin": {
                /*Allowed extensions*/
                "extensions": [".php"]
            },
            "image": {
                /*Allowed extensions*/
                "extensions": [".gif", ".png", ".jpg", ".jpeg", ".ai", ".svg", ".psd"]
            },
            "fonts": {
                /*Allowed extensions*/
                "extensions": [".woff", ".woff2", ".ttf", ".eot", ".svg"]
            }
        },
        /*Settings for development environment*/
        "development": {
            /*Script plugins options*/
            "script": {
                "extensions": [".js"],
                "uglify": {
                    "mangle": false,
                    "compress": false
                },
                "babel":{
                "presets": ["@babel/env"],
                "sourceType": "script",
                "compact": false
                }
            },
            /*Style plugins options*/
            "style": {
                "extensions": [".scss"],
                "cleanCSS": {
                    "sourcemaps": true,
                    "level": {
                        "1": {
                            "removeQuotes": false
                        },
                        "2": {}
                    },
                    "compatibility": {
                        "properties": {
                            "urlQuotes": true
                        }
                    }
                },
                "autoprefixer": {
                    "browsers": [
                        "last 2 versions"
                    ],
                    "cascade": false
                }
            },
            "image": {
                /*Allowed extensions*/
                "extensions": [".gif", ".png", ".jpg", ".jpeg", ".ai", ".svg", ".psd"]
            },
            "font": {
                /*Allowed extensions*/
                "extensions": [".woff", ".woff2", ".ttf", ".eot", ".svg"]
            },
            "php_plugin": {
                /*Allowed extensions*/
                "extensions": [".php"]
            }
        },
        /*Settings for production environment*/
        "production": {
            /*Script plugins options*/
            "script": {
                "extensions": [".js"],
                "uglify": {
                    "mangle": false,
                    "compress": false
                },
                "babel":{
                "presets": ["@babel/env"],
                "sourceType": "script",
                "compact": false
                }
            },
            /*Style plugins options*/
            "style": {
                /*Allowed extensions*/
                "extensions": [".scss"],
                "cleanCSS": {
                    "sourcemaps": true,
                    "level": {
                        "1": {
                            "removeQuotes": false
                        }
                    },
                    "compatibility": {
                        "properties": {
                            "urlQuotes": true
                        }
                    }
                },
                "autoprefixer": {
                    "browsers": [
                        "last 2 versions"
                    ],
                    "cascade": false
                }
            },
            "image": {
                /*Allowed extensions*/
                "extensions": [".gif", ".png", ".jpg", ".jpeg", ".ai", ".svg", ".psd"]
            },
            "font": {
                /*Allowed extensions*/
                "extensions": [".woff", ".woff2", ".ttf", ".eot", ".svg"]
            },
            "php_plugin": {
                /*Allowed extensions*/
                "extensions": [".php"]
            }
        }
    }
}