a blog for those who code

Monday 31 August 2015

Getting familiar with Grunt JS - Part 2

In our previous post about Getting familiar with Grunt JS - Part 1, we have discussed how we have installed and setup Grunt in our machine. In this post we will discuss about how to configure Grunt for our application. Grunt will do the repetitive tasks for you like minification, compilation, unit testing etc whatever you instruct Grunt to do.

If you go through the gruntfile.js which was created in our previous post you will notice the code like below :

// Project configuration.
grunt.initConfig({
  // Task configuration.
  concat: {
      //concat task configuration
  },
  uglify: {
      //uglify task configuration
  },
  jshint: {
      //jshint task configuration
  },
  qunit: {
      //qunit task configuration
  },
  watch: {
      //watch task configuration
  }
});

Now these are the places where we need to add the code to configure for our project. Lets say I have added a file called example.js in my folder gruntExample where gruntfile.js and package.json is available whose content is like below.

var string = "Hello World";
var buffer = new Buffer(string);
var toHex = buffer.toString('ucs2');
console.log(string + " encoding to hex is " + toHex);

Now after adding this file we have to instruct our gruntfile.js to run some tests over this file. At first we will add two arrays naming buildFiles and jsFiles like below. Since we have only one build file (gruntfile.js) and one js file (example.js) the array will look like below.

  var buildFiles = ['gruntfile.js'];

  var jsFiles = [
        'example.js'
    ];

Now inside jsHint : { } in grunt.initConfig () I will add an attribute called all which is an array containing the above two arrays.

jshint: {
      all: [buildFiles, jsFiles]
      ...
      ...
});

And at the last before closing tag we will add a console.log message that when we have executed the grunt. It is just for an information purpose not important.

console.log('\nGrunt executed at: ' + new Date() + '.\n');

Now when you run grunt command you might get an error like 'console' is not defined and 'Buffer' is not defined.


This is because console is simply treated as an identifier that should be defined and accessible. jshint does not know that console and Buffer is a global variable in NodeJS. So we need to tell jshint that there are some global variable which we are going to use in our application. This can be done by adding globals inside an options in jshint as shown below.

jshint: {
      all: [buildFiles, jsFiles],
      options: {
        ...,
        ...,
        globals: {
              console: true,
              Buffer: true
        }
      }
}

Now when you run the grunt command you will see that our all the file are lint free. Yay we have passed our test. You can download the application from here.


Please Like and Share CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment