jkarsrud/BundleInstall.md

## BundleInstall.md

      
    Raw
  

              BundleInstall.md
            
          
    How to use ASP.NET Bundling and Minifications in Umbraco

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.
Installing ASP.NET Bundling and Minifications

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_Start¹ 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 UmbracoApplication². 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.
How to use

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_Start folder isn't magical like App_Data or App_Code, but is just a convention for classes that run on Application_Start/OnApplicationStarted in your Global.asax.


[2] <%@ Application Codebehind="Global.asax.cs" Inherits="Project.Namespace.Global" Language="C#" %>

More information

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification