This project has moved. For the latest updates, please go here.

Examples of usage

Recommend to move the code, that is responsible for the registration of assets, from the Global.asax file in the BundleConfig.cs file and place this file in the App_Start directory. In the Global.asax file you need to leave only the code calling a method of class BundleConfig:

namespace BundleTransformer.Example.Mvc
{
   using System.Web.Mvc;
   using System.Web.Optimization;
   using System.Web.Routing;

   public class MvcApplication : System.Web.HttpApplication
   {
      protected void Application_Start()
      {
         AreaRegistration.RegisterAllAreas();

         FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
         RouteConfig.RegisterRoutes(RouteTable.Routes);
         BundleConfig.RegisterBundles(BundleTable.Bundles);
      }
   }
}

Here an example of registration of assets and configuration of their processing with the help of StyleTransformer and ScriptTransformer in the BundleConfig.cs file:

namespace BundleTransformer.Example.Mvc
{
   using System.Web.Optimization;

   using Core.Builders;
   using Core.Orderers;
   using Core.Resolvers;
   using Core.Transformers;

   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         bundles.UseCdn = true;

         var nullBuilder = new NullBuilder();
         var styleTransformer = new StyleTransformer();
         var scriptTransformer = new ScriptTransformer();
         var nullOrderer = new NullOrderer();

         // Replace a default bundle resolver in order to the debugging HTTP-handler
         // can use transformations of the corresponding bundle
         BundleResolver.Current = new CustomBundleResolver();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/Content/Fonts.css",
            "~/Content/Site.css",
            "~/Content/BundleTransformer.css",
            "~/AlternativeContent/css/TestCssComponentsPaths.css",
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.theme.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/TestTranslators.css",
            "~/Content/less/TestLess.less",
            "~/Content/sass/TestSass.sass",
            "~/Content/scss/TestScss.scss");
         commonStylesBundle.Builder = nullBuilder;
         commonStylesBundle.Transforms.Add(styleTransformer);
         commonStylesBundle.Orderer = nullOrderer;
         bundles.Add(commonStylesBundle);

         var modernizrBundle = new Bundle("~/Bundles/Modernizr");
         modernizrBundle.Include("~/Scripts/modernizr-2.*");
         modernizrBundle.Builder = nullBuilder;
         modernizrBundle.Transforms.Add(scriptTransformer);
         modernizrBundle.Orderer = nullOrderer;
         bundles.Add(modernizrBundle);

         var jQueryBundle = new Bundle("~/Bundles/Jquery",
            "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js");
         jQueryBundle.Include("~/Scripts/jquery-{version}.js");
         jQueryBundle.Builder = nullBuilder;
         jQueryBundle.Transforms.Add(scriptTransformer);
         jQueryBundle.Orderer = nullOrderer;
         jQueryBundle.CdnFallbackExpression = "window.jquery";
         bundles.Add(jQueryBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include(
            "~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-3.*",
            "~/Scripts/coffee/TestCoffeeScript.coffee",
            "~/Scripts/coffee/TestLiterateCoffeeScript.litcoffee",
            "~/Scripts/coffee/TestCoffeeScriptMarkdown.coffee.md",
            "~/Scripts/ts/TranslatorBadge.ts",
            "~/Scripts/ts/ColoredTranslatorBadge.ts",
            "~/Scripts/ts/TestTypeScript.ts");
         commonStylesBundle.Builder = nullBuilder;
         commonScriptsBundle.Transforms.Add(scriptTransformer);
         commonScriptsBundle.Orderer = nullOrderer;
         bundles.Add(commonScriptsBundle);

         var commonTemplatesBundle = new Bundle("~/Bundles/CommonTemplates");
         commonTemplatesBundle.Include(
            "~/Scripts/hogan/template-{version}.js",
            "~/Scripts/hogan/HoganTranslatorBadge.mustache",
            "~/Scripts/hogan/TestHogan.js",
            "~/Scripts/handlebars/handlebars.runtime.js",
            "~/Scripts/handlebars/HandlebarsHelpers.js",
            "~/Scripts/handlebars/HandlebarsTranslatorBadge.handlebars",
            "~/Scripts/handlebars/TestHandlebars.js");
         commonTemplatesBundle.Builder = nullBuilder;
         commonTemplatesBundle.Transforms.Add(scriptTransformer);
         commonTemplatesBundle.Orderer = nullOrderer;
         bundles.Add(commonTemplatesBundle);
         …
      }
   }
}

NullBuilder class is responsible for prevention of early applying of the item transformations and combining of code. StyleTransformer and ScriptTransformer classes produce processing of stylesheets and scripts. NullOrderer class disables the built-in sorting mechanism and save assets sorted in the order they are declared.

In debug mode CustomBundleResolver class adds to URL's of individual assets a query string parameter that contains the virtual path of bundle. Debugging HTTP-handlers use this query string parameter for apply to asset a item transformations, translator and postprocessors (property UseInDebugMode of postprocessor must be equals to true) from corresponding bundle. In order to these transformations (item transformations and postprocessors) can be applied to individual CSS- and JS-assets need to register the debugging HTTP-handlers CssAssetHandler and JsAssetHandler in Web.config file.

Bundle Transformer is not recommended to use together with the StyleBundle and ScriptBundle classes, because these classes already contain transformations (instances of the built-in minifier-transformations: CssMinify and JsMinify). If you are in this situation plug the Bundle Transformer minifiers-modules (for example, BundleTransformer.MicrosoftAjax or BundleTransformer.Yui), then it will lead to a double minification of code. In addition, minifier-modules of the Bundle Transformer do not produce the re-minification of code of pre-minified assets (for example, files with the extension *.min.js and *.min.css), that speeds up the process of optimization.

