Mitch Labrador's Tech Blog Less is more when you are focused.

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/