Asp.net MVC4 - Bundling and Minification

    While this article may be very simple and straightforward, there are a few concepts here I think are important to note. In my next article will be looking more in depth on the idea of creating a customized Web.config, but for now with this article, I just want to look at activating the bundling and minification feature by using the xml tags inside a MVC's Web.config. This feature is only available in ASP.NET 4.5 and above.

The First Problem
With the following inside your Web.config... (transform is with a Captial T.)

    
      
    

And with either of the following inside your build config or customized Web.config (I.E. Web.Release.config)

    

This also can be achieved by doing the following...

    
    

     In both snippets of code you do not need to use the "xdt:Locator" attribute (used only in cases where there are multiples elements of the same name .  What you may not see is that in the Web.config we have the "location" tag wrapped around the "system" tag. This is important and something I missed when debugging the problem. So by wrapping my snippet of code with "location" tag this corrects the problem, and started up the bundling and minification in mvc. It is important to note that by default if the debug attribute is not specified it is false and will start up the bundling and minification

The Second Problem
    Now everything looks good, but wait the main css isn't working! Thanks to this feature there are warnings in the actually css or javascript files! They will appear as comments for example I saw the following..

/* Minification failed. Returning unminified contents.(1779,2): run-time error CSS1062: 
Expected semicolon or closing curly-brace, found ' '(1785,2): run-time error CSS1062: 
Expected semicolon or closing curly-brace, found ' '(1790,2): run-time error CSS1062: 
Expected semicolon or closing curly-brace, found ' ' */

     The cause of this was actually a issue created by the repository's character notation and not being cleaned up before being checked in (Git uses '*' to note a change). The issue existed for a while but since most browser work around issue nothing appeared out of the order. I normally disable css warnings on chrome because it gets a little annoying but in this case it made me miss the issue (ops). Either way a good catch and now everything is working like it should. Remember to actually check your bundling and minification!

Resources
Web.config
Web.config Transformation Syntax for Web Project Deployment Using Visual Studio
Location Element (ASP.NET Settings Schema)
Bundling and Minification : The Official Microsoft ASP.NET Site

Comments

Popular posts from this blog

HTML5 Audio doesn't Autoplay for Chrome on Android

Ng-repeat: Order a List Vertically rather Horizontal

Updating Razor 2.0 to 3.0 with Asp.net MVC