Getting Started with Grunt.js - Reference

grunt-setup.md

Getting Started with Grunt.js

Setup Process:

• Install Node & NPM (http://nodejs.org/)
• Globally install grunt-cli (npm install -g grunt-cli)
• Move into proj directory and create a package.json file
  • npm init
  • complete steps
  • remove un-needed properties ("main", "scripts", "repository", "license" … whatever you may not wish to include)
• Install grunt to project (npm install grunt --save-dev)
• Install any additional desired grunt packages
  • example: uglify for minification (npm i grunt-contrib-uglify --save-dev)
  • Don't forget the '--save-dev', it writes the dependencies to the package.json file for you
  • Oodles of packages available on the Grunt GitHub repo
• Run grunt (grunt)

Gottchas

• Compass (grunt-contrib-compass):
  • If you wish to compile an existing project from a config.rb file, it seems like you need to still specify the sassDir and cssDir.
• Uglify:
  • If you wish to compile multiple files, you muse list them out separately (min file first) as comma separated key, value pairs - Uglify Issue #23 - CLOSED
    • UPDATE(9/25/2013): You can actually build a files list dynamically via the files array to minify multiple scripts. Here is a nice example from the Grunt docs. Thanks to Jarrod Overson for pointing this out to me!

Example files

• package.json
• Gruntfile.js

From the Docs

• Configuring Tasks
• Sample Gruntfile

Extras

• grunt-init (npm install -g grunt-init)
• Livereload

References:

• HTML5DevConf Presentation - Grunt JavaScript Automation for the Lazy Developer by Dirk Ginader
• WPtuts+ tutorial - How To Optimize Your WordPress Workflow
• SitePoint Tutorial - Writing an Awesome Build Script with Grunt
• Misc tutorial/video - Moving to GruntJS

Example Repo's (From video demos)

• Dirk Ginader's Resume
• Accessible Tabs
• jQuery Tiny Pub/Sub