Bundle Transformer 1.7.23

Bundle Transformer logo

Before you read

Before you read the documentation for Bundle Transformer, i recommend to read chapter “Bundling and Minification” of the ASP.NET MVC 4 tutorial and Howard Dierking's article «New Web Optimization Pre-Release Package on NuGet». Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

Bundle Transformer does not minify HTML markup, embedded/inline styles and scripts. For these purposes it is recommended to use WebMarkupMin.

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:

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 with the help of CssTransformer and JsTransformer in the BundleConfig.cs file:

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

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

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

         var nullBuilder = new NullBuilder();
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         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(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var jQueryBundle = new Bundle("~/Bundles/Jquery", 
            "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js");
         jQueryBundle.Include("~/Scripts/jquery-{version}.js");
         jQueryBundle.Builder = nullBuilder;
         jQueryBundle.Transforms.Add(jsTransformer);
         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-2.*",
            "~/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(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         …
      }
   }
}

NullBuilder class is responsible for prevention of early applying of the item transformations and combining of code. CssTransformer and JsTransformer 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.

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 CssTransformer and JsTransformer classes, then you plug in a set of transformations (choice between debug and pre-minified versions of files, translation code from the intermediate languages, runtime code minification, transformation of relative paths to absolute (only for CSS-code) 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.Transformers;

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

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

         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.9.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-2.*",
            "~/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);
         …
      }
   }
}

CustomStyleBundle and CustomScriptBundle сlasses are analogues of the StyleBundle and ScriptBundle classes, oriented to work with the Bundle Transformer. CustomStyleBundle class uses CssTransformer as transformation by default and NullBuilder as builder by default, and CustomScriptBundle class uses JsTransformer 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")
      @Scripts.Render("~/Bundles/CommonScripts")
      @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");
jqueryUiStylesDirectoryBundle.Builder = nullBuilder;
jqueryUiStylesDirectoryBundle.IncludeDirectory("~/Content/themes/base/", "*.css");
jqueryUiStylesDirectoryBundle.Transforms.Add(new CssTransformer(
   new[] { "*.all.css", "jquery.ui.base.css" }));

bundles.Add(jqueryUiStylesDirectoryBundle);

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

bundles.Add(scriptsDirectoryBundle);

Configuration settings

