Grunt notes

grunt.md

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

via: Wikipedia

Installation

1- install grunt-cli globally:

npm install -g grunt-cli

What does it do? grunt-cli runs the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

2 - The root of your project must have both package.json and a Grunfile:

• package.jsoncan be created by initializing the project with npm init or npm init -y to skip the questionnaire altogether.
• the Gruntfile must be created manually.
  • Gruntfile.coffee for Coffeescript.
  • Gruntfile.jsfor plain Javascript. Note: both package.json and Grunfile should be committed with your project source.

3 - install gruntlocally as a DevDependency:

npm install grunt --save-dev

or in case you want to install a specific version:

npm install grunt@VERSION --save-dev

Note: VERSION is the grunt version you want to install (e.g. 0.4.5).

4 - install needed gruntplugins, also as DevDependencies. Here are some recommended plugins:

• grunt-contrib-jshint which is a Javascript validation tool:

npm install grunt-contrib-jshint --save-dev

• grunt-contrib-clean which is a tool that cleans up your build to make sure that no artifacts from previous builds are hanging around, read more about it here:

npm install grunt-contrib-jshint --save-dev

• grunt-contrib-nodeunit provides server-side JavaScript unit testing:

npm install grunt-contrib-nodeunit --save-dev

• grunt-contrib-uglify which parses, minifies and compresses (or basically uglifies) JS files:

npm install grunt-contrib-uglify --save-dev

• grunt-mkdir gives grunt the ability to create directories:

npm install grunt-mkdir --save-dev

• grunt-contrib-copy gives grunt the ability to copy files:

npm install grunt-contrib-copy --save-dev

• the grunt-responsive-images plugin produces images at different sizes for responsive websites:

npm install grunt-responsive-images --save-dev

configuration

All your Grunt code must be specified inside a wrapper function :

module.exports = function(grunt) {
  // Do grunt-related things in here
};

And tasks configuration is done through grunt.initConfig function, that takes tasks configuration Object:

module.exports = function(grunt) {
  grunt.initConfig({
    // Your Task-named properties go here
  });
};

You can access package.json file within grunt using grunt.file.readJSON('package.json').