Using the ASP.NET bundling and minifications is pretty straight forward, but here is a small guide that take care of a few gotchas when implementing bundles in your Umbraco project.
ASP.NET Bundling and Minifications is part of the Microsoft ASP.NET Web Optimization Framework and is installed via NuGet;
PM> Install-Package Microsoft.AspNet.Web.Optimization
Once this is done, you need to create a BundleConfig.cs in your App_Start1 folder. This is where you register your different bundles. It can be extremely simple, or it can be more complex, but the gist of it is this;
namespace Project.Namespace.App_Start {
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/screen.css"));
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/scripts/jquery-{version}.js"));
LogHelper.Info<string>("Bundles Loaded");
//Comment this out to control this setting via web.config compilation debug attribute
BundleTable.EnableOptimizations = true;
}
}
}You will then have to register your bundles in the Global.asax.cs. If you don't have a Global.asax.cs, just create one, and make it inherit from UmbracoApplication. Note that you will have to point your Global.asax markup file to point to your new Global class, not UmbracoApplication2. Below is an example Global.asax.
namespace Project.Namespace
{
public class Global : UmbracoApplication
{
protected override void OnApplicationStarted(object sender, EventArgs e)
{
base.OnApplicationStarted(sender, e);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}Last, but not least, you'll need to add your bundles folder path to the umbracoReservedPaths in the Web.config:
<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/bundles" />
Now you're pretty much set. Just remember that if you add another bundle path - say ~/static/libs, you'll have to add ~/static to your reserved paths as well.
You might be wondering how to use these bundles you've set up as well? It's easy. System.Web.Optimization comes with two helpers that allow you to render out these bundles; Styles and Scripts. Both of these have a Render-method where you pass in the a string array with the names of your bundles.
@using System.Web.Optimization
@inherits UmbracoTemplatePage
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
@Styles.Render("~/bundles/css")
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/js")
</body>
</html>You can have multiple instances of these, and include page specific bundles in custom sections in your layout views if you wish.
[1] The
App_Startfolder isn't magical likeApp_DataorApp_Code, but is just a convention for classes that run onApplication_Start/OnApplicationStartedin yourGlobal.asax.
[2]
<%@ Application Codebehind="Global.asax.cs" Inherits="Project.Namespace.Global" Language="C#" %>
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
Great tip. Thank you for sharing :)