GotThatGame.Com: Easy Js & CSS Minification in .Net MVC with Combres

One problem that came up when building GotThatGame.com was the issue of minifying JavaScript. The Combres package for ASP.Net MVC was recommended to me by a coworker and turned out to be a fast and easy way to minify, combine, and cache JavaScript and CSS.

As documented on their site, just run "Install-Package combres.mvc" on the package manager console, add Js &CC entries to the XML config file, and you'll be able to easily drop links into your Razor views that magically turns into efficient compact output.

One catch I found: Debugging Js  in Combres can be problematic. During development you can turn off minification in the Combres config file; however, Combres' generated links will keep changing names when you change Js code, which makes debugging in the browser clumsy. I found a simple solution involving changing your Razor view output that could be used for other things.

By adding an extension method to the HtmlHelper class that returns a boolean indicating whether or not the currently build is debug, such as implemented in this GitHub gist, it's possible to dynamically change the output of a view. For instance, you can leave it to the view to decide between vanilla Js links for debug and Combres output for release:

@if (@Html.IsDebug())
{
    <script src="~/Scripts/jquery.tinysort.min.js"></script>
    <script src="~/Scripts/Steam.js"></script>
}
else
{
    @Url.CombresLink("appJs")
}

You can make similar @if patterns for Combres CSS switching. Obviously, other applications likely abound.

Combres cut down load time for GotThatGame after only minutes of configuration. Coupled with MVC output caching, it will save some time for the user without taking a lot of time from this developer.