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.
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.
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
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