Simple, fast and lightweight web boilerplate serving as my basis for developing webapps and websites. By default you'll get the following features:
- Bundling of JavaScript by browserify
- Support of ECMAScript 2015 (ES6) features which are transpiled by Babel (See src/js for a simple example)
- Configurable linting with ESLint
- Automatic SVG Sprite generation based on sub-directories
- Optimization of images on the fly (supports JPG, PNG, GIF and SVG) with imagemin
- Version string based cache busting
- Desktop notifications when errors occur
- Sass Style Sheets with PostCSS autoprefixing
- Time-saving synchronised browser testing with Browsersync
Pretty cool, huh?
But Basti …
I know, it's pretty custom and mostly written to fit my personal flavor, but on the other hand it's based on lots of years working in web development agencies, as a freelancer with other freelancers or just on personal projects. So it's pretty much the latest shit, at least I try my best to keep up with the community and I think you really could love it like I do.
I used to work with Grunt and Gulp, also with Bower/Bundler and other package managers. That's one of the reasons why I came up with this. I just wanted to get rid of those managers as NPM/Node.js solely is just fine enough to handle this kind of work. Also articles like “Why we should stop using Grunt & Gulp” or “Why I Left Gulp and Grunt for npm Scripts” inspired me to do this.
Anyway, I had a fun time creating this. If you have any suggestions, problems or feedback. Feel free to create issues, pull request or get in touch with me via my twitter account (@mrprein).
Setup is dead simple. Just run:
-
npm install -
node build
within the terminal of your choice. That's it!
Don't forget to check out the project.json for customizing the whole build process!
Right now there are three basic tasks build, clean, watch. You can run them like this:
node build
node clean
node watch
If you only need to build specific things, you might want to run one of these:
node build fonts
node build html
node build images
node build scripts
node build sprites
node build styles
The same goes for watching:
node watch fonts
node watch html
node watch images
node watch scripts
node watch sprites
node watch styles
Also all watch tasks have a --sync option to enable Browsersync.
Third party frameworks/libraries enabled by default: normalize.css, picturefill.
v1.1.0