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 encompasses many things, but let's 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 simple 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 i gulp-cli -g

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:

• gulp
• gulp-rename
• gulp-clean-css
• gulp-terser

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

npm i gulp gulp-rename gulp-terser gulp-clean-css -D

This will install the packages as dev dependencies. This means they're dependencies for your development environment, but not the production environment your users see.

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 functions available as a single default task
// The two functions will execute asynchronously (in parallel)
// 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 similar to this:

[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

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 a future article.