Skip to content

Gulp 4: How To Combine CSS Files Using Gulp Concat

Introduction

In most cases, a website or a JavaScript application contains several CSS files. And the browser must fetch those files from the server to completely load the page. Additionally, all CSS files are render-blocking, which means that the more CSS files a page depends on, the more time it takes to render the page.

In this article, I’m going to show you how to combine all CSS 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, I’m going to install gulp-concat. 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 CSS Files

I’m then going to import the gulp-concat module at the top of our gulpfile.js.

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 cssBundle, which of course, you can call this task anything you want.

Select the Source CSS Files

The first thing that I’m going to do in this task is to use the Gulp source method to select our source CSS 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/css/**/*.css” to select all the CSS files within the “src/css” folder and any of its sub-folders.

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

const cssBundle = () =>
  src([
    'src/css/bootstrap.css',
    'src/css/fontawesome.css',
    'src/css/brands.css',
    'src/css/solid.css',
    'src/css/carousel.css',
  ])

Concatenate the Selected Files

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

const cssBundle = () =>
  src([
    'src/css/bootstrap.css',
    'src/css/fontawesome.css',
    'src/css/brands.css',
    'src/css/solid.css',
    'src/css/carousel.css',
  ])
    .pipe(concat('styles.css'))

Write the Concatenated CSS 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/css” directory.

const cssBundle = () =>
  src([
    'src/css/bootstrap.css',
    'src/css/fontawesome.css',
    'src/css/brands.css',
    'src/css/solid.css',
    'src/css/carousel.css',
  ])
    .pipe(concat('styles.css'))
    .pipe(dest('dist/css'));

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

exports.cssBundle = cssBundle;

Run the Concatenation Task

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

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

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

GitHub Repo

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

Tags: