Starting with Grunt.js : Beginner's tutorial

If you are a web developer, its highly probable that you find the need to have a bundle library which can perform various tasks on your developed code. Below here today, you will learn what the Grunt.js is and how to use it in your production setup for various purposes.

Note: This is a beginner level tutorial to get you up and running. You should check out official grunt website for more details.

Grunt Setup Manual

Introduction:

Grunt is a JS task runner, which means it helps us in doing tasks which are necessary or expected for a JavaScript project before going into production.

Few of such tasks are:

1. jshint : checking your JavaScript code for errors and punctuation.

2. minify : minifying your .css and .js files to reduce their size.

3. concat : concatenating various file into one file.

4. copy   : copy various images/icons etc.. into one place for referring.

5. uglify : reducing your variable and function name to reduce overall size.

Prerequisite:

To start with grunt:

1. We require to set up node.js (which will install npm on our system). I am assuming you have the knowledge of node and working with npm.

2. We need to install grunt by using npm install grunt --save-dev or npm install --save-dev grunt.

3. By using --save-dev an entry is made in our package.json file for every dependency we install.

With this we have the benefit of direct copying the package.json file at a location and run npm install at that location. This will install all previously installed dependencies from the package.json file.

4. So, once the grunt is installed we need to install grunt-client and various other grunt plugins that we will be using in our project. Few of these can be installed by following commands:

              npm install --save-dev grunt-cli   //needed for installing grunt client

             npm install --save-dev grunt-contrib-jshint //for jshint usage

             npm install --save-dev grunt-contrib-concat //for concat usage

             npm install --save-dev grunt-contrib-cssmin //for minify css usage

             npm install --save-dev grunt-contrib-uglify //for uglify usage

You can visit official site and look for all available grunt plugins and there usage.

5. Once all this is done you need to create a Gruntfile.js file. This file creates a config and exports it. The config consists of various task-definition, npmTaskLoad command for used plugins and registered task name. An example of such a file using jshint is below:

module.exports = function (grunt) {

    grunt.initConfig ({

        jshint: {

            files: ['Gruntfile.js', 'scripts/**/*.js'],

            options: {

                // options here to override Jshint defaults

                globals: {

                    "jasmine": true,

                    "angular": true,

                    "browser": true,

                    "element": true,

                },

                jshintrc: true

            }

        });

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.registerTask('test', ['jshint']);

}

The above file first declares a jshint task with the configurable parameters, thereafter it tells grunt to load 'grunt-contrib-jshint'  and finally it register this task with name 'test', which means executing grunt test at command line will execute this task. You can club multiple tasks to one name and they will be executed in the order of declaration.

Once you are done with declaring and registering all your tasks. You can execute them one by one in command line and generate required files. For setting up build you can have one cumulative task like:

    grunt.registerTask('build', ['copy', 'cssmin', 'concat']);            

which runs all these tasks in order.

Thereafter you can promote the minified files to your production environment.

Update:

One important thing that I found at a later stage was that you shouldn't register any of your tasks with a name that you have in task array. For ex: Don't register your uglify task with name uglify Doing so will confuse grunt to pickup the registered or the defined task and your grunt will most probably hang.