Introduction to the uglify-js Node.js module

Compressing one or more JavaScript files is a common front-end tooling task. Developers often consider this to be part of the front-end build process. Tools such as Grunt and Gulp are often used. This is fine. But is also possible to compress JavaScript files using Node. In this article, I will introduce the uglify-js Node module. This module allows you to compress one or more JavaScript files, and then write the output to a new file.

To get started, clone the following git hub repository:

https://github.com/kevinchisholm/introduction-to-the-uglify-js-node-js-module

(Instructions on how to run the code are available in the Git hub page.)

package.json

{
  "dependencies": {
    "uglify-js": "2.7.3"
  }
}

The package.json for this project is simple: we specify a dependency on the uglify-js module.

Example # 1 A: file-1.js

var days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];

Example # 1 B: file-2.js

var months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];

Example # 1 C: file-3.js

var years = [
    '1965',
    '1966',
    '1967',
    //edited for brevity
];

In example # 1, we have the three target files. Each file is simple. file-1.js has an array that contains the days of the week. file-2.js has an array that contains the months of the year. file-3.js has an array that contains a series of years. The file-3.js code example is edited for brevity. If you look at has same file in the github repo, you will see that the list of years goes up to 2016.

Uglify a single file

Example # 2:

//get a reference to the file system module
var fs = require('fs');
 
//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');
 
//get a reference to the minified version of file-1.js
var result = UglifyJS.minify(["file-1.js"]);
 
//view the output
console.log(result.code);
 
fs.writeFile("output.min.js", result.code, function(err) {
    if(err) {
        console.log(err);
    } else {
        console.log("File was successfully saved.");
    }
});

In example # 2, we uglify a single file. To start, we set a reference to the fs module, which provides access to the file system. We also set a reference to the uglify-js module.

Notice the result variable. That contains the uglified version of file-1.js. We output that in the console, just as a quick proof of concept.

Next, we use the fs module to write a file to the file system. The file output.min.js is either created (if it does not exist already), or overwritten. The contents of output.min.js is the uglified version of file-1.js.

Run example # 2 in your terminal with the following command: node uglify.js.

The result of this is:

  1. You will see the uglified code in your console.
  2. You will see the file output.min.js, which is the uglified version of file-1.js.

Uglify more than one file

Example # 3:

//get a reference to the file system module
var fs = require('fs');
 
//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');
 
//get a reference to the minified version of file-1.js, file-2.js and file-3.js
var result = UglifyJS.minify(["file-1.js", "file-2.js", "file-3.js"]);
 
//view the output
console.log(result.code);
 
fs.writeFile("output.min.js", result.code, function(err) {
    if(err) {
        console.log(err);
    } else {
        console.log("File was successfully saved.");
    }
});

In example # 3, we uglify three files. The difference between example # 2 and example # 3, is that we pass three files to the UglifyJS.minify method. That is, i.e. there are three files in the array passed as an argument.

Run example # 3 in your terminal with the following command: node uglify-all.js.

The result of this is:

  1. You will see the uglified code in your console.
  2. You will see the file output.min.js, which is the uglified version of file-1.js, file-2.js and file-3.js.

Summary

In this article, we learned the basics of the uglify-js Node module. We learned how to uglify a single file, as well as more than on file. We also learned how to show the uglified code in the console. While there is more than one way to compress a JavaScript file, it is helpful to know that you can do it using Node.

Author

Kevin Chisholm

http://blog.kevinchisholm.com

Share This