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 within the terminal of your choice.
That's it!
Right now there are three basic tasks build, clean and watch. You can run them like this:
| Command | Description |
|---|---|
node build |
Builds the whole project by running all tasks which are enabled in the build.js file. |
node clean |
Will clean up your project by deleting everything that has been built before. (By default the ./build folder will be deleted) |
node watch |
Starts a process that watches all relevant files and once a file has been changed the corresponding task will be started. |
node server |
This is an alias to node watch --sync which will start Browsersync as well. |
If you want to build/watch for specific things only, you may pass the sub-task as a second parameter. Right now there is fonts, html, images, scripts, sprites and styles.
So if you care about your styles only, you may use:
node build styles or
node watch styles
Also all watch tasks have a --sync parameter to enable Browsersync.
By default this parameter will start the Browsersync's built-in static server which will serve files from the project destination (dest in project.json which is ./build by default) directory. In case you already have a vhost running and want to proxy it, have a look at the documentation.
And don't forget to check out the project.json for customizing the whole build process!
By default this boilerplate comes enabled with normalize.css and picturefill.
v1.1.3