minification of CSS and JavaScript with Microsoft Web Optimization

Question

I'm trying to use

http://blogs.msdn.com/b/cdndevs/archive/2012/01/23/javascript-and-css-minifying-bundling-with-the-microsoft-web-optimization-nuget-package.aspx

To minify and bundle my css and js files

All the examples I have been able to find all include all of their scripts on the masterpage / _layout file.

I would like to be able to have a

 @RenderSection("Script", false)

in my _layout file and add scripts from my "subviews" like this

@section Script {
<script src="@Url.Content("~/Scripts/Configuration/Configuration.js")" type="text/javascript"></script>
}

Now my question is how I dynamically add files to the bundle and force a cache bust?

Right now i have this

 public static void AddBundleFile(this HtmlHelper helper, string path, Type type, int index)
    {
        var bundle = BundleTable.Bundles.GetRegisteredBundles()
            .Where(b => b.TransformType == type)
            .First();

        bundle.AddFile(path);
    }

To add files from my "subviews" but the bundle files is never updated..

Answer 1

I'm not 100% sure what part you're having problems with. It sounds like you want to include bundles dynamically? I'd really try to stay away from using any mechanism that dynamically grabs JS and then merges / combines it in any particular order.

Sooner or later, you're going to need fine grain control over what JS is included in what order. The sooner you address this the more future proof your app will be. Its frustrating that they even built the ability to just bundle all scripts in a folder automatically, that's such a bad idea.

So you're left with the extremely minor annoyance of having to specify the order of inclusion for your javascript files and bundles. We do this by maintaining a simple List<string> that is consumed in app start.

Right now I think for our use, we can get by on just one big bundle for the site, but I could see setting up the ability to specify bundles and then specifying the order of inclusion for the bundles as well. In the end you're just going to end up with a List<T> to go over.

Here's what our scripts partial looks like, it lets us dynamically switch between using a bundle or using individually included javascript files:

@if (NameSpace.UI.UseBundledResources) // set in the web.config, different per environment
{
    <script src="@Url.ContentNoCache("~/bundle.js")" type="text/javascript"></script>    
}
else
{
    foreach (var file in NameSpace.UI.JavaScriptFileNames)
    {
    <script src="@Url.ContentNoCache(file)" type="text/javascript"></script>  
    } 
}

and our app start

var customJsFiles = NameSpace.UI.JavaScriptFileNames;
var myJSBundle = new Bundle("~/bundle.js", typeof(JsMinify));
customJsFiles.ForEach(f => myJSBundle.AddFile(f));
BundleTable.Bundles.Add(myJSBundle);