Skip to main content

GRUNT – Cleaning and Minifying JavaScript Files

In this tutorial, we are going to create a NodeJS/Grunt project which has basically used for minifying many JavaScript files into one. The steps are,

Step 1. 

Install NodeJS latest version and refer “http://nodejs.org/download/” link for more information.

Step 2. 

If you are having any existing NodeJS instance then just update by using “npm update –g npm” command. I am having existing NodeJS instance and updated by invoking above command.


Step: 3.

Next, we need a Grunt command line interface (CLI) tools globally. It is a node.js module and needs to install by using a command called “npm install –g grunt-cli”.


Step 4. 

We need another component called grunt-init globally. It is also a node.js module and we can install it globally by invoking a command “npm install –g grunt-init”.


Step 5. 

Next, we need to create a new grunt project. I have created new folder called “Grunt-MinifyDemo” in “D“ directory and this is my project.

Step 6. 

In windows command prompt, Just move to that particular directory and check the screen shot which help you to understand what I mean here.


Step 7. 

Now we need to initiate a Node.js project by invoking a command called “npm init”. While invoking this command will ask you to enter application name, description, version, and other details. For more information please check my screen shot. The above command finally will create package.json file which basically used for defining our application specific dependencies and other details. We can edit this file at any point of time and if you define any new dependencies then will have to invoke “npm install” command for installing those new dependencies. 


Step 8. 

Now we need to edit the package.json file for defining our grunt dependencies. The modified package.json file contents are given below.

{
  "name": "grunt-minify-demo",
  "version": "0.0.1",
  "description": "Simple demo application for minifying javascript files using GRUNT tool",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gnanasuriyan A",
  "license": "MIT",
  "devDependencies": {
   "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

I have included grunt specific dependencies and changed main value as “Gruntfile.js”. This is an entry point of the application.

Step 9. 

Now just invoke a command called “npm install” for downloading those specified dependencies as we discussed in step number 7.



The above command will download all the dependencies and for verification just check node_modules folder present in out application folder “D:\Grunt-MinifyDemo”.



Step 10. 

Currently we have developed only node.js project and downloaded all GRUNT dependencies. Now we need to define our grunt task for combining and converting JavaScript source files into single minified file. For that we need a help from one more grunt module called “grunt-contrib-uglify”. We have already included in dependency list and that module is already available in node_modules folder.

Step 11. 

For defining our grunt task, we need to create a JavaScript file called “Gruntfile.js” and this name is based on "main" key value in package.json file. Note: the above file should be created in root folder of the application and here the root folder is “D:\Grunt-MinifyDemo”.



Step 12. 

Before writing a grunt task, I am going to create some test JavaScript source files for minification. Nothing fancy in the JavaScript files and I have just included some test functions with console messages.


Step 13. 

Now I am going to write a grunt task for combining/minifying my File1.js and File2.js file present in src folder. The source code which I have written in Gruntfile.js for minification is given below. 

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options : {
          compress : {
            drop_console : false
          },
          beautify : true
      },
      dev: {
        files: {
          'build/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
};

Step 14. 

The grunt.initConfig({}) function is basically used for defining our grunt configuration. For understanding more about grunt configuration, please refer "https://github.com/gruntjs/grunt-contrib-uglify". Here I have created only one environment called dev which contains my output file path “build/dev/output.js” and array of JavaScript source file names. 

Step 15. 

The line grunt.loadNpmTasks function is basically used for loading grunt modules and grunt.registertask is basically used for registering grunt tasks. In single project we can register more then one grunt tasks. For more information about registering grunt tasks, please refer "http://gruntjs.com/creating-tasks". 

Step 16. 

Now If you run a “grunt” command that will trigger the default task i.e. uglify:dev and will create a new combined JavaScript file called “output.js” in "build/dev" folder. The grunt will run default task always when we don't specify any registered task name.


Instead of you can run the above task by triggering a command “grunt uglify:dev”.

Step 17. 

This is my output.js file content. Here I am not minifying my JavaScript code and instead just combining all  my different JS files into single one.

function moduleOne() {
    console.log("Module one");
}

function moduleTwo() {
    console.log("Module two");
}

Step 18. 

Now I am going to define one task called “prod” which will combine and minify the JavaScript file. The modified Gruntfile.js source code is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: true,
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['uglify:prod']);
};
Step 19. 

Now just invoke a command “grunt prod” for creating production build which will combine and minify all specified JavaScript files.


Step 20. 

In some situation we need to run some more tasks before running actual minification. For example normally we will have to clean the existing result before taking a new build. The grunt actually provide a way for defining more than one tasks which will run sequentially. Just check my production task which I have registered in Gruntfile.js. I am just cleaning all existing builds before taking a new production build.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: 'all',
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['clean', 'uglify:prod']);
};
Step 21. 

