Web Boilerplate

A bunch of npm scripts plumbing for my frontend projects so I don't have to set this up from scratch every time.

• Bundling and minifcation of JS (browserify)
• ES6 transpilation with babel
• Base CSS incl. imports with postcss-cssnext and normalize.css
• Compresses images using imagemin
• Hashes css, js and images for effective caching (hashmark)
• File watching during development (watchify, postcss-cli)

Installation

Download this project and run:

npm install

or use this one-liner:

mkdir web-boilerplate && cd web-boilerplate && curl -L# https://github.com/klaemo/web-boilerplate/archive/master.zip | tar xz --strip 1 && npm install

Development

Starts server, watches JS and CSS

npm run dev

Production build

• Bundles, transpiles and minifies JS
• Bundles, post-processes and minifies CSS.
• Optimizes images.
• Appends hash to filenames for reliable cache busting.
• Replaces references to images in CSS with hashed version (e.g. /img/image.png -> /img/image.0dedbaee.png).

Everything ends up in public and is ready to be deployed somewhere

npm run compile

Possible enhancements:

• https://www.browsersync.io
• https://github.com/zertosh/errorify
• https://github.com/addyosmani/critical
• https://github.com/AgentME/browserify-hmr

License

MIT