At Danish Developer Conference 2012, I saw one of the coolest demos this year. It was Mads Kristensen of Microsoft, showing the Microsoft.Web.Optimization nugetpackage in Visual Studio 2012 Beta (at that time). I Love how easy it is to implement bundling of javascript and css and add minification to the files as well.
For those unfamiliar with the package, in short this is how to use it:
- Add NuGet package called "Microsoft.Web.Optimization" to your project
- In your Global.asax, in Application_Start add the following code
BundleTable.Bundles.EnableDefaultBundles();
- The above implements a handler, which, by default, will enable all javascript files placed in /scripts, and all css files places in /styles to be bundled into one file, and add minification to the file as well. The files can be referenced simply by adding a reference to /scripts/js like this: <script src="/scripts/js"></script>, or /styles/css like this: <link rel="stylesheet" type="text/css" href="/styles/css"/>
It's really that simple!, ScottGu tells a little more about the feature in this blog post: http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx
After attending the event, I thought that I would use this in my next Sitecore project. Unfortunately it wasn't just that easy, as I installed the NuGet package, and tried referencing the scripts and css folders, I would get an error. Of course, this was because Sitecore has attached itself to all incoming requests to the site, and it doesn't know how to interpret /scripts/js and /styles/css.
Fortunately the solution was an easy one. In Sitecore config there's a setting called IgnoreUrlPrefixes, which already contains a lot of locations, which Sitecore itself uses. All you need to do is to add /scripts and /styles to the setting, and you are good to go. This is done by patching the setting in a .config file. I've attached one that does the trick for my current projects Sitecore version, 6.5.0 rev 110818.