Implementing Bundling and Minification with Sitecore Web Forms site

Bundling and Minification is introduced in .NET 4.5 with System.Web.Optimization namespace.

These new functionality can be implemented with .NET 4.0 as well.

Following are the steps to implement Bundling and Minification functionality with Sitecore Web Forms.

1. Dependencies

• System.Web.Optimization.dll
• WebGrease.dll

2. Defining Bundles

Method 1 - using RegisterBundles class method

using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/css").Include(
                    "~/Styles/Site.css"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

     }

}

Method 2 - using config file  (bundle.config) - Only static style bundles

<?xml version="1.0" encoding="utf-8" ?>

<bundles version="1.0">

  <styleBundle path="~/bundles/css">

    <include path="~/Styles/Site.css" />

  </styleBundle>

</bundles>

3. Register Bundles
Bundle registration can be done in two ways.

• In the Application_Start method in Global.asax file

         RegisterBundles(BundleTable.Bundles);

• As a custom pipeline processor in /Configuration/Sitecore/Pipelines/Initialization by editing web.config file

using System.Web.Optimization;
using Sitecore; 

using Sitecore.Pipelines;

namespace MyWebProject

{ 

  public class BundleConfig
  {

    [UsedImplicitly]

    public virtual void Process(PipelineArgs args)

    {

        RegisterBundles(BundleTable.Bundles);

    }

    public void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/css").Include(
                    "~/Styles/Site.css"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

     }

  }

} 

Add follwing pipeline to /Configuration/Sitecore/Pipelines/Initialization as the final processor

<processor type="MyWebProject.BundleConfig, MyWebProject" />

4. Adding Namespace
Under the "/configuration/system.web/pages/namespaces" in web.config, add following namespace

<add namespace="System.Web.Optimization" />

5. Adding Bundles to View/Layout
In the main layout page in the head section, add style and script bundle virtual path references

<%: Scripts.Render("~/bundles/css") %> 

<%: Styles.Render("~/bundles/jquery") %> 

6. Allowing bundle virtual path urls to access files
"IgnoreUrlPrefixes" config setting in web.config file

<setting name="IgnoreUrlPrefixes" value="/sitecore/default.aspx|/trace.axd|/webresource.axd|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.DialogHandler.aspx|/sitecore/shell/applications/content manager/telerik.web.ui.dialoghandler.aspx|/sitecore/shell/Controls/Rich Text Editor/Telerik.Web.UI.SpellCheckHandler.axd|/Telerik.Web.UI.WebResource.axd|/sitecore/admin/upgrade/|/layouts/testing|/bundles" />

7. Enable/Disable Minification
In the web.config file,  fine the "<compilation" tag and set "debug" property to "false" to enable bundling and minification.

Note: if you want to debug scripts and styles, setting debug="true" will ease the debugging process, since when debug="true", bundling and minification will not take place.

<compilation debug="false" targetFramework="4.0" />

Important Notes:
Best practice is to use include config file to do the config changes rather than doing it directly on web.config file


Update 1:
* Dependencies can be installed by importing the Microsoft.AspNet.Web.Optimization package.
* If the version is greater than or equal to 1.1 (1.1>=), then Styles.RenderFormat method is also available. This support the formating of the input html tag.
     Ex:  <link ref="stylesheet" type="text/css" media="screen" ..>

Limitations :
System.Web.Optimization mechanism does not convert relative image reference paths inside the .css file. Workaround will be to use Absolute path in image references inside .css files.

References

http://blogs.msdn.com/b/rickandy/archive/2012/08/14/adding-bundling-and-minification-to-web-forms.aspx

http://blog.vicreative.nl/2013/09/automatic-bundling-and-minification-in-net/

http://jockstothecore.com/bundling-with-sitecore-mvc/