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 ).