Starting with version 1.2.1 Beta from the Web.config file has been removed settings of Bundle Transformer, which were default settings. Current settings of Bundle Transformer equivalent to following version of the Web.config file:

 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <!-- Declaration of Bundle Transformer configuration section group -->
    <sectionGroup name="bundleTransformer">
      <section name="core" 
        type="BundleTransformer.Core.Configuration.CoreSettings, BundleTransformer.Core" />
      <section name="less"
        type="BundleTransformer.Less.Configuration.LessSettings, BundleTransformer.Less" />
      <section name="sassAndScss"
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings, BundleTransformer.SassAndScss" />
      <section name="typeScript"
        type="BundleTransformer.TypeScript.Configuration.TypeScriptSettings, BundleTransformer.TypeScript" />
      <section name="coffeeScript"
        type="BundleTransformer.CoffeeScript.Configuration.CoffeeScriptSettings, BundleTransformer.CoffeeScript" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings, BundleTransformer.MicrosoftAjax" />
      <section name="yui" 
        type="BundleTransformer.Yui.Configuration.YuiSettings, BundleTransformer.Yui" />
      <section name="closure"
        type="BundleTransformer.Closure.Configuration.ClosureSettings, BundleTransformer.Closure" />
      <section name="uglify"
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings, BundleTransformer.UglifyJs" />
      <section name="packer"
        type="BundleTransformer.Packer.Configuration.PackerSettings, BundleTransformer.Packer" />
      <section name="csso"
        type="BundleTransformer.Csso.Configuration.CssoSettings, BundleTransformer.Csso" />
    </sectionGroup>
    <!-- /Declaration of Bundle Transformer configuration section group --></configSections>
  <system.web><httpHandlers><!-- Declaration of Bundle Transformer HTTP-handlers -->
      <add path="*.less" verb="GET" 
        type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />
      <add path="*.sass" verb="GET" 
        type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
      <add path="*.scss" verb="GET" 
        type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
      <add path="*.coffee" verb="GET" 
        type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript" />
      <add path="*.litcoffee" verb="GET"
        type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript" />
      <add path="*.coffee.md" verb="GET"
        type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript" />
      <add path="*.ts" verb="GET" 
        type="BundleTransformer.TypeScript.HttpHandlers.TypeScriptAssetHandler, BundleTransformer.TypeScript" />
      <!-- /Declaration of Bundle Transformer HTTP-handlers --></httpHandlers>
  </system.web>
  <system.webServer><handlers><!-- Declaration of Bundle Transformer HTTP-handlers -->
      <add name="LessAssetHandler" path="*.less" verb="GET" 
        type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
        resourceType="File" preCondition="" />
      <add name="SassAssetHandler" path="*.sass" verb="GET" 
        type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" 
        resourceType="File" preCondition="" />
      <add name="ScssAssetHandler" path="*.scss" verb="GET" 
        type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" 
        resourceType="File" preCondition="" />
      <add name="CoffeeScriptAssetHandler" path="*.coffee" verb="GET" 
        type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript" 
        resourceType="File" preCondition="" />
      <add name="LiterateCoffeeScriptAssetHandler" path="*.litcoffee" verb="GET"
        type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript"
        resourceType="File" preCondition="" />
      <add name="CoffeeScriptMarkdownAssetHandler" path="*.coffee.md" verb="GET" 
        type="BundleTransformer.CoffeeScript.HttpHandlers.CoffeeScriptAssetHandler, BundleTransformer.CoffeeScript"
        resourceType="File" preCondition="" />
      <add name="TypeScriptAssetHandler" path="*.ts" verb="GET" 
        type="BundleTransformer.TypeScript.HttpHandlers.TypeScriptAssetHandler, BundleTransformer.TypeScript" 
        resourceType="File" preCondition="" />
      <!-- /Declaration of Bundle Transformer HTTP-handlers --></handlers>
  </system.webServer><!-- Bundle Transformer configuration settings -->
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core enableTracing="false" 
      jsFilesWithMicrosoftStyleExtensions="MicrosoftAjax.js,MicrosoftMvcAjax.js, MicrosoftMvcValidation.js,knockout-$version$.js"
      useEnableOptimizationsProperty="true">
      <css defaultMinifier="NullMinifier" usePreMinifiedFiles="true"
        disableNativeCssRelativePathTransformation="false">
        <minifiers>
          <add name="NullMinifier" 
            type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
          <add name="MicrosoftAjaxCssMinifier"
            type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxCssMinifier, BundleTransformer.MicrosoftAjax" />
          <add name="YuiCssMinifier" 
            type="BundleTransformer.Yui.Minifiers.YuiCssMinifier, BundleTransformer.Yui" />
          <add name="KryzhanovskyCssMinifier" 
            type="BundleTransformer.Csso.Minifiers.KryzhanovskyCssMinifier, BundleTransformer.Csso" />
          <add name="WgCssMinifier" 
            type="BundleTransformer.WG.Minifiers.WgCssMinifier, BundleTransformer.WG" />
        </minifiers>
        <translators>
          <add name="NullTranslator"
            type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" 
            enabled="false" />
          <add name="LessTranslator" 
            type="BundleTransformer.Less.Translators.LessTranslator, BundleTransformer.Less"
            enabled="true" />
          <add name="SassAndScssTranslator"
            type="BundleTransformer.SassAndScss.Translators.SassAndScssTranslator, BundleTransformer.SassAndScss" 
            enabled="true" />
        </translators>
      </css>
      <js defaultMinifier="NullMinifier" usePreMinifiedFiles="true">
        <minifiers>
          <add name="NullMinifier"
            type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
          <add name="MicrosoftAjaxJsMinifier"
            type="BundleTransformer.MicrosoftAjax.Minifiers.MicrosoftAjaxJsMinifier, BundleTransformer.MicrosoftAjax" />
          <add name="YuiJsMinifier" 
            type="BundleTransformer.Yui.Minifiers.YuiJsMinifier, BundleTransformer.Yui" />
          <add name="ClosureRemoteJsMinifier" 
            type="BundleTransformer.Closure.Minifiers.ClosureRemoteJsMinifier, BundleTransformer.Closure" />
          <add name="ClosureLocalJsMinifier"
            type="BundleTransformer.Closure.Minifiers.ClosureLocalJsMinifier, BundleTransformer.Closure" />
          <add name="CrockfordJsMinifier"
            type="BundleTransformer.JsMin.Minifiers.CrockfordJsMinifier, BundleTransformer.JsMin" />
          <add name="UglifyJsMinifier" 
            type="BundleTransformer.UglifyJs.Minifiers.UglifyJsMinifier, BundleTransformer.UglifyJs" />
          <add name="EdwardsJsMinifier" 
            type="BundleTransformer.Packer.Minifiers.EdwardsJsMinifier, BundleTransformer.Packer" />
        </minifiers>
        <translators>
          <add name="NullTranslator"
            type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" 
            enabled="false" />
          <add name="CoffeeScriptTranslator" 
            type="BundleTransformer.CoffeeScript.Translators.CoffeeScriptTranslator, BundleTransformer.CoffeeScript" 
            enabled="true" />
          <add name="TypeScriptTranslator" 
            type="BundleTransformer.TypeScript.Translators.TypeScriptTranslator, BundleTransformer.TypeScript" 
            enabled="true" />
        </translators>
      </js>
      <assetHandler clientCacheDurationInDays="365" enableCompression="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" ieCompat="true"
      strictMath="false" strictUnits="false" />
    <sassAndScss useNativeMinification="false" />
    <coffeeScript bare="true" />
    <typeScript useDefaultLib="true" propagateEnumConstants="false"
      removeComments="false" allowAutomaticSemicolonInsertion="true"
      noImplicitAny="false" codeGenTarget="EcmaScript3" />
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" blocksStartOnSameLine="NewLine"
        ignoreAllErrors="false" ignoreErrorList="" indentSize="4"
        lineBreakThreshold="2147482647" outputMode="SingleLine"
        preprocessorDefineList="" termSemicolons="false"
        colorNames="Strict" commentMode="Important" minifyExpressions="true" 
        severity="0" />
      <js allowEmbeddedAspNetBlocks="false" blocksStartOnSameLine="NewLine"
        ignoreAllErrors="false" ignoreErrorList="" indentSize="4"
        lineBreakThreshold="2147482647" outputMode="SingleLine"
        preprocessorDefineList="" termSemicolons="false"
        alwaysEscapeNonAscii="false"
        collapseToLiteral="true" constStatementsMozilla="false"
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug"
        errorIfNotInlineSafe="false" evalLiteralExpressions="true"
        evalTreatment="Ignore" ignoreConditionalCompilation="false"
        ignorePreprocessorDefines="false" inlineSafeStrings="true"
        knownGlobalNamesList="" localRenaming="CrunchAll"
        macSafariQuirks="true" manualRenamesProperties="true" 
        noAutoRenameList="$super" preserveFunctionNames="false" 
        preserveImportantComments="true" quoteObjectLiteralProperties="false"
        removeFunctionExpressionNames="true" removeUnneededCode="true"
        renamePairs="" reorderScopeDeclarations="true"
        strictMode="false" stripDebugStatements="true"
        severity="0"/>
    </microsoftAjax>
    <yui>
      <css compressionType="Standard" removeComments="true"
        lineBreakPosition="-1" />
      <js compressionType="Standard" obfuscateJavascript="true"
        preserveAllSemicolons="false" disableOptimizations="false"
        ignoreEval="false" severity="0" lineBreakPosition="-1"
        encoding="UTF8" threadCulture="en-us" />
    </yui>
    <closure>
      <js>
        <remote 
          closureCompilerServiceApiUrl="http://closure-compiler.appspot.com/compile" 
          compilationLevel="Simple" prettyPrint="false" excludeDefaultExterns="false" 
          severity="0" />
        <local 
          javaVirtualMachinePath="" closureCompilerApplicationPath=""
          compilationLevel="Simple" prettyPrint="false" 
          languageSpec="EcmaScript3" thirdParty="true"
          processJqueryPrimitives="false" processClosurePrimitives="false"
          severity="0" />
      </js>
    </closure>
    <uglify>
      <js screwIe8="false" severity="0">
        <parsing strict="false" />
        <compression compress="true" sequences="true" propertiesDotNotation="true"
          deadCode="true" dropDebugger="true" unsafe="false"
          conditionals="true" comparisons="true" evaluate="true"
          booleans="true" loops="true" unused="true"
          hoistFunctions="true" hoistVars="false" ifReturn="true"
          joinVars="true" cascade="true"
          globalDefinitions="" />
        <mangling mangle="true" except="" eval="false"
          sort="false" topLevel="false" />
        <codeGeneration beautify="false" indentLevel="4" indentStart="0"
          quoteKeys="false" spaceColon="true" asciiOnly="false"
          inlineScript="false" width="80" maxLineLength="32000"
          ieProof="true" bracketize="false" semicolons="true"
          comments="false" preserveLine="false" />
      </js>
    </uglify>
    <packer>
      <js shrinkVariables="true" base62Encode="false" />
    </packer>
    <csso>
      <css disableRestructuring="false" />
    </csso>
  </bundleTransformer>
  <!-- /Bundle Transformer configuration settings --></configuration>

 

