Hebspack is meant to be used on a folder containing skins. Hebspack only bundles skins that have configured 'hebspack-config.json' in root directory.
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"]
}
}
- 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.
npx hebspack [skin-name] [options]
[skin-name] | Description |
---|---|
skin-name | Runs bundling for specified skin only |
By default bundling runs for every found skin |
[options] | Description |
---|---|
-b, -browsersync | Start browsersync |
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 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:
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);
});
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 and Gulp will know when it’s finished:
const promisedDel = require('promised-del');
module.exports = function() {
return promisedDel(['.build/']);
});
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')]);
});
It's also possible to return an RxJS observable.
const Observable = require('rx').Observable;
module.exports = function() {
return Observable.return(42);
});
{
/*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"]
}
}
}
}