Minifying Javascript on Visual Studio 2010 on release mode

Question

I have a ASP.NET MVC 2 project on Visual Studio 2010. I want to be able to use my plain javascript files in debug mode so I can understand what's going on when debugging, but I want to used a minified/compressed version when using release mode.

I was planning to create some extenders to include the js files in each page, something like:

<%: Html.IncludeJS("/Content/foo.js") %>

In that extender method I would determine whether I am on debug or release mode and pick the appropiate JS file. The disadvantage here is that I would end up manually compressing/minifying the JS every time I change something.

Is there an automated way to compress/minify and include the JS file when compiling in release mode?

Answer 1

You might want to take a look at the Yahoo YUI compressor.

Answer 2

The best option is to compress files by running a post build task from visual studio: Compressing JS files as part of your build process

Answer 3

You could use a post-build event and the Microsoft AJAX minifier or the YUI Compressor.

Answer 4

I manage a PHP development shop but we do this very same thing. In our development environments, our code is not obfuscated or minified. To push our changes to our live site, I coded a perl script that updates our version control and then invokes the YUI Compressor to minify the JavaScript and CSS before placing it in our live static directories.

As an aside, you may also want to look into merging your CSS and JavaScript on publish as well for added performance. After we minify our static content, we concatenate it into similar files based on purpose. For example, we have about 20 JavaScript files that end up in a file called 'global.js' on our production server. Our code is written such that development environments include all JavaScript files in our js/global/ folder separately, but on production it includes everything in js/global/ as 'js/global.js'. Then, we just iterate through the minified files during publish and concatenate their contents into js/global.js.

The benefit to the merge approach is fewer JavaScript and CSS files for the users to download which means faster page loads. This approach also allows you to split your JavaScript into separate files in your development environment by purpose for easier maintenance.