Skip to content

Instantly share code, notes, and snippets.

@danielwrobert

danielwrobert/grunt-setup.md

Last active December 23, 2015 15:49
Show Gist options
  • Save danielwrobert/6657710 to your computer and use it in GitHub Desktop.
Save danielwrobert/6657710 to your computer and use it in GitHub Desktop.
Download ZIP
Getting Started with Grunt.js - Reference
Raw
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

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