Disable Minification with MVC 4 Bundles

I decided to play around with a bunch of new technologies to dive in and learn today. I decided to write a basic blog app (yeah, boring, I know) using the following tools:

• Visual Studio 11 Beta
• ASP.NET MVC 4 Beta
• Single Page Application
• Bundles (new combining/minification stuff)
• Web API
• Twitter Bootstrap 2.0
• Modernizr
• MvcScaffolding
• etc…

    (TL;DR? Click Here)

The Problems

Everything was going well, adding NuGet packages left and right (click, click, click!)
I added my JsTrace MVC NuGet package and started to get JavaScript errors.It turns out that I had 2 problems with the Bundles feature:

1. It doesn't add anything to the Bundles automatically except the original scripts in the Template.
2. It automatically uses minified files by looking for "min" or not "debug" JavaScript or CSS files.

Fix #1 - Add my own Bundles

Grr!  To fix #1, I had to add my own Bundle to the Global.asax:

Bundle tomsBundle = new Bundle("~/core/js");
tomsBundle.AddDirectory("~/Scripts", "Trace*", false, true);
tomsBundle.AddDirectory("~/Scripts/Core", "Foo.*", false, true);
BundleTable.Bundles.Add(tomsBundle);

OK, problem solved.

Fix #1a - Bootstrap Bundles

While I was there, I decided to make an extension method to add the Twitter.Bootstrap stuff to the BundleTable:

public static class BootstrapExtensionMethods
{
    public static void EnableBootstrapBundle(
        this BundleCollection bundles)
    {
        var bootstrapCss = new Bundle("~/bootstrap/css", 
            new CssMinify());
        bootstrapCss.AddDirectory("~/Content", "bootstrap*", 
            false, true);
        bundles.Add(bootstrapCss);
 
        var bootstrapJs = new Bundle("~/bootstrap/js", new JsMinify());
        bootstrapJs.AddFile("~/Scripts/bootstrap.js");
        bundles.Add(bootstrapJs);
    }
}

So, add a one-liner to the Global.asax:

BundleTable.Bundles.EnableBootstrapBundle();

Fix #2 - Supersize Me!

Now, for Problem #2 – I want to have big, fat un-minimized debug versions of my files while I'm developing. So, after digging around with Google and ILSpy, I came across the implementation of JsMinify and noticed that it uses a property called "EnableInstrumentation" to determine whether or not it should minify the files. Eureka!

Of course, they don't actually provide you with a simple way to set that flag. So, I realized I had to create my own implementation of 2 interfaces:

• IBundleBuilder - has the responsibility for iterating over a collection of files and combining them
• IBundleTransform – has the responsibility of "transforming" (i.e. minifying) the bundles (default implementations being JsMinify and CssMinify)

So, I created two wrapper classes (basically, the Decorator Pattern):

• NonMinifyingBundleBuilder – reverses Microsoft's logic and replaces the minified files with their debug counterparts.
• InstrumentedBundleTransform – sets the "EnableInstrumentation" flag to true while processing.

I then added a simple extension method to override everything in the BundleTable:

BundleTable.Bundles.DisableMinify();

This is probably best wrapped in an "#if DEBUG" so your release code still gets all minified.
In fact, that's what I do in the NuGet package I created out of this!

NOTE: this is a beta (since it relies on Microsoft.Web.Optimization 1.0.0-beta), so you will have to install the NuGet package with the NuGet Package Console like this:

PM> Install-Package McKearney.BundlingTweaks -Pre