####Introduction
Setting up Grunt tooling at the start of projects can be tedious and time consuming. After doing it for the millionth time I decided to create a base HTML5 bootstrap to roll projects.
- Auto Prefixer
- SASS Compilation
- Bower
- JS Browserify
- JS Uglify
- Source Maps
- Newer
- Responsive Images
- Image Minification
- HTML Minification
- Watch / Live reload
- Jasmine
- Istanbul Code Coverage
- PhantomJS
- Assemble
- YUIDocs
- Style Guide
Make sure your have the following installed with these versions or greater when running the bootstrap
Node v0.10.26
There are several hoops you may have to jump through to get all dependencies installed, but hopefully alot of this stuff will be on your machine anyway.
First we need to install bundler
gem install bundler
Then we need to get the rest of our ruby dependencies (Sass, Neat Bourbon)
bundle install
npm install
To require libraries that are not in the commonjs format we are going to use napa to get them and wrap them for easy inclusion with browserify.
npm install -g napa
bower install
To run optimisations over images we use GraphicsMagick, to install we need to use brew. If your on mac and do not have brew installed you'll need to go ahead and get that setup.
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
If your on windows you will need to download the binary and install it manually on your machine. You can get the binary here.
Now we can install GraphicsMagick
brew install GraphicsMagick
To run tests we need PhantomJS and jasmine
Jasmine will come installed as part of the npm install
task. PhantomJS, will need to be installed using brew, see previous step to install Brew if you don't already have it.
brew install phantomjs
We have five targets we can run dev
, dist
, server
, styleguide
and docs
.
dev
is pretty optimised but gives you source maps and does not optimise images as much as dist
. The dist target is highly optimised and is production ready. Use this when building to a production server. Spinning up a simple http server you'll use the server
target. It comes with live reload turned on. The final target docs
produces a one time hit of the yui docs and places it in the dist folder. this same task will also run as part of the dist
task mentioned previously.
The style guide task generates a folder named style_guide
and is a base for building out your ui elements. Elements can be styled and catalogued here for use in the main dev folder. For more information around style guides look no further than Twitter bootstrap.
The tasks are pretty self explanatory, but for the purpose of this documentation I've listed them below:
grunt dev
grunt dist
grunt server
grunt styleguide
grunt docs
A list of upcoming features for consideration. Feel free to add feature requests.
- Sonar Integration
- Custom Yeoman Generator (AngularJS or HTML5)
Recent Updates to repo
- Added Style Guide (Work In Progress) (21/05/2014)
- Swapped out Browserify-shim for napa (17/05/2014)
- Removed Neat and Bourbon (13/05/2014)
- Added Travis Build File (28/04/2014)
- Added Istanbul Code Coverage (28/04/2014)