What is GruntJs ?

Gruntjs is javascript tool which use to perform repeated task like unit testing, listing, minification, etc. Grunt is written in Node.js by Ben Alman in 2012.

Before you start

  • You should have knowledge of javascript and Node.js.
  • Make sure your NPM (Node Package Manager) is up-to-date (you can update it by running npm update -g npm)

Overview

There are thousands of plugins available in Grunt. Largest companies like MIcrosoft, twitter, Adobe, jquery, mozilla and many others are using it.

Getting started

Grunt and grunt plugins are manage by NPM and Node.js package manager.

Installing the grunt using CLI (Command Line Interface)

You can install the grunt using the below command.

pm install -g grunt-cli

This command will put grunt in your system path and it can be run from any directory.

Note: Installing grunt-cli does not install the grunt task runner.

 

After the installation of grunt, it will generate the package.json file that will be your root directory. Below is the sample code of the 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"

    }

}

 

You can install the grunt plugin using below command.

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

 

Example of a grunt file

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('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'
            }
        }
    });

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

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

 

Project configuration in grunt

You can configure the project by passing configuration data to grunt.initConfig Method. And you may store any formated data inside configuration object you can see that in below example.

grunt.initConfig({

    pkg: grunt.file.readJSON('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'

            }

       }

});

 

Advantages of grunt js

  • Using grunt you can perform testing of file easily.
  • Using of grunt reduce the development time and increase the project performance.

Disadvantages of grunt js

  • When NPM packages are updated than you have to wait for another update of grunt.
  • It’s includes may configuration parameters for every plugins so configuration files are very log in length.

Have something to share on the same? Tweet us on Twitter @letsnurture or drop a post on the official Facebook page of LetsNurture. Share your thoughts with us, we will be happy to have a discussion on the same.

Happy Coding 😉

Share Button
Want to work with us? We're hiring!
  • Rajendra

    Nice article.