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.

<location>

    <system>

      <compilation debug="true" targetframework="4.5"></compilation>

    </system>

</location>

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

<system>

    <compilation xdt:transform="RemoveAttributes(debug)"></compilation>

</system>

This also can be achieved by doing the following

<system>

 <compilation debug="false" xdt:transform="SetAttributes(debug)">

 </compilation>

</system>

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!