Also since version 1.2.1 Beta in the Web.config file for the bundleTransformer configuration section was implemented support for IntelliSense (implemented by using XML Schema, which is located in the BundleTransformer.Configuration.xsd file):

IntelliSense support when editing the  bundleTransformer configuration section in the Web.config file

Translators

Bundle Transformer: LESS and Bundle Transformer: LESS Lite

BundleTransformer.Less and BundleTransformer.LessLite contains translator-adapter LessTranslator (supports LESS version 1.4.2). This adapter makes translation of LESS-code to CSS-code. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

Bundle Transformer: Sass and SCSS

BundleTransformer.SassAndScss contains translator-adapter SassAndScssTranslator (based on code of the SassAndCoffee.Ruby library version 2.0.2.0 with Robert Wintermoose's Update and supports Sass version 3.2.9). This adapter makes translation of Sass- and SCSS-code to CSS-code. Also contains HTTP-handler SassAndScssAssetHandler, which is responsible for text output of translated Sass- or SCSS-asset.

Bundle Transformer: CoffeeScript

BundleTransformer.CoffeeScript contains translator-adapter CoffeeScriptTranslator (supports CoffeeScript version 1.6.3). This adapter makes translation of CoffeeScript-code to JS-code. Also contains HTTP-handler CoffeeScriptAssetHandler, which is responsible for text output of translated CoffeeScript-asset.

Bundle Transformer: TypeScript

BundleTransformer.TypeScript contains translator-adapter TypeScriptTranslator (supports TypeScript version 0.9.1). This adapter makes translation of TypeScript-code to JS-code. Also contains HTTP-handler TypeScriptAssetHandler, which is responsible for text output of translated TypeScript-asset.

When using the types declared in other files, you need add to code the references to these files by using the "reference" comments, as shown in the following example:

/// <reference path="jquery.d.ts" />
/// <reference path="TranslatorBadge.ts" />

/// <summary>
/// Creates colored badge for translator
/// </summary>
;class ColoredTranslatorBadge extends TranslatorBadge {
	public getTextColor(): string {
		/// <summary>
		/// Gets a text color of badge
		/// </summary>
		/// <returns type="String">
		/// Text color of badge
		/// </returns>
		return this.$linkElem.css("color"); 
	}

	public setTextColor(color: string): void {
		/// <summary>
		/// Sets a text color of badge
		/// </summary>
		/// <param name="color" type="String">
		/// Text color of badge
		/// </param>
		this.$linkElem.css("color", color);
	}

	public getBorderColor(): string {
		/// <summary>
		/// Gets a border color of badge
		/// </summary>
		/// <returns type="String">
		/// Border color of badge
		/// </returns>
		return this.$badgeElem.css("border-color");
	} 

	public setBorderColor(color: string) {
		/// <summary>
		/// Sets a border color of badge
		/// </summary>
		/// <param name="color" type="String">
		/// Border color of badge
		/// </param>
		this.$badgeElem.css("border-color", color);
	}
}

Minifiers

Bundle Transformer: Microsoft Ajax

BundleTransformer.MicrosoftAjax contains 2 minifier-adapters: MicrosoftAjaxCssMinifier (for minification of CSS-code) and MicrosoftAjaxJsMinifier (for minification of JS-code). These adapters perform minification using the Microsoft Ajax Minifier.

To make MicrosoftAjaxCssMinifier is the default CSS-minifier and MicrosoftAjaxJsMinifier is the default JS-minifier, you need to make changes to the Web.config file. In defaultMinifier attribute of \configuration\bundleTransformer\core\css element must be set value equal to MicrosoftAjaxCssMinifier, and in same attribute of \configuration\bundleTransformer\core\js element - MicrosoftAjaxJsMinifier.

Bundle Transformer: YUI

BundleTransformer.Yui contains 2 minifier-adapters: YuiCssMinifier (for minification of CSS-code) and YuiJsMinifier (for minification of JS-code). These adapters perform minification using the YUI Compressor for .NET.

To make YuiCssMinifier is the default CSS-minifier and YuiJsMinifier is the default JS-minifier, you need to make changes to the Web.config file. In defaultMinifier attribute of \configuration\bundleTransformer\core\css element must be set value equal to YuiCssMinifier, and in same attribute of \configuration\bundleTransformer\core\js element - YuiJsMinifier.

Bundle Transformer: Closure

BundleTransformer.Closure contains 2 minifier-adapters for minification of JS-code: ClosureRemoteJsMinifier and ClosureLocalJsMinifier. ClosureRemoteJsMinifier is based on the Google Closure Compiler Service API and requires a permanent connection to Internet. ClosureLocalJsMinifier is based on the Google Closure Compiler Application and for their work requires latest version of file compiler.jar.

To make ClosureRemoteJsMinifier or ClosureLocalJsMinifier is the default JS-minifier, you need to make changes to the Web.config file. In the defaultMinifier attribute of the \configuration\bundleTransformer\core\js element must be set value equal to ClosureRemoteJsMinifier or ClosureLocalJsMinifier.

To start using ClosureLocalJsMinifier need to make the following preliminary work:

  1. On your computer must be installed Java 6 or higher. Latest version of Java can be downloaded at the following URL - http://www.java.com/download/.
  2. You need to download latest version of the Google Closure Compiler Application, which is located on the URL - http://closure-compiler.googlecode.com/files/compiler-latest.zip.
  3. Unzip the downloaded archive and copy the file compiler.jar in some directory on disk of your computer.
  4. In Web.config file find the configuration/bundleTransformer/closure/local element, then set the javaVirtualMachinePath attribute to a value equal to the path to executable file of the Java Virtual Machine (java.exe), and set the closureCompilerApplicationPath attribute to a value equal to the path to JAR-file of the Google Closure Compiler Application (compiler.jar).

Bundle Transformer: JSMin

BundleTransformer.JsMin contains one minifier-adapter for minification of JS-code - CrockfordJsMinifier. CrockfordJsMinifier is based on the C# port of Douglas Crockford's JSMin (version of May 22 2007).

To make CrockfordJsMinifier is the default JS-minifier, you need to make changes to the Web.config file. In the defaultMinifier attribute of the \configuration\bundleTransformer\core\js element must be set value equal to CrockfordJsMinifier.

Bundle Transformer: UglifyJS

BundleTransformer.UglifyJs contains one minifier-adapter for minification of JS-code - UglifyJsMinifier. UglifyJsMinifier is based on the Mihai Bazon's UglifyJS version 2.3.6.

To make UglifyJsMinifier is the default JS-minifier, you need to make changes to the Web.config file. In the defaultMinifier attribute of the \configuration\bundleTransformer\core\js element must be set value equal to UglifyJsMinifier.

Bundle Transformer: Packer

BundleTransformer.Packer contains one minifier-adapter for minification of JS-code - EdwardsJsMinifier. EdwardsJsMinifier is based on the Dean Edwards' Packer version 3.0.

To make EdwardsJsMinifier is the default JS-minifier, you need to make changes to the Web.config file. In the defaultMinifier attribute of the \configuration\bundleTransformer\core\js element must be set value equal to EdwardsJsMinifier.

Bundle Transformer: CSSO

BundleTransformer.Csso contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.7.

As a JS-engine is used the Noesis Javascript .NET. BundleTransformer.Csso in runtime itself switches to correct version of the Noesis Javascript .NET (assemblies for different platforms are located in the App_Data/Noesis.Javascript directory). For correct working of the Noesis Javascript .NET require assemblies msvcp100.dll and msvcr100.dll from the Microsoft Visual C++ 2010.

If in your system does not assemblies msvcp100.dll and msvcr100.dll, then download and install the Microsoft Visual C++ 2010 Redistributable Package (x86, x64)

To make KryzhanovskyCssMinifier is the default CSS-minifier, you need to make changes to the Web.config file. In the defaultMinifier attribute of the \configuration\bundleTransformer\core\css element must be set value equal to KryzhanovskyCssMinifier.

Bundle Transformer: WebGrease

BundleTransformer.WG contains one minifier-adapter for minification of CSS-code - WgCssMinifier. WgCssMinifier is based on the WebGrease Semantic CSS-minifier version 1.3.0.

To make WgCssMinifier is the default CSS-minifier, you need to make changes to the Web.config file. In the defaultMinifier attribute of the \configuration\bundleTransformer\core\css element must be set value equal to WgCssMinifier.

Last edited Aug 11, 2013 at 3:49 PM by Taritsyn, version 2

Comments

No comments yet.