Grunt - Minify JavaScript file using Uglify plugin

In this tutorial we will learn to use Grunt uglify plugin in our project to minify JavaScript file.

In the previous tutorial we learned how to use Grunt to concatenate files. In this tutorial we will be minifying files using Uglify plugin.

Project structure

Let us assume that we have the following project structure. The name of the project is grunt-project.

Inside the js folder we have an app.js file. This is the file that we are going to minify.

Content of app.js file.

(function(global){

	"use strict";

	var
		greetings = function () {
			this.message = "Hello World";
		};

		greetings.prototype.getMessage = function() {
			return this.message;
		};

		global.greetings = greetings;

}(typeof window !== "undefined" ? window : this));

So, in the above code we have an IIFE or Immediately Invoked Function Expression. We are going to minify this file.

Task that we will write

We will be writing the following code in Gruntfile.js file.

module.exports = function(grunt) {

	//project configurations
	grunt.initConfig({

		uglify : {

			options : {
				banner : "/*! app.min.js file */\n"
			},
			build : {
				src : ["js/app.js"],
				dest : "dist/app.min.js"
			}

		}

	});

	//load uglify plugin
	grunt.loadNpmTasks('grunt-contrib-uglify');

	//create default task
	grunt.registerTask("default", ["uglify"]);

};

So, let's get started.

Install grunt-contrib-uglify

Run the following command in the terminal to install uglify plugin in the project.

$ npm install grunt-contrib-uglify --save-dev

Creating Grunt Task

Open Gruntfile.js file and type the following.

module.exports = function(grunt) {
}

In the above code we are creating a function that is used in every Grunt file and its plugins.

Creating project configuration for Grunt

Now, inside the function that we created above write the following code.

grunt.initConfig({
	
});

So, we are passing an object to initConfig method of Grunt. All our configuration for grunt will go inside this object.

uglify

Now, inside the object set the uglify property to the following value.

uglify : {

	options : {
		banner : "/*! app.min.js file */\n"
	},
	build : {
		src : ["js/app.js"],
		dest : "dist/app.min.js"
	}

}

In the above code we are creating an options property. And we are adding banner "/*! app.min.js file */\n" which will be added as a comment to the minified file.

We are then adding the build property. In this we are saying that our source src file is app.js inside the js folder. And we want the minified file to have a name app.min.js and we want it inside the dist folder.

Load grunt-contrib-uglify plugin

To load the uglify plugin write the following code.

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

Create default task

Now, at the end we will create a default task for the Grunt by typing the following code.

grunt.registerTask("default", ["uglify"]);

Run task

Finally to run the task type the grunt command in the terminal and it will minify the JavaScript file using uglify.

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt
Running "uglify:build" (uglify) task
File dist/app.min.js created: 269 B → 204 B
>> 1 file created.

Done.
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

After running the above command we will have the app.min.js file inside the dist folder.

That's all for this tutorial. Have fun coding.