Examples of usage

Recommend to move the code, that is responsible for registration of assets, from the Global.asax file to 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 BundleConfig class:

using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace BundleTransformer.Example.Mvc
{
    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 by using the StyleTransformer and ScriptTransformer in the BundleConfig.cs file:

using System.Web.Optimization;

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

namespace BundleTransformer.Example.Mvc
{
    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",
                "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.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 the CustomBundleResolver class adds to URLs 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 (UseInDebugModeproperty 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 CssAssetHandler and JsAssetHandler debugging HTTP handlers 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 the 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 the 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:

using System.Web.Optimization;

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

namespace BundleTransformer.Example.Mvc
{
    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",
                "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.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 the StyleTransformer as transformation by default and the NullBuilder as builder by default, and CustomScriptBundle class uses the ScriptTransformer as transformation by default and the 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);