Working with Grunt

Edit on GitHub
Sep 14, 2014
Workflow
2 minutes

Installation

Node.js and NPM

Install Node by downloading the package from their website and running the install. You can also install it on a Mac via homebrew (Mac) by running the command

brew install node

NPM (Node Package Manager) comes with Node by default.

Grunt CLI

Install Grunt CLI:

npm install -g grunt-cli

(the -g means to install it globally on your OS so that you can use the grunt command where ever you are on your system).

Getting started with Grunt

You install Grunt on a per-project basis. Go to your project’s folder. It needs a file there named package.json at the root level. You can just create one and put it there.

The contents of that file should be this:

1{
2  "name": "example-project",
3  "version": "0.1.0",
4  "devDependencies": {
5    "grunt": "~0.4.1"
6  }
7}

Once you have the package.json file in place, activate Grunt with the following command:

npm install

Installing packages

npm install grunt-contrib-packagename --save-dev

npm install grunt-packagename --save-dev

Plugins with a contrib in name are officially maintained Grunt plugins.

When installing plugins this way your package.json file will automatically be updated to include this new dependency. the --save-dev flag means our package.json file gets automatically updated to include the dependency we’ve just installed.

ImageOptim:

npm install grunt-imageoptim --save-dev

For usage: https://github.com/JamieMason/grunt-imageoptim

Configuration (Gruntfile.js)

Tasks

You need to create a default task in the Gruntfile. This task will be run when you enter the ‘grunt’ command.

1// the default task can be run just by typing "grunt" on the command line
2grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

You can also create custom tasks

1// this would be run by typing "grunt test" on the command line
2grunt.registerTask('test', ['jshint', 'qunit']);

Sass

Sass is that it can do concatenation and minification all by itself.

Notes