This is a proof of concept of how I could use Grunt to make front end development super efficient.
There's so many Grunt plugins that I've limited myself to 5 which I think account for the majority of the work I find myself doing. These are:
- grunt-contrib-compass does all the compass wizardry
- grunt-contrib-watch runs asks when watched files/directories are changed
- grunt-contrib-jshint validates files with jshint
- grunt-contrib-uglify minifies js with uglifyjs
- grunt-contrib-imagemin minifies png, gif and jpg images
There are currently 2 tasks: grunt dev
and grunt build
.
grunt dev
fires up thewatch
task which keeps an eye on your Sass (compass
) and JS (jshint
) whilst you're bashing out code.grunt build
runs all of the above and sticks them in theassets/_build
folder ready to be deployed.
ruby 2.0.0p247
or any flavour of Ruby 2 would be fine, I suspect
Install Node
On OS X using Homebrew:
brew install node
Install Grunt
npm install -g grunt-cli
### Install Sass, Compass
bundle
npm install
Run the default grunt task (currently dev
) by
grunt
grunt dev
, grunt build
, etc