grunt basics

gruntjs is an awesome JavaScript task runner which is used for... well you guessed it running tasks. So lets get up and running with grunt.

<b>First install grunt</b>

npm install -g grunt-cli

<b>Now lets set up grunt for your project</b>

add the package.json and the Gruntfile.js.to your project

<b>package.json</b>

package.json is used to list grunt and the Grunt plugins your project needs as dependencies.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"
  }
}

<b>Gruntfile.js</b>

The Gruntfile is used to configure or define grunt tasks and load Grunt plugins. Here is an example for a calculator app Gruntfile:

module.exports = function (grunt) {
    grunt.initConfig({
        meta: {
            banner: '/* my minified app */'
        },
        min: {
            dist: {
                src: ['<banner>', 'calculator/*.js'],
                dest: ['calculator.min.js']
            }
        },
        watch: {
            files: ['calculator/*.js'],
            tasks: ['min']
        }
    });
    grunt.registerTask('default', [
        'min:dist'
    ]);

};

In this Gruntfile, the min task, which can be run in the command line as grunt min, will minify all of your JavaScript files in the calculator/ folder into calculator.min.js.

We have also registered a grunt default task, so running grunt will run the default task. We could have set up a dist task as shown below.

grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

Okay so that is an example of what grunt can do for us, pretty nice... what other tasks can we add to our Gruntfile.js.

<b>How about compiling your coffeescript code into js</b>

// install the grunt plugin
npm install grunt-contrib-coffee --save-dev
// add this to your GruntFile, 
grunt.loadNpmTasks('grunt-contrib-coffee');

<b>or compiling your less code into css</b>

// install the grunt plugin
npm install grunt-contrib-less --save-dev
// add this to your GruntFile, 
grunt.loadNpmTasks('grunt-contrib-less');

<b> or optimizing require js files</b>

// install the grunt plugin
npm install grunt-contrib-requirejs --save-dev
// add this to your GruntFile, 
grunt.loadNpmTasks('grunt-contrib-requirejs');

Yes, grunt can do all of those things. Each of these plugins will need to be configured in your Gruntfile via the grunt.initConfig method. More on configuring grunt plugins

<b>configuring your grunt less plugin is shown below</b>

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  }
}

<b>Learn how to configure some of your grunt plugins at npmjs.org</b>

less grunt plugin

coffeescript grunt plugin

requirejs grunt plugin