A simple workflow for static websites with live-reload local server, Babel transpiler for JavaScript and bundling CSS with PostCSS and CSSNext.
Features
Processing styles with PostCSS
CSSNext installed by default
Babel Transpiler for JavaScript (ES6)
JavaScript Concatenating and Minification
CSS Minification
HTML Minification
Image Compression
Asset Copying
Templating and Partial HTML Injection
Cache Busting
Dev Server for Built Site
Live Reload
Setup
This project requires node version 6. This is the only global dependency.
NodeJSClone Repository: https://github.com/DEEP-IMPACT-AG/staticweb-build
Install node packages:
Development
To start the development server just run the dev task:
$ npm run devThis will start the development server. The server is based on browserSync, supports live reloading which enables hot swapping of CSS styles without reloading the page.
Templating
To avoid repetitive HTML code the build uses gulp-file-include, allowing to re-use chunks of code written in separate files. It is recommended to place the included files in the /src/includes directory to keep track of changes and live-reload.
Simple Include
@@include(‘./includes/header.html')Include with Parameters
@@include('./includes/helmet.html', {"title": "Static Web Build"
})
Filename: /includes/helmet.html
<title>@@title</title>If Statement
@@include(‘./includes/header.html’{"menu": true
});
Filename: /includes/header.html
@@if (menu === true) {@@include('./includes/menu.html')
}
Loops
<body> @@loop(‘./includes/loop-article.html’, [{ "title": "My post title", "text": "lorem ipsum..." },
{ "title": "Another post", "text": "lorem ipsum..." },
{ "title": "One more post", "text": "lorem ipsum..." }
]) </body>
Filename: /includes/loop-article.html
<article><h1>@@title</h1>
@@text
</article>
Production
To build the production files run the prod task:
$ npm run prodThe files will be generated in the app/ directory. The production build automatically minifies the html and css. By default also the javascript files are concatenated in one bundle: assets/js/bundle.js.
Image Optimization
For image optimization and SVG compression run:
$ npm run imagesGulpfile.js

Note: The Gulpfile.js requires a build restart for any changes to take effect.
PostCSS Plugins
Currently, PostCSS has more than 200 plugins. You can find all of the plugins in the plugins list or in the searchable catalog. CSSNext is installed in the default configuration.
var pluginsDev = [partialimport,
cssnext()
];
var pluginsProd = [
partialimport,
cssnext(),
cssnano()
];
JavaScript Files
JavaScript files located in the project source directory src/assets/js/ and are automatically concatenated and included in the build process. However you can add additional / external JavaScript libraries by including the files in the Gulp configuration.
var headerJS = ['node_modules/aos/dist/aos.js'
];
var footerJS = [
'node_modules/jquery/dist/jquery.js',
'src/assets/js/**'
];
The headerJS is included before the DOM is loaded and it does not use Babel for transpiling JavaScript. The footerJS is included after the DOM is loaded, and it goes thourgh Babel.
Codestyle and Quality Assurance
The static web build repository comes with its own set of code style rules that can be imported into IntelliJ. The codestyle file can be found here: tools/IntelliJ.xml
It is advised to run the command $ npm run lint:css before pushing changes, to make sure the codestyle is consitent!
License
MIT