Bundling Your JavaScript Files with Gulp

[00:01] Today, I'm going to go over bundling your JavaScript files with gulp. What I mean by bundling is taking multiple JavaScript files, concatenating them down into one file, then minifying or uglifying that one file to make it as small as possible.

[00:15] The benefits to this are, rather than loading, let's say, 20 different resources on page load, you can load one resource that is a lot smaller than those 20 combined. The first thing that we need to do is install gulp in our project.

[00:28] To do that, we're just going to go ahead and type npm install gulp. Now that that's been installed, we need to go into our gulp file.js and include gulp. To do that, we'll type var gulp = require('gulp').

[00:41] Next thing we need to do is create our first task. We'll call this task default, which is what gulp looks for when you run the vanilla gulp command in your terminal. For this task, we're going to return a console log that says that the task was ran.

[00:54] We can go ahead and test this now by moving into our terminal and typing gulp. We'll see the default task was started, our console log was spit out, and then default task was finished. Now moving on to the bundle portion of our project, we're going to first install gulp concat.

[01:10] We'll type npm install gulp-concat. What this will allow us to do is specify multiple files that we want concatenated into one file, and the destination where we want that file to go. First, we'll include concat by requiring gulp-concat.

[01:25] Let's go ahead and create a new task this time called scripts. This is where we'll do all of our bundling work. First, we're going to specify the source of our files. We'll do that with gulp source. I'll go ahead and type in a globbing pattern, that we'll go over in a second, of all files ending in .js.

[01:41] We'll pipe the results of that into our concat method, which we will then pipe into our gulp.destination. Which will tell us where we want this file to end up. We need to specify what we want that concatenated file to be called, so we'll go ahead and call it bundle.js.

[01:57] Let's change our default tasks now. Instead of running the function itself to just run a set of other tasks, for now, just the scripts task. Back to our globbing pattern. What this is going to do for us is look in the .js folder and find any file ending with .js. And grab that to pipe into our next command.

[02:14] I have two placeholder files here of bar.js and foo.js. Next, we're going to concatenate those files and call that file bundle.js, and then we're specifying a destination of a dist folder which will be created.

[02:27] When we run the gulp command, that default task is going to run the scripts task. Which will go ahead and concatenate those files, creating a new folder called dist, and putting our bundle file inside that folder.

[02:38] If we open it here, we'll see that both that foo and bar function are now included in one file. The next step is to set up the uglification or minification of that file. To do that, we'll run npm install gulp uglify.

[02:50] Once that's been installed, we need to include it in our application. So we'll do var uglify = require('gulp-uglify'). It's really easy to include this in our task that already exists. We're just going to pipe the results of the concat operation into the uglify operation.

[03:06] We don't need to change the source at all and we don't need to change the destination. Now, if we run gulp again, that default task will run the scripts task. If we open up our bundle.js for a second time, we'll see our uglifyed file.

[03:17] So not only are the two files concatenated, but now, a whitespace has been removed, and it's been fit onto one line. Now we have one small fast file to load rather than two larger files. This is the basics of bundling your JavaScript files with gulp.