Grunt: Uglify

Bundling and minification of JavaScript files can be achieved through the grunt-contrib-uglify plugin.

Navigate to the root directory of your project and run the command 

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

The package.json file's devDependencies field will now have a new listing called grunt-contrib-uglify

				
				  "devDependencies": {
				    "grunt": "^0.4.5",
				    "grunt-contrib-uglify": "^1.0.1"
				  }

JS Uglify/File Minification

Below is an example set up of Gruntfile.js to minify test.js and sample.js files inside the src/js directory and output the respective minified files into the dist/js directory

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							uglify: {
								dist:{
									files: {
										'dist/js/test.min.js':'src/js/test.js',
										'dist/js/sample.min.js':'src/js/sample.js'
									}
								}
							}
						});	
					}

The grunt-contrib-uglify plugin needs to be loaded next, which is done by passing the plugin name as an argument to the grunt.loadNpmTasks() method

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							uglify: {
								dist:{
									files: {
										'dist/js/test.min.js':'src/js/test.js',
										'dist/js/sample.min.js':'src/js/sample.js'
									}
								}
							}
						});	

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

Minification of JS files can now be achieved by running the command

				
				grunt uglify

But a task, or a set of tasks, can be run together under an "alias task". The grunt.registerTask function serves this purpose. The first argument is the task name. In the example below, we define a default task name. The second argument is an array of tasks to run. We add our minification task (uglify) into this array. Gruntfile.js now has the structure

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							uglify: {
								dist:{
									files: {
										'dist/js/test.min.js':'src/js/test.js',
										'dist/js/sample.min.js':'src/js/sample.js'
									}
								}
							}
						});	

						grunt.loadNpmTasks('grunt-contrib-uglify');
						grunt.registerTask('default', ['uglify']);
					}

The default task defined can be run just by typing grunt into the terminal without specifying a particular task. In our case, the below command will run the uglify task

					grunt

The JavaSscript files test.js and sample.js can also be combined and minified into a single file common.js as

					
					module.exports = function(grunt) {
						grunt.initConfig({
							pkg: grunt.file.readJSON('package.json'),
							uglify: {
								dist:{
									files: {
										'dist/js/common.js': ['src/js/test.js', 'src/js/sample.js']
									}
								}
							}
						});	

						grunt.loadNpmTasks('grunt-contrib-uglify');
						grunt.registerTask('default', ['uglify']);
					}