How to minify JavaScript code with Gulp and Terser

JavaScript code minification is a common performance optimization task in web development. You can perform minification manually with any JavaScript compression tool and serve the output file. But that doesn’t work well when you update your source code frequently. The best way to solve the problem is using a workflow automation toolkit.

One of the most popular automation solutions is gulp.js. Gulp is an open-source JavaScript tool used to automate pipelines that solve various issues. Gulp has a modular architecture and has tons of plugins created by a large community.

gulp-terser plugin integrates the Terser JavaScript compressor with Gulp automated pipelines. This article provides step-by-step instructions for setting the gulp-terser plugin to minify JavaScript source code.

1. Installation

This guide assumes that you have Gulp v4 installed. If not, follow the official Gulp documentation guide to set up the Gulp environment.

Let’s install the gulp-terser plugin to the project folder with npm:

or, if you prefer yarn package manager:

2. Create gulpfile.js and script.js

In the project root, create gulpfile.js and script.js files. The gulpfile.js file contains the Gulp pipelines description. The script.js file is a JavaScript source code file to compress.

3. Create gulp-terser pipeline

We’ll set up our JavaScript minification pipeline in three steps.

• A good start here is importing dependencies to your Gulp script. Add the following lines to gulpfile.js: var gulp = require('gulp'); var terser = require('gulp-terser');
• Declare a new function and call it scripts. This function will describe the JavaScript minification pipeline. function scripts() { return gulp.src('./script.js') .pipe(terser()) .pipe(gulp.dest('./dist')); }
• Bind scripts function to the default Gulp task by using CommonJS exports module notation: exports.default = scripts;

Save the file and open the project directory in a terminal window. Run the gulp command. You can see that minified version of script.js was added into the dist folder.

4. Automate pipeline to track changes

Right after the scripts function declaration define a new one called watch. This function will run the gulp.watch method that tracks changes in the files by the provided path and runs a second parameter method each time changes are detected.

Add watch method to Gulp tasks:

After that, you’ll be able to run the automated pipeline in the terminal window with the command gulp watch. Each time you put changes to the source code, you’ll get a minified version of it in the dist directory.

Conclusion

In this tutorial, we created a gulp-terser pipeline. In addition, we added an automated task to track changes in the source file and run a build script on each source update. Find a complete example of the gulpfile.js configuration file in the Minify-JS.com repository.

Published on Jan 26, 2022 by Oleh Pratsko