Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Getting Started with Grunt.js - Reference

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

From the Docs

Extras

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

References:

Example Repo's (From video demos)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.