Learn how to easily implement minification and file concatenation right in your Node.js program.
There is no doubt that tools such as grunt and gulp provide powerful front-end tooling, particularly for large-scale applications. But in some cases, you may want to “roll your own”. If you want to minify and / or concatenate files from your Node.js application, the uglify-js module offers a simple syntax yet plenty of muscle-power.
So, if you want to get serious, a quick package.json file and “npm install” command are all you need to get started. Once these two tasks are taken care of, you can minify one or more files, and concatenate the output to a new file. In this article, I will show you how to do just that in less than 20 lines of code.
Example # 1A
1 2 3 4 5 |
{ "dependencies": { "uglify-js": "2.4.16" } } |
Example # 1B
1 2 3 4 |
var featuredCity = { name: "london", country: "england" }; |
Example # 1C
1 2 3 |
function getFeaturedCity(){ return featuredCity.name; }; |
Example # 1D
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; |
In Example # 1A we have the contents of the file: package.json. This tells npm that our program depends on the “uglify-js” module. Examples # 1B, 1C and 1D are the contents of the files we will “uglify”. The actual code has no significance. We just want to have a reference so that once we have uglified the files, we can see the difference in the output.
Example # 2A
1 2 3 4 5 6 7 8 |
//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); |
Example # 2B
1 |
featuredCity={name:"london",country:"england"}; |
In Example # 2A, we minify the file: file-1.js. In this case, the minified code is simply shown in the console. Example # 2B shows the minified code. It’s hard to imagine a case where we would want to minify code, but only show the result in a terminal window. Realistically, we need to write the output of the minified file to a new file.
How to Demo:
- Clone this github repo: https://github.com/kevinchisholm/video-code-examples
- Navigate to: JavaScript/node-js/uglify-js
- Execute the following command in a terminal prompt: npm install
- Execute the following command in a terminal prompt: node uglify-1.js
Example # 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//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 # 3, we have the content of uglify-2.js. Here, we’ve moved things into a more real-world context; we save the result of the minification to a physical file. Now notice that after you execute node uglify-2.js in your terminal, there is a new file named: output.min.js, which is a minified version of file-1.js.
The first change we made was to add a reference to the “fs” module, which provides access to the file system in Node.js. The console.log statement was left in, just so you can still see the output in the console. Below that, we call the writeFile method of the fs object. We pass it three arguments:
- the name of the file that will contain the result of the minification process (i.e. the minified code)
- the content for that file (i.e. the minified code), and
- a callback. The callback takes one argument: an error object. In the callback, we check to see if there was an error, and if not, we send a success message to the console.
In this Example, the callback is optional as it has nothing to do with the minification process and only provides messaging as to the status of the minification attempt.
Although Example # 3 is more of a real-world context than Example # 2, it is still a bit unrealistic as we only minify one file. In a typical production workflow, one would likely want to minify and concatenate more than one file.
How to Demo:
- Clone this github repo: https://github.com/kevinchisholm/video-code-examples
- Navigate to: JavaScript/node-js/uglify-js
- Execute the following command in a terminal prompt: npm install
- Execute the following command in a terminal prompt: node uglify-2.js
Example # 4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//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."); } }); |
Example # 4 shows the contents of uglify-3.js. The only change we have made is in the call to UglifyJS.minify. Instead of passing it a string, we pass an array. Each element in the array is a path to a file we want to minimize and the concatenate to the output file. In this case all of the files are in the same folder as our program, so there is no folder structure (i.e. just the file names). You can take the same exact steps to demo this example, and when you do, you will see that the file output.min.js contains the minified code of file-1.js, file-2.js and file-3.js.
Summary
The uglify-js offers a ton of options, parameters and features. For this article, I wanted to demonstrate how easy it is to set up and use this Node,js module. But if you want to understand the true power of uglify-js, there is a ton of documentation available online. Hopefully this article got you to first base!
Helpful Links for the uglify-js Node.js module
https://www.npmjs.com/package/uglify-js