Skip to content

Gulp 4: How To Combine JavaScript Files Using Gulp Concat

Introduction

In most cases, a website or a JavaScript application contains several JavaScript files. And the browser must fetch those files from the server to completely load the page. Downloading more files takes more time as the browser has to send more HTTP requests.

In this article, I’m going to show you how to combine all JavaScript files into a single file using Gulp 4 and the Gulp Concat plugin. I assume you have installed Gulp 4. If you don’t, check this article on Gulp 4 installation.

Install Gulp Concat Plugin

First, we will need to install gulp-concat, which we have installed in the previous article. If you don’t, open the Terminal and navigate to your project root directory. Then run npm install --save-dev gulp-concat to install it as a development dependency.

Create a Gulp Task to Concatenate JavaScript Files

I’m then going to import the gulp-concat module at the top of our gulpfile.js, which we already did.

const { src, dest } = require('gulp');
const concat = require('gulp-concat');

Then we will need to create a new Gulp task, and we will call this task jsBundle, which of course, you can call this task anything you want.

Select the Source JavaScript Files

The first thing that I’m going to do in this task is to use the Gulp source method to select our source JavaScript files. Gulp source can take a list of filenames, a single filename, a glob pattern, or a list of glob patterns.

Suppose the order of concatenation doesn’t matter. In that case, you can use a glob pattern like “src/js/**/*.js” to select all the JavaScript files within the “src/js” folder and any of its sub-folders.

Since we have several JavaScript files, and they depend on each other. We will use an array, and I will list those JavaScript files in the order in which we want to concatenate them.

const jsBundle = () =>
  src([
    'src/js/jquery.slim.js',
    'src/js/popper.js',
    'src/js/bootstrap.js',
  ])

Concatenate the Selected Files

We can then use a pipe to call our concat function, which will concatenate all of our source JavaScript files. It needs an argument that provides the name of the new single continuous file that it will create. We can use scripts.js.

const jsBundle = () =>
  src([
    'src/js/jquery.slim.js',
    'src/js/popper.js',
    'src/js/bootstrap.js',
  ])
    .pipe(concat('scripts.js'))

Write the Concatenated JavaScript File into Disk

We will then use the final pipe with the Gulp destination function to tell this task where we want to write our new concatenated file. And we want to write it in the “dist/js” directory.

const jsBundle = () =>
  src([
    'src/js/jquery.slim.js',
    'src/js/popper.js',
    'src/js/bootstrap.js',
  ])
    .pipe(concat('scripts.js'))
    .pipe(dest('dist/js'));

Then we will need to export this function to make this task available as a public Gulp task.

exports.jsBundle = jsBundle;

Run the Concatenation Task

To execute this task, save the gulpfile.js, pull up the Terminal, and run gulp jsBundle.

Let’s take a look at our “dist/js” directory, where there should be a new “scripts.js” file that contains all of our source JavaScript files.

We will then need to open the “index.html” file and get rid of all JavaScript file references in favour of a single file located at the “js/scripts.js”.

You can put the script tag at the end of the body tag for further optimisation. And the browser will load it after it loads all other HTML elements.

GitHub Repo

Here is the GitHub repository link where you can find the complete source code of this article, clone the project and run it on your machine.

Tags: