What do you do to your JavaScript code before deployment?

Question

Do you have a step in your deployment process that minifies JS? Do you have any sort of preprocessor for your JavaScript that allows you to leave in comments and console.logs and then have them automatically stripped out? Is your JavaScript machine generated by GWT or Script#? Do you use ANT or another tool to automate deployment?

I see a lot of JavaScript that looks like it comes right out of the editor, complete with lots of white space and comments. How much of that is due to not caring about the state of the deployed code, and how much is due to the spirit of the open web?

Answer 1

One word- packer

Answer 2

Check out YUI Compressor its a console app that you can use to minify (strip out comments, whitespace etc..) and also obfuscate your javascript files.

Answer 3

I usually check it out with JSLint to make sure it is bug-free, then pack it/encode it with YUI compressor.

Answer 4

For one of our products, we concatenate all Javascript files together (most files are used on most pages, so this makes sense for us) and use Javascript::Minifier. This has given us a pretty nice speed boost.

Answer 5

A lot of it is probably due to not caring about people that might be viewing your pages on slower machines with slower connections and assuming that everyone has a 50Mbps line and three Gigs of RAM.

We are minifying our (hand-written + plugins, jQuery, etc.) JS as a part of the build process in .NET environment. No preprocessor, this is something we should definitely be doing once time permits.

P.S. By the way, we're not using console.log, as this will break IE. Instead we have a simple wrapper function, something like:

function log(stuff) {
    if (window.console && window.console.log) {
        console.log(stuff);
    }
};

Answer 6

JSMin it from Douglas Crockford. We've got it hooked up as a macro in Studio as well as a post build item for some of our larger projects

Answer 7

Light a candle, whisper a prayer against IE6 errors, and click "go". Does that count? :)

Answer 8

1. I don't minify my own javascript code since text tends to gzip/compress well.
2. I would minify a very large (say > 100 kb) javascript library (but then again I probably would not want to be using such a large library (or just ship what i use)).

I tend to believe that a lot of the javascript-minification is (in reality) done to achieve some sort of (futile) obfuscation of javascript code instead of the proclaimed end-user performance gain.

Answer 9

My steps include:

1. I write Javascript using TextMate with the Javascript Tools bundle installed. This JSLint's my files on every save and notifies me when errors occur.
2. I use Sprockets to automatically concatenate my various Javascript files.
3. I run the resulting concatenation through jsmin to generate a minified version.

I end up with a concatenated lib.js file and a minified lib.min.js file. One I use for development, one for production. TextMate commands help automate it all.

I'm still looking for a good solution to actually (unit) test my scripts.

Answer 10

I have a PHP script that does it on the server side and keeps a cache of whatever it pulls from the source folder(s).

Answer 11

There's also a .NET port of YUI Compressor which allows you to:-

• intergrate the minification/file combining into Visual Studio post-build events
• intergrate into a TFS Build (including CI)
• if you wish to just use the dll's in your own code (eg. on the fly minification).

Answer 12

I thought I would share my approach to js deployments. Have a look at this blog post: http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

This also includes code to compile (using google's closure compiler) at runtime (when needed).

Thanks Guido