If you’re a web developer, chances are you’ve come across an app called CodeKit. CodeKit is an app that takes care of a lot of stuff such as compiling Sass files, compressing CSS and Javascript and so much more other cool stuff without touching the command-line.
I’ve used the demo of the first version a long time ago. It was pretty sweet. But since then, I’ve become a lot more comfortable doing things in the command-line. The other devs that I currently work with use CodeKit and have used it to create minified or compressed version of our CSS and JS assets.
In order to make sure I’m not disrupting the workflow and assets generated by the other devs, I had to figure out how to create the same output that CodeKit was producing. In particular, when CodeKit minifies Javascript files.
The easy solution would’ve been to just purchase a copy of CodeKit — which if you’ve got the money and don’t care for the command-line I would recommend since it’s supporting an indie developer — but I don’t like to pay for things if there’s a way to do it for free and I get to learn something in the process.
So first, I needed to figure out how to go about minifying Javascript files. I checked out CodeKit’s help docs to see if there was any hints as to how it performs this task. Luckily there was a list of tools that CodeKit uses. Briefly looking over the list I came across UglifyJS. Doing a quick Google search on UglifyJS, it looked like I was on the right path.
UglifyJS, specifically UglifyJS 2 is a Node.js command-line tool. To use UglifyJS 2 to minify your Javascript, you’ll first have to make sure you have the latest version of Node.js. You can grab the latest version by going to the Node.js website.
Installing Node.js on your system, will also include npm which is Node’s package manager. Once Node.js is on your system you’ll want to install UglifyJS 2 by typing this into your command-line:
npm install uglify-js -g
If your system comes back with some errors and doesn’t install the tool, try running the command with sudo.
Once UglifyJS 2 is installed, you can compress a file using this syntax:
uglifyjs filename.js -c -o filename.min.js
What this line does is, first it calls the uglifyjs command-line tool. Then the it passes in the input file name. We then want to compress the file so we pass the -c option. Next it designates what the output file should be by first passing in the -o option and then the name of the output file.
The command above got me pretty close to what CodeKit produced in a minified JS file but there was still one difference between my file and CodeKit’s file. The difference was the variable names. In CodeKit it replaced variables with single characters. Reading through UglifyJS’ document, it turns out it could do that as well.
To replace variables with UglifyJS you simply pass in an extra option, -m which stands for mangle. In passing in that option it’ll replace the variables with single characters just like CodeKit. So the final command to get us to a result like what CodeKit produces, you’ll want to use this:
uglifyjs filename.js -c -m -o filename.min.js