Bundle.config confused about debug and release and minification

Question

I read this article http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification and I just feel there\'s a lot of content missing from it.

I was developing on a

Answer 1

Okay, here are a few things I discovered about this:

When in debug mode, and you check the web.config:

 <system.web>
     <compilation debug="true">

then all your javascripts will be preserved within the bundle virtual directory (they will not merge into a single file and they will not be minified).

When switching to release mode, then switch to:

 <system.web>
     <compilation debug="false">

so that all your javascript files within a bundle are minified and compiled into a single file, this reduces round trips to the network. Please note, one file is created for each bundle.

If you want to get the optimizations enabled regardless of whether or not you're in debug mode, then set BundleTable.EnableOptimizations = true, which forces the minification and bundling. If you leave this out of the code, then BundleConfig will look at the web.config instead.

RegisterBundles(BundleCollection bundles) method in BundleConfig.cs, you put in:

    BundleTable.EnableOptimizations = true;
    bundles.UseCdn = true;
    var cssTransformer = new CssTransformer();
    var jsTransformer = new JsTransformer();
    var nullOrderer = new NullOrderer();

and this is how you'd add in javascript files:

    var jqueryBundle = new CustomScriptBundle("~/bundles/jquery");
    jqueryBundle.IncludeDirectory("~/Scripts/JQuery", "*.js");
    jqueryBundle.Transforms.Add(jsTransformer);
    jqueryBundle.Orderer = nullOrderer;
    bundles.Add(jqueryBundle);

Couple notes:

• Bundle.config does ignore all min files. I added File.min.js, and File.js, and it ignores File.min.js, and it minifies File.js and bundles it with other files included in the bundle. I checked because when I minified one of the files myself, all the variable names (not the structured code) compared to what was downloaded in my website was completely different than the min file I included in the project. So, this verifies that min files are not needed in your project.
• Bundle.config ignores minifying any files named like this.. "File.debug.js", this will never be minified, in fact, it will never be included in your project in release. I found this out after realizing one of my javascript files never making it to the site.

• 403 errors will occur if you use "Content/css" as your virtual directory of where your bundle will appear, this needs to be changed to "bundles/css" and the 403 will go away like so (using razor):

  @Styles.Render("~/bundles/css")

meaning if you have this in your code (notice where ~/bundle/css" is, this will be where your css files will go):

BundleTable.EnableOptimizations = true;

bundles.UseCdn = true;
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
#region CSS Styles
var cssBundle = new CustomStyleBundle("~/bundles/css");
cssBundle.IncludeDirectory("~/Content/CSS", "*.css")
         .IncludeDirectory("~/Content/CSS/Override", "*.css");
cssBundle.Transforms.Add(cssTransformer);
cssBundle.Orderer = nullOrderer;
bundles.Add(cssBundle);
#endregion

• If your css has a relative path, this may also be changed, so look for 404 errors
• Not all minified files will behave the way you want them to.. so you will have to ultimately do a semi bundled version (or you do not have to minify any js at all, and just bundle them)

But if you want to continue on doing the minified javascript and you do not know which files is throwing the error, the following steps will help:

1. Bundle everything
2. Open your browser and find all the sources of your bundled minified js
3. Copy working bundled js into another file
4. start manually inserting javascript using the tags instead of bundleconfig.cs, and keep adding them one by one until one fails.. if that fails.. then you'd have to use the un-minified version of that project
5. repeat step 3-4

I wish there was better documentation of bundle.config at the time of this writing, but I found this entire experience to be severely disappointing.