GruntJs is a task-based command line build tool for JavaScript projects. Grunt is a JavaScript task runner that automates your routine development tasks. While working on your web application you do a lot of tasks like code linting, minification, merging manually. But Grunt will let you create automatic tasks for all of these (and more) manual processes.

In this series of articles we will learn Grunt basics and also explore a number of important Grunt plugins to automate your frontend workflow. This series covers following tutorials on GruntJS:

1. Learning GruntJS:Part 1 – Getting Started with GruntJs
2. Learning GruntJS:Part 2 – Manage JavaScript Tasks
3. Learning GruntJS:Part 3 – Manage CSS Tasks
4. Learning GruntJS:Part 4 – Some Useful Grunt Plugins

Getting Started with GruntJs

Install Grunt

$ npm install -g grunt --save

This command will install Grunt on your system and save dependency in package.json

Install Grunt Commandline

$ npm install -g grunt-cli

Creating new Grunt Project

The minimum requirement to start using Grunt is package.json and the Gruntfile.
Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins.

package.json

package.json is present at the root of your project and should be committed with source of your project. This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.
The npm init command will create a basic package.json file.
Running npm install in the same folder as a package.json file will install the correct version of each dependency listed therein.

// Sample package.json
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Gruntfile

If you are using any project scaffolding, Gruntfile should be available there. If not just copy the code below and save as Gruntfile.js at your project root.

// Sample Gruntfile.js

module.exports = function(grunt) {

  // Project configuration
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });

  // Load the plugin that provides the "uglify" task.

  // Default task(s).
  grunt.registerTask('default', []);

};

This is an empty Gruntfile which is of no use. Each Gruntfile has following four parts:
1. The wrapper function:

module.exports = function(grunt) {
  // Everything goes here
};

2. Project and task configuration
This part has most of the project related configuration. All the task configurations also come under this part. See the example below for uglify task (we will cover it later):

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), // Read settings from package.json
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

3. Loading Grunt plugins and tasks: All the tasks that needs to be run are loaded under this part.

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

4. Custom tasks: Create your own tasks:

// Register Grunt task(s)
grunt.registerTask('default', [<tasks>]);

Now running grunt from commandline will run all the tasks listed in default task. You can create as many tasks as you want in your Gruntfile.