Minifying JavaScript files using Gulp

In our previous post we learned how to setup Gulp and also created a default task to print “Just ran our first gulp task” on the console. So, lets do something more useful in this post by creating our own task.

As mentioned earlier, Gulp provides many plugins to do the required task. In this post we will learn how to minify a javascript file. For all of you who don’t know what a minified javascript file is; its a javascript file will all the extra characters and extra spaces removed from it, even the return characters so that all the content of the minified file is in a single line. The main purpose of a minified file is to reduce the size of the javascript file. The minified file are generally represented with .min.js extension. For example, if your javascript file is ‘script.js’ then the name of its minified file will be ‘script.min.js’.

Lets begin with creating our task to minify the javascript file.

Step 1. First we need to download the Gulp plugin which will help in minifying the files. We will download gulp-uglify plugin for this task. Go to the project root directory where you have installed gulp and run the following command from the same directory.

npm install --save-dev gulp-uglify

The downloaded package will be saved in the node_modules folder.

Step 2. Next we need to write our task in the ‘gulpfile.js’ file. Open it and write the following code.

var gulp=require('gulp');
var uglify=require('gulp-uglify');

gulp.task('scripts',function(){
	gulp.src('js/*.js')
	.pipe(uglify())
	.pipe(gulp.dest('build/js'));
});
var gulp=require('gulp');
var uglify=require('gulp-uglify');

First we need to include or import gulp and gulp-uglify in our code and save there references in the gulp and uglify variables respectively. We require gulp since the task() function is in the gulp module.

gulp.task('scripts',function(){
	gulp.src('js/*.js')
	.pipe(uglify())
	.pipe(gulp.dest('build/js'));
});

Next we need to call the task() method of the gulp module. This function accepts two parameters, first one the task name and second one is the function which will be called when this task runs. In our case the task name is ‘scripts’ (it can be any name).

Inside the function we are calling the gulp.src() method, which accepts as parameter the path of the javascript files that we need to minify. By passing ‘js/*.js’ in the parameter we are telling the src() method to look for all the javascript(.js) files in the js folder.

Next we are connecting the output of the src() method to the uglify() method by using pipe(). Pipe() method will take the result of the src() method and pass those values to the uglify() method, whose task is to minify javascript files. Again we will use the pipe() method to save the generated minified files by connecting them to the dest() method of the gulp class. In dest() method we pass the path where our minified files will get saved.

Step 3: The only thing left now is to run our task from the command prompt. Go ahead and run ‘gulp scripts’ task and you will see that directory build/js will be created with minified javascript files in it.

Related Posts