Complete solution for minimizing and choosing the debug/release versions for js files

Hi all, As I mentioned in earlier posts I Wrote,One of the greatest thing in Microsoft Ajax is it's ability to download a very small js files it needs. The files are very small since Microsoft used a nice way to minimized the files for the release versions. What they did is very simple, In the System.Web.Extentions DLL you can see in the resources (Using .NET reflector) that there are 2 js versions for each file : The debug version and the release version. During runtime they will download the file you need according to your compilation settings : If it's debug , then the full documented and well formed version will be used , otherwise the shrinked version.

So I have decided to do it in my web projects as well. So how do you do it:

Step 1:

Write your original js files , for simplicity , let's say we have one file called: JScriptdebug.js which contains a very small function:

///<summary>
///This function will show a message box with some text
///</summary> 
 function ShowMessage() {
    alert("Some message from the debug version");
}

Step 2:

We now wish to shrink this file by removing it's comments and by deleted line breaks etc. We can do it by using the JSMIN utility available here. Once we downloaded the file we can run it in the cmd window: "jsmin <JScriptdebug.js> JScript.js " and we see that a new file by the name JScript.js is created and it's source is :

function ShowMessage(){alert("Some message from the debug version");}

Nice right? Now imaging this file had many lined of code....

Step 3:

Now we need a way to make sure that once we are in debug mode the debug js version files will be used so we can debug easily and read the file easily. On the other hand , once we are deploying our web application/web site we use the smaller version. So in order to do so, here is a nice trick to archive this.

Whenever I want to register these file and include them in some aspx header I will use ClientScript in the code behind to register this include. (Of chores a more practical way is to do it in the master page or some base page):

Page.ClientScript.RegisterClientScriptResource(typeof(_Default), "DebugRelease.JavaScript.JScript.js");

But we need something elsem since we want it to be dependent in the compilation setting, so here is the solution (Thank you Shlomo for the help there):

#if DEBUG
Page.ClientScript.RegisterClientScriptResource(typeof(_Default), "DebugRelease.JavaScript.JScriptdebug.js");
#else
Page.ClientScript.RegisterClientScriptResource(typeof(_Default), "DebugRelease.JavaScript.JScript.js");
#endif                       

When the #if and the #else are used it will compile the code between the directives only if the specified symbol is defined.(These are preprocessor directives).

Now all you have to do if you want a complete solution is to create a post build event (in your web application) and make sure the jsmin runs every time you complie.

Enjoy.