Updating javascript references after minifying during build process

Question

What are the best ways of updating javascript references after minifying them (I use YUI Compressor)?

I am using ASP.NET mvc and have a bunch or javascript references in each file during dev. At build time (using MSBuild) I minify all the files into single file. At the same time I want to replace all the references with the single reference. This shoudl be quite a common thing and yet I can't find a nice clean automated way to do it.

Anyone have any ideas? Thanks

Answer 1

A couple of ideas spring to mind:

1) Take advantage of the hotfix released to allow debug/intellisense versions of .js files: KB958502

This will allow you to write (albeit one) large, fully readable js file, but refer to the full version in your script src, that can be generated during the build. The hofix enables VS to find files named "-vsdoc.js" or ".debug.js" in place of the referenced files (so you reference "/scripts/myscript.js" in your src attribute, but the IDE will first look for "/scripts/myscript-vsdoc.js", then "/scripts/myscript.debug.js", and finally it will look for "/scripts/myscript.js" - a bit more info can be found on the Visual Web Developer team blog.

2) Others have posted on an custom script managers they wrote, that would reference the main version during debug, but in release mode would request the minimized version.

3) I'm sure I read somewhere, although I can't find it at the moment, about someone who had written their own HTML helper extension method, that would generate the script call appropriately depending on the buid mode - similar process to Rick's idea, but allowing you to work in a more "usual" way, although I'm not sure how well it played out with intellisense.

I'm leaning towards 1 at the moment - using a process similar to Nick Berardi's here: How to create a YUI Compressor MSBuild Task to generate the minimised js.

Answer 2

We use a custom script manager. In our msbuild process, YUI Compressor is used to create minified versions, but also to combine several smaller .js files into one larger. This reduces the number of requests and thus load time. The minified and combined versions are created side-by-side with the debuggable versions.

During runtime, the scriptmanager is called by controls to register specific scripts, which are referred to by their unminimized name. The script manager will then just include these scripts in DEBUG mode (although we perform a trick that includes scripts in the HEAD, not the body as the ClientScriptManager does). In RELEASE mode, the scriptmanager will replace certain scripts known to it by their minified counterparts. In the case of scripts that are combined into one file, the manager is called multiple times, each time registering the same combined, minified file. Some files are hosted externally: this is handled by the scriptmanager too.

Downsides:

• the knowledge of what files are minified is duplicated: both the scriptmanager and the build script must be in sync.
• When new scripts are added, they will not automatically be minified (I personally see this as a good point; I want minification to be a choice)

By the way: we don't use the C# port for running in MSBuild. It had too many bugs when I first tried it. We just call YUI Compressor with an Exec task.