First Gulp task – concatenation

I recently started using a new development process, using Gulp to automate development tasks. I thought I’d start off easy, so I’d concatenate my existing javascript files into a single file.

You might ask, why would you want to do this? And my answer would be, you want to reduce the number of items fetched when loading your page, for optimal performance.

You might ask, why don’t you do this manually once and then always work on the concatenated file? And my answer would be, some of the files are plugins or libraries, which I want to keep separate so that I can easily update them. I only want them to be combined in the build version.

So, questions out of the way, here’s how it went down.

Firstly, you need to make sure you include the relevant bits at the top of your Gulp file. I included 3 to start with…

var gulp = require("gulp");
var util = require("gulp-util");
var concat = require("gulp-concat");

Gulp and gulp-util are essentially your basics, needed in every Gulp file. I then found gulp-concat on NPM (Node Package Manager, regardless of what the top left corner of the site says!) and it looked like it would do the trick, so I included that too.

This is one of the big advantages to Gulp. Because it runs in Node, you can use NPM to find and install packages, which allows you to maximise the code not written, but using some that someone else has written for you!

So now I create a simple Gulp task…

gulp.task("js",function(cb) {
  gulp.src(jsFiles)
    .pipe(concat("script.js"))
    .pipe(gulp.dest("build/js"));
});

I’d recommend reading up more on Gulp, but essentially this is taking an array of filenames stored in “jsFiles” and using it as the source, piping this through to the gulp-concat plugin which takes a parameter to name the resultant output file, and then setting the destination to be my build directory. When I run this, it sucks in all the files, concatenates them, and then spits out a single file to my build directory.

I then modified the HTML so that instead of linking to lots of different javascript files in the <head> tag, I now reference just one javascript file, and I also do it at the end of the <body>. I’ve also added a “defer” attribute, because it really doesn’t need to be loaded upfront – this reduces the time till the First Meaningful Paint.