Concatenate & Minify Javascript with Gulp, Improve Site Performance

This tutorial is part of a series on Gulp:

• Getting Started with Gulp Javascript Task Runner
• Compiling SASS/SCSS to CSS with Gulp
• Concatenate & Minify Javascript with Gulp, Improve Site Performance

When building large web applications, you'll find that your app may require LOTS of javascript files. Numerous requests for large files can slow site performance. With Gulp, we can improve the overall performance of our sites and applications by minifying our javascript to reduce the file size and concatenating our files to reduce the number of file requests. (If you need help installing Gulp, go back and read Getting Started with Gulp Javascript Task Runner.)

For the purpose of this tutorial I am assuming a project structure that looks like this...

-index.html
--assets
---styles
---scripts
----a.js
----b.js
--dist

My javascript files are very simple and contain just enough code to confirm everything is working properly when we run our task.

//a.js
console.log('Javascript A');

//b.js
console.log('Javascript B');

Dependencies

To achieve the desired results for our project scripts, you will need to install gulp-concat, gulp-rename, and gulp-uglify. To do so, the following command in Terminal.app.

npm install gulp-concat gulp-rename gulp-uglify --save-dev

Next, require these dependencies at the top of your gulpfile.js.

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

The 'scripts' Task

//script paths
var jsFiles = 'assets/scripts/**/*.js',
    jsDest = 'dist/scripts';

gulp.task('scripts', function() {
    return gulp.src(jsFiles)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest(jsDest));
});

Create a gulp task and pass in the name 'scripts' and then a function. In this function, use gulp.src to grab the location of your javascript source files.

Concatenate

Use .pipe to stream the source data to the concat() module, to which we pass the name of our newly concatenated file. Finally, stream the resulting files to the gulp.dest method, to which we pass the location where the new file will live.

Run the following command in Terminal.app to make sure everything is working properly.

gulp scripts

If all goes well, you should see output similar to what is below:

[gulp-demo] Using gulpfile ~/gulp-demo/gulpfile.js
[gulp-demo] Starting 'scripts'...
[gulp-demo] Finished 'scripts' after 19 ms

Now, check the dist folder in your project. In it, you should see a new scripts folder that contains a scripts.js file. Open it up. You'll see that it contains all lines of code from our source files. In my case it looks like this:

// Javascript A
console.log('Javascript A');
// Javascript B
console.log('Javascript B');

Great! Concatentaion worked! We used Gulp to create a single javascript for our project, allowing us to minimize the number of file request to improve the speed and performance of our app.

Uglify

Now, let's take it a step further and reduce the size of this concatenated file. After all, its 87 bytes and thats way to large! Let's create a smaller 'scripts.min.js' file.

//script paths
var jsFiles = 'assets/scripts/**/*.js',
    jsDest = 'dist/scripts';

gulp.task('scripts', function() {
    return gulp.src(jsFiles)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest(jsDest))
        .pipe(rename('scripts.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(jsDest));
});

Let's pick up where we left of with concatenation. We can continue to stream our source data into the rename() plugin and pass it our minified file name. Then, we uglify that file, and finally drop it into the same location as our previous file.

Run gulp scripts in Terminal again. This time you should see that it creates another file in your dist/scripts directory.

The contents will look something like this:

console.log("Javascript A"),console.log("Javascript B");

You'll see it gets rid of all whitespace as well as comments. Our new scripts.min.js file is only 56 bytes. Thats a 36% reduction in file size! Great job!

If you include this file in your 'index.html' file and you will experience much better performance from your app! Give yourself a hand!