Grunt: Get Set Go!

Grunt is a javascript task runner that provides automation for repetitive tasks like minification, compilation, unit testing, linting, etc.

Setup

Install Node.js from http://nodejs.org/ as grunt runs on top of it.

Run following command to install grunt CLI. It allows to run grunt command from any directory.

npm install -g grunt-cli

Now create package.json & Gruntfile.js file

Creating package.json file

This file stores project development dependencies. This is placed in root of project folder. Run following command to create package.json file with basic structure.

npm init

Installing dependencies: This will install all dependencies of devDependencies object.

npm install

Installing Grunt: This will install grunt and save in devDependencies object.

npm install grunt --save-dev

This will store the grunt plugins in node_modules directory in root of project folder.

Like this other grunt plugins can be installed from http://gruntjs.com/plugins. Following are some useful plugins used commonly:

// For javascript:
npm install grunt-contrib-jshint --save-dev  // Validate files with JSHint
npm install grunt-contrib-uglify --save-dev  // Minify files with UglifyJS

// For css:
npm install grunt-contrib-sass --save-dev    // Compile Sass to CSS
// or
npm install grunt-contrib-compass --save-dev // Compile Sass to CSS using Compass

// For files & folders:
npm install grunt-contrib-clean --save-dev   // Clean files and folders
npm install grunt-contrib-watch --save-dev   // Run predefined tasks whenever watched file patterns are added, changed or deleted

Creating Gruntfile.js file

This file defines and configures the tasks to be run by Grunt. This is placed in root of project folder. Create Gruntfile.js file and write following code:

/* This is wrapper function */
module.exports = function(grunt){

  /* 1. Project configuration */
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    /* 2. Configure tasks */

    jshint: {
      all: {  // Custom name to call from other tasks
        src: ['Gruntfile.js', 'assets/js/*.js']
      },
      lib: {  // Custom name to call from other tasks
        src: ['assets/js/lib/*.js']
      },
      module: {  // Custom name to call from other tasks
        src: ['assets/js/module/*.js']
      }
    },

    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      lib :{  // Custom name to call from other tasks
        src: ['assets/js/lib/*.js'],
        dest: 'assets/min/js/lib.min.js'
      },
      module :{  // Custom name to call from other tasks
        src: ['assets/js/module/*.js'],
        dest: 'assets/min/js/main.min.js'
      }
    },

    // IMPORTANT: This task require Ruby & Sass installed
    sass: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      build: {  // Custom name to call from other tasks
        options: {
          style: 'compressed'
        },
        files: {
          'assets/min/css/common.css': 'assets/sass/common.scss',
          'assets/min/css/style.css': 'assets/sass/style.scss'
        }
      }
    },

    clean: {
      all: {  // Custom name to call from other tasks
        src: ['assets/min/*']
      },
      lib: {  // Custom name to call from other tasks
        src: ['assets/min/js/lib/*']
      },
      module: {  // Custom name to call from other tasks
        src: ['assets/min/js/module/*']
      },
      css: {  // Custom name to call from other tasks
        src: ['assets/min/css/*']
      }
    },

    watch: {
      js: {  // Custom name to call from other tasks
        files: ['assets/js/module/*.js'],
        tasks: ['jshint:module', 'clean:module', 'uglify:module'] // Order of task is important
      },
      css: {  // Custom name to call from other tasks
        files: ['assets/sass/*.sass'],
        tasks: ['clean:css', 'sass'] // Order of task is important
      }
    }
  });

  /* 3. Load grunt plugins for the configured tasks */
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');

  /* 4. Register the default tasks that will run when grunt command is executed */
  grunt.registerTask('default', ['jshint:all', 'clean:all', 'uglify', 'sass', 'watch']); // Order of task is important
};

Finally run grunt command

grunt