How to minify JavaScript and CSS files using gulp

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. This could include a lot of tasks, but this post will focus on a basic use case for minifying JavaScript and CSS files. I couldn't seem to find such a basic tutorial on the web that was explained in easy terms.

Install the command line utility for gulp #

First, you need to open a new terminal window and install the command line utility for gulp. If you don't have Node.js and npm installed, you'll need to get those first; you can learn how to do that in the get npm guide. Once you've done that, you can install the command-line utility.

First, a quick note as explained in the Quick Start guide for gulp:

If you've previously installed gulp globally, run npm rm --global gulp before following these instructions. For more information, read this Sip.

Do this if applicable.

Then run the following command in your terminal window to install the command line utility. This will make the package available globally, not just for your current project:

npm install --global gulp-cli

Next, you'll need to create a package.json file if you haven't already.

Create a package.json file #

If you already have a package.json file configured, you can skip this step.

Let's pretend you're working on a project saved in a folder called my-project. Navigate to that folder in your terminal window.

For example:

cd my-project

Once there, you need to create a package.json file. This is a file that sits in the root of your project (the top-level folder, i.e. my-project in this case) and keeps track of information about your project, such as its name, version, author, code dependencies, etc.

You have two options here. You can either run the following command, which will guide you through naming the fields:

npm init

Or you can run this command, which will skip all the questions and just use the default values that npm provides:

npm init -y

Either way, you'll be left with a shiny new file called package.json. Hooray!

Install the required packages #

Now you need to tell npm to install a few packages for you. These are the packages you'll need in order to minify JavaScript and CSS files:

To install the packages all together, run the following command:

npm install --save-dev gulp gulp-rename gulp-terser gulp-clean-css

This will install the packages as dev dependencies. This means they're dependencies for your development environment, but not for the end application that the user sees.

Once you've done this, your package.json file will be updated and a package-lock.json file will also be created. Now you can actually go ahead and minify your files. Time to create a file called gulpfile.js!

Create your gulpfile #

To use gulp, you need to create a file called gulpfile.js and save it at the root of your project. Do that first. Then paste the following into that file:

// Require the npm modules we need
var gulp = require("gulp"),
rename = require("gulp-rename"),
cleanCSS = require("gulp-clean-css"),
terser = require("gulp-terser");

// Looks for a file called styles.css inside the css directory
// Copies and renames the file to styles.min.css
// Minifies the CSS
// Saves the new file inside the css directory
function minifyCSS() {
return gulp.src("./css/styles.css")
.pipe(rename("styles.min.css"))
.pipe(cleanCSS())
.pipe(gulp.dest("./css"));
}

// Looks for a file called app.js inside the js directory
// Copies and renames the file to app.min.js
// Minifies the JS
// Saves the new file inside the js directory
function minifyJS() {
return gulp.src("./js/app.js")
.pipe(rename("app.min.js"))
.pipe(terser())
.pipe(gulp.dest("./js"));
}

// Makes both these functions available as a single default task
// The two functions will execute asynchronously (gulp.series() would be synchronous)
// The task will run when you use the gulp command in the terminal
exports.default = gulp.parallel(minifyCSS, minifyJS);

Run the task #

Run the following command in your console:

gulp

Your default task will run, and you should see some output like this:

Kierans-MacBook-Air:avoid-the-sock kieranbarker$ gulp
[14:45:27] Using gulpfile ~/GitHub/avoid-the-sock/gulpfile.js
[14:45:27] Starting 'default'...
[14:45:27] Starting 'minifyCSS'...
[14:45:27] Starting 'minifyJS'...
[14:45:27] Finished 'minifyCSS' after 95 ms
[14:45:27] Finished 'minifyJS' after 95 ms
[14:45:27] Finished 'default' after 97 ms
Kierans-MacBook-Air:avoid-the-sock kieranbarker$

And with that, you should see a new file called styles.min.css in your css directory, and a new file called app.min.js in your js directory. You can, of course, change the file and directory names to suit your project.

Add the new files to your project #

Now all that's left to do is add the new, minified files to your project! Just replace any references to styles.css and app.js with styles.min.css and app.min.js, respectively.

Closing thoughts #

Concatenation #

It is possible to have gulp look for multiple files inside a directory and mash them together into a single minified file, but for the sake of simplicity, I wanted to keep this article to a basic use case. I'll write about this in a future article.

Automation #

Re-running the gulp command in the terminal after every change to your files will become very tiresome very quickly. To get around this, you can use gulp's .watch() method.

You can even take this a step further by installing the browser-sync npm package. This package can automatically reload your site when you save your changes, meaning you wouldn't need to refresh the page after every change.

I'll write about gulp's .watch() method and the browser-sync package in my next article.