vicegold / web-boilerplate

My super fast, lightweight and modern web boilerplate. ❤️

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:

1. npm install

2. 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