Last night I had the pleasure of presenting at the Orlando Dotnetnuke user group on this subject. This post is a follow up to that presentation.
I haven’t presented in a while and I have to admit I was a bit nervous, and to make matters worse the projector was not wanting to cooperate with me. Suddenly the room got really hot and I started sweating… I’m sure my sweating had nothing to do with the silence in the room while people waited for the technical problem to be resolved
It turned out that when I closed my machine at the office, it was connected to multiple monitors, so when I hibernated it remembered those settings and I could only get to projector to work as an extension of my desktop, like a second monitor.
Anyways… great learning opportunity, and I can’t wait to try it again. On to the technical stuff…
Goal:
I want the JavaScript file references in my pages to load the debug version of the JavaScript files when my visual studio solution is in debug mode. When Visual Studio is in release mode, I want a single compressed JavaScript file to be loaded.
Solution: (download)
Step 1: Download jsmin.exe from http://www.crockford.com/javascript/jsmin.html
Add it to your scripts directly in your project. You should not deploy this with your project, it is only needed during compile time to minimize and combine your JS files.
I use the following structure to store my javascript files:
Step 2: Add a post build command
Right click on your project, click properties. Select the compile tab and click on the build events on the bottom right of the screen.
Enter the following command in the post-build event command line field:
type “$(ProjectDir)content\js\libraries\*.debug.js” | “$(ProjectDir)content\js\libraries\jsmin” > “$(ProjectDir)content\js\libraries.min.js”
This command does two things. First it looks for all the javascript files in your “content/js/libararies” directory ending with .debug.js and pipes it into the jsmin executable as one long string. Second it tells jsmin to output the compressed and combined JavaScript code to a single file content/js/libraries.min.js
Step 3: Add a debug flag
We need a way to figure out if we are in debug mode or release mode so to do this we are going to add a shared function to a helper library that will return true if in debug mode, and false if in release mode. In this function we use a compiler statement to compile “return true” when in debug mode and “return false” otherwise.
Public Shared Function IsInDebugMode() As Boolean
#If DEBUG Then
Return True
#Else
Return False
#End If
End Function
Step 4: Add a conditional statement to your pages
To your page you simply add this:
<% If jsmin.Helpers.IsInDebugMode Then%>
<script src=”content/js/libraries/01-jquery-1.3.2.debug-vsdoc2.js” type=”text/javascript”></script>
<script src=”content/js/libraries/01-jquery-1.3.2.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/02-jquery-ui-1.7.2.custom.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/03-jquery.autocomplete.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/04-jquery.blockUI.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/05-jquery.cluetip.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/06-jquery.form.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/07-jquery.validate.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/08-jquery.values.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/09-json2.debug.js” type=”text/javascript”></script>
<script src=”content/js/libraries/10-app.debug.js” type=”text/javascript”></script>
<% Else%>
<script src=”content/js/libraries.min.js” type=”text/javascript”></script>
<% End If%>
This tells your page that when IsInDebugMode is true, reference all the debug scripts, otherwise reference only the libraries.min.js script
Making it better
This is great, but I dislike having to add these conditional statements to every page, so created another simple helper function that goes through my libraries directory, grabs all my debug files and creates the html string to be included in the page. following the same rules, if in debug mode all the scripts, if in release mode only libraries.min.js
Public Shared Function JSReferences() As String
Dim key = “JSReferences”
Dim context = HttpContext.Current
If context.Application(key) = “” Then
If IsInDebugMode() Then
Dim data = New StringBuilder
For Each f In Directory.GetFiles(context.Request.MapPath(“~/content/js/libraries/”))
f = f.ToLowerInvariant
If Path.GetExtension(f).ToLowerInvariant = “.js” AndAlso _
f.EndsWith(“vsdoc2.js”) = False AndAlso _
f.EndsWith(“vsdoc.js”) = False Then
data.AppendLine(String.Format(“<script src=’{0}’ type=’text/javascript’></script>”, “content/js/libraries/” & Path.GetFileName(f)))
End If
Next
context.Application.Add(key, data.ToString)
Else
context.Application.Add(key, “<script src=’content/js/libraries.min.js’ type=’text/javascript’></script>”)
End If
End If
Return context.Application(key)
End Function
now I can replace the code in my html pages with this single line statement.
<%=jsmin.Helpers.JSReferences%>
That’s it. Enjoy!
Thanks to Dave Ward for the original idea http://encosia.com/2009/05/20/automatically-minify-and-combine-javascript-in-visual-studio/



