Bundling/Minification With Umbraco

I had tried playing around with this once based on a blog post I saw (https://gist.github.com/jkarsrud/5143239) but it never worked quite right. Then I saw there was a link to a StackOverflow article on the same problem, and after putting the parts together, I got it working. Since I haven’t seen a complete blog post on solving the problem, I thought I’d write one!

First things first, you need to use NuGet to grab the Microsoft.AspNet.Web.Optimization package; once you have that, you’ll have what’s needed to install the bundling and minification. Create an App_Start folder in your project as well; it’s not a “special” folder like App_Code or App_Browsers, but it appears to be a convention used by others. In there, you’ll want to create a class file called BundleConfig. In this file, add in the following code (you can modify it later as needed for your situation):

public static void RegisterBundles(BundleCollection bundles) {

bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/screen.css"));

bundles.Add(new ScriptBundle("~/bundles/js").Include("~/scripts/jquery-{version}.js")); //Comment this out to control this setting via web.config compilation debug attribute

BundleTable.EnableOptimizations = true; }

I’d advise going ahead and commenting out or removing that last line, and let the “debug” attribute in your web.config control whether or not bundling/minification is activated. Also of note, the “{version}” bit in the script call for JQuery is a built-in regular expression that will automatically parse the version number of your JQuery file, so if you update it later, you won’t have to update this code.

Speaking of the web.config, you do need to go in there and find the “umbracoReservedPaths” key, and add “~/bundles” to the list already there. (You can also use a name other than “bundles” - just make the appropriate changes in the references.)

Now, here’s where things diverge from standard ASP.NET. Normally, you’d register this command in the global.asax when starting the application. This is where I ran into trouble before, because the commands would never be fired and I was left with dummy references. Instead of the global.asax, we’re going to create a second class file in the App_Start folder, called RegisterEvents, and use this code to replace the class definition:

public class RegisterEvents : ApplicationEventHandler { protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) { BundleConfig.RegisterBundles(BundleTable.Bundles); } }

And that’s all you have to do! Nothing needs to be hooked up to the global.asax; by inheriting from ApplicationEventHandler, Umbraco knows to read this in and hooks you up. If you have other things you’d want to connect up, like your own routing definitions, you’d do that here as well.

(Caveat: this method is for later versions of Umbraco…check here for how to do it on all versions: http://our.umbraco.org/documentation/Reference/Events/application-startup)