You also need to understand that when you plug instances of StyleTransformer and ScriptTransformer classes, then you plug in a set of transformations (choice between debug and pre-minified versions of files, translation code from the intermediate languages, postprocessing, runtime code minification and code combining). A set of transformations depends on what the modules of Bundle Transformer you have installed and settings you have specified in the Web.config file.

Also note, that CssMinify and JsMinify was created on the basis of the Microsoft Ajax Minifier. Therefore, as a their replacement you can use minifier-module the BundleTransformer.MicrosoftAjax, which supports a newer version of the Microsoft Ajax Minifier algorithm and allows you to make a more fine-tuning of this algorithm.

Above code can be a bit shorter, if you will use the CustomStyleBundle and CustomScriptBundle classes:

namespace BundleTransformer.Example.Mvc
{
   using System.Web.Optimization;

   using Core.Builders;
   using Core.Bundles;
   using Core.Orderers;
   using Core.Resolvers;
   using Core.Transformers;

   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         bundles.UseCdn = true;

         var nullBuilder = new NullBuilder();
         var nullOrderer = new NullOrderer();

         // Replace a default bundle resolver in order to the debugging HTTP-handler
         // can use transformations of the corresponding bundle
         BundleResolver.Current = new CustomBundleResolver();

         var commonStylesBundle = new CustomStyleBundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/Content/Fonts.css",
            "~/Content/Site.css",
            "~/Content/BundleTransformer.css",
            "~/AlternativeContent/css/TestCssComponentsPaths.css",
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.theme.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/TestTranslators.css",
            "~/Content/less/TestLess.less",
            "~/Content/sass/TestSass.sass",
            "~/Content/scss/TestScss.scss");
         commonStylesBundle.Orderer = nullOrderer;
         bundles.Add(commonStylesBundle);

         var modernizrBundle = new CustomScriptBundle("~/Bundles/Modernizr");
         modernizrBundle.Include("~/Scripts/modernizr-2.*");
         modernizrBundle.Orderer = nullOrderer;
         bundles.Add(modernizrBundle);

         var jQueryBundle = new CustomScriptBundle("~/Bundles/Jquery",
            "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js");
         jQueryBundle.Include("~/Scripts/jquery-{version}.js");
         jQueryBundle.Orderer = nullOrderer;
         jQueryBundle.CdnFallbackExpression = "window.jquery";
         bundles.Add(jQueryBundle);

         var commonScriptsBundle = new CustomScriptBundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include(
            "~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-3.*",
            "~/Scripts/coffee/TestCoffeeScript.coffee",
            "~/Scripts/coffee/TestLiterateCoffeeScript.litcoffee",
            "~/Scripts/coffee/TestCoffeeScriptMarkdown.coffee.md",
            "~/Scripts/ts/TranslatorBadge.ts",
            "~/Scripts/ts/ColoredTranslatorBadge.ts",
            "~/Scripts/ts/TestTypeScript.ts");
         commonScriptsBundle.Orderer = nullOrderer;
         bundles.Add(commonScriptsBundle);

         var commonTemplatesBundle = new CustomScriptBundle("~/Bundles/CommonTemplates");
         commonTemplatesBundle.Include(
            "~/Scripts/hogan/template-{version}.js",
            "~/Scripts/hogan/HoganTranslatorBadge.mustache",
            "~/Scripts/hogan/TestHogan.js",
            "~/Scripts/handlebars/handlebars.runtime.js",
            "~/Scripts/handlebars/HandlebarsHelpers.js",
            "~/Scripts/handlebars/HandlebarsTranslatorBadge.handlebars",
            "~/Scripts/handlebars/TestHandlebars.js");
         commonTemplatesBundle.Orderer = nullOrderer;
         bundles.Add(commonTemplatesBundle);
         …
      }
   }
}

CustomStyleBundle and CustomScriptBundle classes are analogues of the StyleBundle and ScriptBundle classes, oriented to work with the Bundle Transformer. CustomStyleBundle class uses StyleTransformer as transformation by default and NullBuilder as builder by default, and CustomScriptBundle class uses ScriptTransformer as transformation by default and NullBuilder as builder by default.

Example of _Layout.cshtml:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>@ViewBag.Title - Bundle Transformer Example MVC Application</title>
      <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
      <meta name="viewport" content="width=device-width" />
      @Styles.Render("~/Bundles/CommonStyles")
      @Scripts.Render("~/Bundles/Modernizr")
   </head>
   <body>
      …
      @Scripts.Render("~/Bundles/Jquery", "~/Bundles/CommonScripts",
         "~/Bundles/CommonTemplates")
      @RenderSection("scripts", required: false)
   </body>
</html>

When adding assets from directory, you can specify patterns for exclusion of unnecessary files (ignorePatterns parameter):

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory")
{
   Builder = nullBuilder
};
jqueryUiStylesDirectoryBundle.IncludeDirectory("~/Content/themes/base/", "*.css");
jqueryUiStylesDirectoryBundle.Transforms.Add(new StyleTransformer(
   new[] { "*.all.css", "jquery.ui.base.css" }));
bundles.Add(jqueryUiStylesDirectoryBundle);

var scriptsDirectoryBundle = new Bundle("~/Bundles/ScriptsDirectory")
{
   Builder = nullBuilder
};
scriptsDirectoryBundle.IncludeDirectory("~/Scripts/", "*.js", true);
scriptsDirectoryBundle.Transforms.Add(new ScriptTransformer(
   new[] { "*.all.js", "_references.js" }));
bundles.Add(scriptsDirectoryBundle);

Last edited Jan 24, 2015 at 1:18 PM by Taritsyn, version 4