What is Grunt ?

Grunt-JavaScriptGrunt or GruntJS is a node based command line task runner for JavaScript projects. Grunt brought an evaluation in front end &JavaScript development. This is very helpful for developers by automate their repetitive tasks. Grunt used for automation of JavaScript work flows like minifying and concatenating JavaScript files, running tests, refresh browser each time you make changes in your scripts and so on. You can see more at Grunt’s official site.

Why should i use Grunt?

The main and most useful feature of using GruntJS is Automation and this is the reason for using GruntJS. GruntJS also has an great active community of developers. There are almost 5,789 plugins available and new plugins are being released regularly. Some common and most used plugins are JsHint, Saas, Less, uglify etc.

Intersted in grunt , would like to try ? So, lets Start with installation.

Install and setup Grunt on Ubuntu

Each library, software or application have some dependencies. GruntJs also have its requirements. For installing and managing Grunt and Grunt plugins we need npm (A Node.js package manager). So before installing Grunt make sure you have installed npm. Now follow this steps to install GruntJS

  1. Update npm to latest version. To update npm use this command.
    sudo npm update -g npm
  2. 2) As Grunt is a CLI(command Line) tool. So we need to install Grunt’s command line interface (CLI)
    sudo npm install -g grunt-cli

    This command will install GruntJS and add to your system command. So, you can run it anywhere using “grunt” Command.

Now we can start using GruntJS in our project. For this follow the below steps
  1. Open a terminal and move to your project folder using cd  command and create a package.json file. Now, open package.json with your favorite code editor and paste the below code into that
    	"name": "YOUR PROJECT NAME",
    	"version": "0.1.0",
    		"grunt": "~0.4.4" (or whatever version is latest),
    		"grunt": "~0.4.4",
    		"grunt-contrib-jshint": "latest",
    		"jshint-stylish": "latest",
    		"grunt-contrib-uglify": "latest",
    		"grunt-contrib-less": "latest",
    		"grunt-contrib-cssmin": "latest",
    		"grunt-contrib-watch": "latest"
  2. Now run the below command into your project folder where you created the package.json file
    npm install

    This command will install the required libraries for your project locally for your project.

  3. Now in order to use Grunt, we need to create a file called Gruntfile.js. Gruntfile used to specify the tasks which we want to perform by grunt. This file contains the build script for our project. So now create a file named Gruntfile.js in your project directory and paste the below code into that
    module.exports = function(grunt){
            pkg: grunt.file.readJSON('package.json')
        grunt.registerTask('default', []);

    Now you are ready to run GruntJS at the root of your project.

    In my next post i will describe How to minimize & concat JavaScript using GruntJS and How to define tasks in gruntfile.js ?

Leave a Reply

Your email address will not be published. Required fields are marked *