Uglifying JavaScript Files With Gulp 4 – Tutorial

Gulp is a JavaScript (JS) library to automate slow, time consuming repetitive workflows such as minifying or uglifying JS and CSS files, copying files to distribution directory and so on. In this article I will discuss about uglifying or minifying JS files using Gulp 4.

1. Installing Gulp:

Before we install Gulp, we will have to install nodejs if it is not already installed. You can download and install it from nodejs official website-

https://nodejs.org/en/

Once installed, run the following command in a terminal. It will output the installed nodejs and npm versions. npm is Nodejs Package Manager.

node -v
npm -v

Now let’s install Gulp. To install Gulp, run the following command in the terminal –

npm install -g gulp

This will install Gulp globally and we can use Gulp in all projects.

2. Writing Gulp Task:

Create a file gulpfile.js in your project root directory. We will write all gulp task automation code in this file. Let’s install few more packages gulp-uglify and gulp-rename which would be used in the uglifying process. Navigate to project to directory, open a terminal and run the following commands. This time we are installing the packages locally in our project.

npm install gulp-uglify
npm install gulp-rename

Open gulpfile.js and add the following code.

// Gulp version 4
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
const { series } = require("gulp");

/* 
Define gulp task.
This task will uglify all js files in js directory 
and create uglified or minified files with min.js extension inside the 
dist/js directory.
*/
 
gulp.task( "uglify", gulp.series(async function () {
         gulp
	.src("js/*.js")
	.pipe(uglify())
	.pipe(
	   rename(function (path) {
	     path.extname = ".min.js";
	   })
	)
	.pipe(gulp.dest("./dist/js/"));
  })
);

// Code to run gulp tasks
gulp.task(
	"default",
	gulp.series("uglify")
);

3. Running Gulp Task:

Now let’s test our code. Type following command in the terminal (I am assuming that your terminal is pointing to project root directory).

gulp uglify

This command executes all gulp tasks defined in the gulpfile.js file. Check the dist folder which was just created by gulp. You will find all uglified js files with .min.js extension.

Important Update:

If one or more js files (to be uglified) contain JavaScript ES6 code, then uglify() method will fail and may throw following Unhandled ‘error’ event exception.

events.js:174
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript

You can fix this issue by replacing the gulp-uglify package with gulp-uglify-es. Install this package and replace require("gulp-uglify") with require('gulp-uglify-es').default in the gulp code.

npm install gulp-uglify-es

In the gulpfile.js file, do following changes:

// var uglify = require("gulp-uglify");
var uglify = require('gulp-uglify-es').default;

That’s all. This should fix the issue.