This is an opinionated boilerplate to bootstrap frontend projects. It's packed with numerous tools to lint, build and minify your code.
Plus, as tasks managers are a thing of the past, it only relies on npm scripts to do all these incredibly time saving build steps.
What does it do?
- autoprefix CSS properties that need to be,
- build CSS from less files,
- enforce functional sorting of css properties (only in IDE's stylelint linter),
- bundle & compile ES6+ JS into browser compatible JS (you can
requiremodules straight from npm),
- minifie CSS, HTML and JS,
- pre-compress HTML, CSS, JS & SVG files in Gzip and Brotli,
- compress images into WebP for WebP capable browsers,
- watch for files updates and run build tasks on update.
The build steps make use of PHP, Gzip and Brotli. While PHP and Gzip are commonly pre-installed on *nix systems, Brotli is not. Nevertheless, it's only one command away:
# Debian-like distros apt install brotli # macOS brew install brotli
npm install and you're good to go.
NB: although Windows 10 has Ubuntu subsystem, I haven't tested on it.
How to use?
Given the following file structure:
/ templates/ --> *.php (can be raw html) parts/ --> files to be used by php (template parts like header.shtml for instance) styles/ --> *.less (with `main.less` being the entry point) js/ --> *.js (with `main.js` being the entry point)
Processed CSS will be outputed to
js/main.iife.min.js. In addition all pre-compiled assets stay in their respective directories and are just appended
css:build:devto compile less files and add sourcemaps
css:build:prodto build, prefix and minify styles
compress:imgto convert images to WebP,
js:buildto compile and minify JS
phptpl:buildto compile and minify templates
- There's also a
*:watchtask for each of the previous task, plus global
By default, global
build doesn't convert images as it might be quite long of a process and images don't change all the time. So run it manually when needed.
PHP is used as our templating engine, so you can take full advantage of all PHP's power (
file_get_contents) in your templates, pure minified HTML will be outputed at the root.
You might have noticed that
.shtml files are used in
parts/. As regular
.html files are in
.gitignore to avoid commiting generated code, I happened to chose
.shtml for partial files as it's originally intended for server side includes.
There is a .htaccess file. It contains Apache boilerplate mainly to improve performances:
- take advantage of H2 Server Push,
- serve pre-compressed gzip or brotli files,
- serve WebP images when supported.
It also rewrites urls for pretty urls without extension.