Now just invoke same “grunt prod” command and see the result.


We are getting some warning because not loading grunt clean module properly. Just load that grunt clean module properly and test it. For loading clean module, we need to update package.json file and need to invoke “npm install” command. This is my modified package.json file.

{
  "name": "grunt-minify-demo",
  "version": "0.0.1",
  "description": "Simple demo application for minifying javascript files using GRUNT tool",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gnanasuriyan A",
  "license": "MIT",
  "devDependencies": {
   "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-clean": "~0.4.0"
  }
}


Step 22. 

Now we need to load a “grunt-contrib-clean” module by using “grunt.loadNpmTasks“ function and my modified Gruntfile.js source code is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: 'all',
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    },
    clean: {
      js: ['build/dev/output.js', 'build/prod/output.js']
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  //Loading grunt clean module
  grunt.loadNpmTasks('grunt-contrib-clean');

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

Step 23. 

In my above code just check my clean configuration. I am just removing production and development JavaScript files from build folder. Now just take a production build by invoking “grunt prod” command.


Conclusion

1. We have created new Node.js application for running grunt tasks.
2. We have included grunt minification tasks for minifying JavaScript files by using grunt uglify module.
3. We have included clean task for removing existing build from file system by using grunt clean module.

The entire project is available in my github repository (https://github.com/gnanasuriyan/grunt-minification ).

Comments

Luis said…
Hi, there is a little mistake in your final grunt file, comments are removed when dev task is executed. In order to fix it, switch preserveComments option between dev and prod task.

Anyway really useful tutorial, thx!


Popular posts from this blog

Getting key/value pair from JSON object and getting variable name and value from JavaScript object.

Hi, I had faced one issue like this. I have an JSON object but I don't know any key name but I need to get the all the key and corresponding value from JSON object using client side JavaScript. Suddenly I wondered whether it's possible or not, after that I had done lot of workaround and finally got this solution. See the below example.
function getKeyValueFromJSON() {
var jsonObj = {a:10,b:20,c:30,d:50}; for(var key in jsonObj) {       alert("Key: " + key + " value: " + jsonObj[key]);     }  }
 In this example I have created the one json array as string, and converted this string into JSON object using eval() function. Using for-each loop I got all the key value from jsonObj, and finally using that key I got the corresponding value.
 Finally I got the alert like this,

 Key: a value:10
   Key: b value:20
   Key: c value:30
   Key: d value:50

 During this workaround I got one more idea, using this same way I got all the variable name and corresponding value from Java…

Simple Login Application Using Spring MVC and Hibernate – Part 1

I hope developers working in web application development might hear about MVC architecture. Almost all technologies provide support for MVC based web application development, but the success is based on many factors like reusable of the code, maintenance of the code, future adaption of the code, etc..,  The success of the Spring MVC is “Open for extension and closed for modification” principle. Using Spring MVC the developers can easily develop MVC based web application. We don’t need any steep learning curve at the same time we need to know the basics of spring framework and MVC architecture. The Spring MVC consists of following important components. 1. Dispatcher servlet
2. Controller
3. View Resolver
4. Model Spring MVC - Overview  The overall architecture of Spring MVC is shown here.  1. When “Dispatcher Servlet” gets any request from client, it finds the corresponding mapped controller for the request and just dispatches the request to the corresponding controller. The reque…

Simple Login Application Using Spring MVC and Hibernate – Part 2

I hope you have visited my part1 of my tutorial. Let’s see the steps for integrating hibernate framework into Spring MVC. Here I have used MySQL database. I have created one database called “springmvc” and created one table called “user” with userid, username, password fields.
 I have inserted some records into table like this. Step 1: Creating User POJO class.  We need to create a User POJO class for mapping user table. Ok let’s create it. Step 2: Creating hibernate mapping xml file for user class.  In hibernate we need to create hibernate mapping xml file for all domain class for mapping into corresponding database table. Instead of creating xml file you can use annotation for mapping domain class into database table. This is my mapping xml document created for mapping our user domain class into user database table. Step 3: Creating authenticate service class.
 The method “verifyUserNameAndPassword” present in “AuthenticateService” class is used for  verifying the user name and pa…