I’ve been doing a fair amount of client-side development over at my day job and, ever mindful of every byte, have been tinkering with various mechanisms to slim down my source code. The winner, hands down, appears to be Julien Lecomte’s very excellent YUI Compressor, which takes a Javascript or CSS file and removes any extraneous whitespace and comments, as well as “minifies” by replacing long function names and variables with one, two or three character substitutions. For large files, the savings are pretty significant, usually somewhere between 30 and 50 percent. In particular, what I like about the YUI Compressor is that it balances file size with compiled complexity, such that it doesn’t force the browser to unpack and evaluate the code in a resource intensive way (jQuery lead developer John Resig has more developed and intelligent thoughts on loading javascript that are certainly worth a read).

Because I like to write code with lots of comments and big, descriptive function names, using something like a compressor is particularly well suited to how I work. It essentially compiles Javascript and CSS files and doesn’t penalize you for good coding habits. The only problem is that this adds an extra step that doesn’t exactly fit into my workflow. So, I figured the compressor could be automated a little bit.

I spent a little time, and a lot of Googling, this afternoon writing a shell script wrapper for the compressor that takes a folder as input then finds all of the .js and .css files contained within it (including subfolders) and creates minified copies, as .min.js and .min.css files; previously minified versions are ignored and overwritten. I then wrapped the shell script in an Automator workflow so that it’s simply a matter of dragging and dropping a folder onto the minify.app droplet to minify all contained Javascript and CSS files. It’s free for you to download.

A few things to note: you’ll need to download the YUI compressor from Yahoo and have the .jar file installed somewhere on your machine - I copied yuicompressor-2.3.5.jar to /usr/local/bin but you can put it wherever you want. The compressor is a Java application and, as such, requires at least Java 1.4 is installed on your machine (works fine on OS X 10.5.2). You’ll need to make sure that the yuicompressor file is executable, the easiest way to do that is ‘chmod a+x yuicompressor-2.3.5.jar’ in Terminal. If you keep your yuicompressor file somewhere other than /usr/local/bin then you’ll need to update the minify.workflow document and then Save-As an Application, probably someplace easy to get to, like your desktop.

If you’re more of a command line type, you should be able to simply copy and paste the code in the minify.workflow doc into a text file and execute from the command line with something like

bash minify.bash some_directory

which will minify all .js and .css files in some_directory and subdirectories. If you’re a Windows user and have a solution, I’d love to hear it.

Now, keeping your client side code tidy is a matter of dragging and dropping.