Quantcast
Channel: Bundle Transformer - a modular extension for ASP.NET Web Optimization Framework
Viewing all 2358 articles
Browse latest View live

New Post: Do not use *.min.js

$
0
0

I use last versions of:

 

bundles.Add(new Bundle("~/JS/Core", jsTransformer) { Orderer = nullOrderer }.Include(

 "~/Scripts/jquery-{version}.js", 

"~/Scripts/jquery-ui-{version}.js",  

 

"~/Scripts/jquery-ui-i18n.js",  

"~/Scripts/jquery.validate.js",

"~/Scripts/jquery.validate.unobtrusive.js", -> first error on this library

"~/Scripts/jquery.globalize/globalize.js",

"~/Scripts/jquery.globalize/cultures/globalize.culture.uk.js",

"~/Scripts/json2.js",

"~/Scripts/autoNumeric.js",

"~/Scripts/jquery.qtip.js"));


New Post: Do not use *.min.js

$
0
0

Usually when compressing YUICompressor changes the text encoding of JS-files. Perhaps some of the libraries has incorrect text encodings. Try convert libraries to UTF-8.

New Post: Do not use *.min.js

$
0
0

YUICompressor works fine if there is no compressed files, which it uses to optimize the speed, passing the original files. The problem may be in the encoding, but to change it even more inconvenient than just delete the compressed files from the project. I want to completely trust the Bundle Transformer and a YUICompressor that they compressed all the files without using compressed versions. Thank you.

Source code checked in, #7f7ca15a1c87

$
0
0
Version 1.6.5.0 1. In the configuration elements css and js added the usePreMinifiedFiles attribute, which enables/disables usage of pre-minified files; 2. Added translator-adapter, which produces translation of TypeScript-code to JS-code; 3. In BundleTransformer.MicrosoftAjax added support of the Microsoft Ajax Minifier 4.69; 4. In BundleTransformer.Yui added support of the YUI Compressor for .NET 2.1.0.0; 5. In BundleTransformer.Csso added support of the CSSO version 1.3.4.

Source code checked in, #911ef34a2653

$
0
0
Version 1.6.5.0 (added file StringExtensions.cs)

Released: Bundle Transformer 1.6.5 (Oct 12, 2012)

$
0
0
Version: 1.6.5
Published: 10/12/2012

  1. In the configuration elements css and js added the usePreMinifiedFiles attribute, which enables/disables usage of pre-minified files;
  2. Added translator-adapter, which produces translation of TypeScript-code to JS-code;
  3. In BundleTransformer.MicrosoftAjax added support of the Microsoft Ajax Minifier 4.69;
  4. In BundleTransformer.Yui added support of the YUI Compressor for .NET 2.1.0.0;
  5. In BundleTransformer.Csso added support of the CSSO version 1.3.4.

NuGet Packages

Core Translators Minifiers

Created Release: Bundle Transformer 1.6.5 (Oct 12, 2012)

$
0
0
Version: 1.6.5
Published: 10/12/2012

  1. In the configuration elements css and js added the usePreMinifiedFiles attribute, which enables/disables usage of pre-minified files;
  2. Added translator-adapter, which produces translation of TypeScript-code to JS-code;
  3. In BundleTransformer.MicrosoftAjax added support of the Microsoft Ajax Minifier 4.69;
  4. In BundleTransformer.Yui added support of the YUI Compressor for .NET 2.1.0.0;
  5. In BundleTransformer.Csso added support of the CSSO version 1.3.4.

NuGet Packages

Core Translators Minifiers

Updated Wiki: Home

$
0
0

Project Description

Bundle Transformer - a modular extension for System.Web.Optimization (also known as the Microsoft ASP.NET Web Optimization Framework). Classes CssTransformer and JsTransformer, included in the core of Bundle Transformer, implement interface IBundleTransform. They are intended to replace the standard classes CssMinify and JsMinify.

The main differences classes CssTransformer and JsTransformer from standard implementations: automatic removal of duplicate assets, ability to exclude unnecessary assets when adding assets from a directory, support processing of JS-files with *.debug.js extensions, does not produce the re-minification of code of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (for CssTransformer), etc. These classes do not produce the minification of code in runtime, but this feature can be added by installing of minifier-adapter (now available adapters based on Microsoft Ajax Minifier, YUI Compressor for .NET, Google Closure Compiler, Douglas Crockford's JSMin, Mihai Bazon's UglifyJS, Dean Edwards' Packer, Sergey Kryzhanovsky's CSSO (CSS Optimizer) and WebGrease). In addition, you can also install translator-adapters that implement the translation of code on intermediate languages (LESS, Sass, SCSS, CoffeeScript and TypeScript).

This extension will help your web applications successfully pass a most part of the tests in YSlow.

NuGet Packages

Core

Translators

Minifiers


Updated Wiki: Bundle Transformer 1.6.5

$
0
0

Bundle Transformer 1.6.5

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. Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

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:

using System.Web.Optimization;

using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

namespace BundleTransformer.Example.Mvc
{
   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/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/TestLess.less",
            "~/Content/TestSass.sass",
            "~/Content/TestScss.scss");
         commonStylesBundle.Transforms.Add(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-2.*",
            "~/Scripts/TestCoffeeScript.coffee");
         commonScriptsBundle.Transforms.Add(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         ...
      }
   }
}

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/CommonScripts")
      @RenderSection("scripts", required: false)
   </body>
</html>

Classes CssTransformer and JsTransformer produce processing of CSS- and JavaScript-files. Class NullOrderer disables the built-in sorting mechanism and save assets sorted in the order they are declared.

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

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory");
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.IncludeDirectory("~/Scripts/", "*.js");
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" />
      <section name="less" 
        type="BundleTransformer.LessLite.Configuration.LessLiteSettings" />
      <section name="sassAndScss" 
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" />
      <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" />
      <section name="closure" 
        type="BundleTransformer.Closure.Configuration.ClosureSettings" />
      <section name="uglify" 
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings" />
      <section name="packer" 
        type="BundleTransformer.Packer.Configuration.PackerSettings" />
      <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" />
    </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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" />
      <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" />
      <!-- /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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" 
        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="" />
      <!-- /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">
        <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.LessLite.Translators.LessTranslator, BundleTransformer.LessLite"
            enabled="true" />
          <add name="SassAndScssTranslator"
            type="BundleTransformer.SassAndScss.Translators.SassAndScssTranslator, BundleTransformer.SassAndScss" 
            enabled="true" />
        </translators>
      </css>
      <js defaultMinifier="NullMinifier">
        <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" />
        </translators>
      </js>
      <assetHandler clientCacheDurationInDays="365" enableCompression="true"
        useLastModifiedHeader="true" useETagHeader="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" severity="0" />
    <sassAndScss useNativeMinification="false" />
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" 
        ignoreErrorList="" indentSize="4" minifyExpressions="true" 
        outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" 
        termSemicolons="false" severity="0" />
      <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" 
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" 
        evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" 
        indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" 
        localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" 
        noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine"
        preprocessorDefineList="" preserveFunctionNames="false" 
        preserveImportantComments="true" removeFunctionExpressionNames="true" 
        removeUnneededCode="true" renamePairs="" strictMode="false" 
        stripDebugStatements="true" termSemicolons="false" 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>
        <parser strictSemicolons="false" />
        <mangler mangle="true" topLevel="false" defines="" 
          except="" noFunctions="false" />
        <squeezer makeSequences="true" deadCode="true" unsafe="false" />
        <codeGenerator beautify="false" indentStart="0" indentLevel="4" 
          quoteKeys="false" spaceColon="false" asciiOnly="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:

 

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

Translators

Bundle Transformer: LESS

BundleTransformer.Less contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the dotless. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

To make LessAssetHandler is the default HTTP-handler for LESS-assets, you need to make changes to the Web.config file. In the configuration\system.web\httpHandlers element you need to find the following code:

<add path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler, dotless.Core" />

And replace it with:

<add path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />

Then in the configuration\system.webServer\handlers element you need to find the following code:

<add name="dotless" path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler,dotless.Core" 
resourceType
="File" preCondition="" />

And replace it with:

<add name="LessAssetHandler" path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
   resourceType="File" preCondition="" />

Bundle Transformer: LESS Lite

BundleTransformer.LessLite contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the DotlessClientOnly. 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, which produces translation of Sass- and SCSS-code to CSS-code by using the SassAndCoffee.Ruby. 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.3.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.8.0). 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.

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 1.3.3.

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 (x86 or x64 version) contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.4.

As a JS-engine is used the Noesis Javascript .NET. 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.1.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.

Updated Wiki: Documentation

Updated Wiki: Bundle Transformer 1.6.5

$
0
0

Bundle Transformer 1.6.5

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. Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

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:

using System.Web.Optimization;

using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

namespace BundleTransformer.Example.Mvc
{
   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/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/TestLess.less",
            "~/Content/TestSass.sass",
            "~/Content/TestScss.scss");
         commonStylesBundle.Transforms.Add(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-2.*",
            "~/Scripts/TestCoffeeScript.coffee");
         commonScriptsBundle.Transforms.Add(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         ...
      }
   }
}

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/CommonScripts")
      @RenderSection("scripts", required: false)
   </body>
</html>

Classes CssTransformer and JsTransformer produce processing of CSS- and JavaScript-files. Class NullOrderer disables the built-in sorting mechanism and save assets sorted in the order they are declared.

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

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory");
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.IncludeDirectory("~/Scripts/", "*.js");
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" />
      <section name="less" 
        type="BundleTransformer.LessLite.Configuration.LessLiteSettings" />
      <section name="sassAndScss" 
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" />
      <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" />
      <section name="closure" 
        type="BundleTransformer.Closure.Configuration.ClosureSettings" />
      <section name="uglify" 
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings" />
      <section name="packer" 
        type="BundleTransformer.Packer.Configuration.PackerSettings" />
      <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" />
    </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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" />
      <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" />
      <!-- /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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" 
        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="" />
      <!-- /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">
        <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.LessLite.Translators.LessTranslator, BundleTransformer.LessLite"
            enabled="true" />
          <add name="SassAndScssTranslator"
            type="BundleTransformer.SassAndScss.Translators.SassAndScssTranslator, BundleTransformer.SassAndScss" 
            enabled="true" />
        </translators>
      </css>
      <js defaultMinifier="NullMinifier">
        <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" />
        </translators>
      </js>
      <assetHandler clientCacheDurationInDays="365" enableCompression="true"
        useLastModifiedHeader="true" useETagHeader="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" severity="0" />
    <sassAndScss useNativeMinification="false" />
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" 
        ignoreErrorList="" indentSize="4" minifyExpressions="true" 
        outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" 
        termSemicolons="false" severity="0" />
      <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" 
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" 
        evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" 
        indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" 
        localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" 
        noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine"
        preprocessorDefineList="" preserveFunctionNames="false" 
        preserveImportantComments="true" removeFunctionExpressionNames="true" 
        removeUnneededCode="true" renamePairs="" strictMode="false" 
        stripDebugStatements="true" termSemicolons="false" 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>
        <parser strictSemicolons="false" />
        <mangler mangle="true" topLevel="false" defines="" 
          except="" noFunctions="false" />
        <squeezer makeSequences="true" deadCode="true" unsafe="false" />
        <codeGenerator beautify="false" indentStart="0" indentLevel="4" 
          quoteKeys="false" spaceColon="false" asciiOnly="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:

 

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

Translators

Bundle Transformer: LESS

BundleTransformer.Less contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the dotless. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

To make LessAssetHandler is the default HTTP-handler for LESS-assets, you need to make changes to the Web.config file. In the configuration\system.web\httpHandlers element you need to find the following code:

<add path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler, dotless.Core" />

And replace it with:

<add path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />

Then in the configuration\system.webServer\handlers element you need to find the following code:

<add name="dotless" path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler,dotless.Core" 
resourceType
="File" preCondition="" />

And replace it with:

<add name="LessAssetHandler" path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
   resourceType="File" preCondition="" />

Bundle Transformer: LESS Lite

BundleTransformer.LessLite contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the DotlessClientOnly. 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, which produces translation of Sass- and SCSS-code to CSS-code by using the SassAndCoffee.Ruby. 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.3.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.8.0). 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.

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 1.3.3.

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 (x86 or x64 version) contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.4.

As a JS-engine is used the Noesis Javascript .NET. 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.1.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.

Updated Wiki: Bundle Transformer 1.6.5

$
0
0

Bundle Transformer 1.6.5

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. Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

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:

using System.Web.Optimization;

using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

namespace BundleTransformer.Example.Mvc
{
   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/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/TestLess.less",
            "~/Content/TestSass.sass",
            "~/Content/TestScss.scss");
         commonStylesBundle.Transforms.Add(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-2.*",
            "~/Scripts/TestCoffeeScript.coffee");
         commonScriptsBundle.Transforms.Add(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         ...
      }
   }
}

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/CommonScripts")
      @RenderSection("scripts", required: false)
   </body>
</html>

Classes CssTransformer and JsTransformer produce processing of CSS- and JavaScript-files. Class NullOrderer disables the built-in sorting mechanism and save assets sorted in the order they are declared.

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

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory");
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.IncludeDirectory("~/Scripts/", "*.js");
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" />
      <section name="less" 
        type="BundleTransformer.LessLite.Configuration.LessLiteSettings" />
      <section name="sassAndScss" 
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" />
      <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" />
      <section name="closure" 
        type="BundleTransformer.Closure.Configuration.ClosureSettings" />
      <section name="uglify" 
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings" />
      <section name="packer" 
        type="BundleTransformer.Packer.Configuration.PackerSettings" />
      <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" />
    </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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" />
      <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" />
      <!-- /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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" 
        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="" />
      <!-- /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">
        <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.LessLite.Translators.LessTranslator, BundleTransformer.LessLite"
            enabled="true" />
          <add name="SassAndScssTranslator"
            type="BundleTransformer.SassAndScss.Translators.SassAndScssTranslator, BundleTransformer.SassAndScss" 
            enabled="true" />
        </translators>
      </css>
      <js defaultMinifier="NullMinifier">
        <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" />
        </translators>
      </js>
      <assetHandler clientCacheDurationInDays="365" enableCompression="true"
        useLastModifiedHeader="true" useETagHeader="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" severity="0" />
    <sassAndScss useNativeMinification="false" />
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" 
        ignoreErrorList="" indentSize="4" minifyExpressions="true" 
        outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" 
        termSemicolons="false" severity="0" />
      <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" 
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" 
        evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" 
        indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" 
        localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" 
        noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine"
        preprocessorDefineList="" preserveFunctionNames="false" 
        preserveImportantComments="true" removeFunctionExpressionNames="true" 
        removeUnneededCode="true" renamePairs="" strictMode="false" 
        stripDebugStatements="true" termSemicolons="false" 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>
        <parser strictSemicolons="false" />
        <mangler mangle="true" topLevel="false" defines="" 
          except="" noFunctions="false" />
        <squeezer makeSequences="true" deadCode="true" unsafe="false" />
        <codeGenerator beautify="false" indentStart="0" indentLevel="4" 
          quoteKeys="false" spaceColon="false" asciiOnly="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:

 

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

Translators

Bundle Transformer: LESS

BundleTransformer.Less contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the dotless. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

To make LessAssetHandler is the default HTTP-handler for LESS-assets, you need to make changes to the Web.config file. In the configuration\system.web\httpHandlers element you need to find the following code:

<add path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler, dotless.Core" />

And replace it with:

<add path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />

Then in the configuration\system.webServer\handlers element you need to find the following code:

<add name="dotless" path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler,dotless.Core" 
resourceType
="File" preCondition="" />

And replace it with:

<add name="LessAssetHandler" path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
   resourceType="File" preCondition="" />

Bundle Transformer: LESS Lite

BundleTransformer.LessLite contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the DotlessClientOnly. 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, which produces translation of Sass- and SCSS-code to CSS-code by using the SassAndCoffee.Ruby. 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.3.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.8.0). 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.

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 1.3.3.

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 (x86 or x64 version) contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.4.

As a JS-engine is used the Noesis Javascript .NET. 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.1.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.

Updated Wiki: Bundle Transformer 1.6.5

$
0
0

Bundle Transformer 1.6.5

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. Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

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:

using System.Web.Optimization;

using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

namespace BundleTransformer.Example.Mvc
{
   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/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/TestLess.less",
            "~/Content/TestSass.sass",
            "~/Content/TestScss.scss");
         commonStylesBundle.Transforms.Add(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-2.*",
            "~/Scripts/TestCoffeeScript.coffee");
         commonScriptsBundle.Transforms.Add(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         ...
      }
   }
}

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/CommonScripts")
      @RenderSection("scripts", required: false)
   </body>
</html>

Classes CssTransformer and JsTransformer produce processing of CSS- and JavaScript-files. Class NullOrderer disables the built-in sorting mechanism and save assets sorted in the order they are declared.

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

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory");
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.IncludeDirectory("~/Scripts/", "*.js");
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" />
      <section name="less" 
        type="BundleTransformer.LessLite.Configuration.LessLiteSettings" />
      <section name="sassAndScss" 
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" />
      <section name="typeScript" 
        type="BundleTransformer.TypeScript.Configuration.TypeScriptSettings" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" />
      <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" />
      <section name="closure" 
        type="BundleTransformer.Closure.Configuration.ClosureSettings" />
      <section name="uglify" 
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings" />
      <section name="packer" 
        type="BundleTransformer.Packer.Configuration.PackerSettings" />
      <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" />
    </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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" />
      <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="*.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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" 
        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="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">
        <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.LessLite.Translators.LessTranslator, BundleTransformer.LessLite"
            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"
        useLastModifiedHeader="true" useETagHeader="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" severity="0" />
    <sassAndScss useNativeMinification="false" />
    <typeScript useNativeMinification="false" useDefaultLib="true" 
      propagateConstants="false" errorOnWith="true"
      inferPropertiesFromThisAssignment="false" 
      codeGenTarget="EcmaScript3">
      <style bitwise="false" blockInCompoundStatement="false" 
        eqEqEq="false" forIn="false" emptyBlocks="true" 
        newMustBeUsed="false" requireSemicolons="false" 
        assignmentInConditions="false" eqNull="false" 
        evalOk="true" innerScopeDeclarationsEscape="true" 
        functionsInLoops="true" reDeclareLocal="true" 
        literalSubscript="true" implicitAny="false" />
    </typeScript>
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" 
        ignoreErrorList="" indentSize="4" minifyExpressions="true" 
        outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" 
        termSemicolons="false" severity="0" />
      <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" 
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" 
        evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" 
        indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" 
        localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" 
        noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine"
        preprocessorDefineList="" preserveFunctionNames="false" 
        preserveImportantComments="true" removeFunctionExpressionNames="true" 
        removeUnneededCode="true" renamePairs="" strictMode="false" 
        stripDebugStatements="true" termSemicolons="false" 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>
        <parser strictSemicolons="false" />
        <mangler mangle="true" topLevel="false" defines="" 
          except="" noFunctions="false" />
        <squeezer makeSequences="true" deadCode="true" unsafe="false" />
        <codeGenerator beautify="false" indentStart="0" indentLevel="4" 
          quoteKeys="false" spaceColon="false" asciiOnly="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:

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

Translators

Bundle Transformer: LESS

BundleTransformer.Less contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the dotless. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

To make LessAssetHandler is the default HTTP-handler for LESS-assets, you need to make changes to the Web.config file. In the configuration\system.web\httpHandlers element you need to find the following code:

<add path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler, dotless.Core" />

And replace it with:

<add path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />

Then in the configuration\system.webServer\handlers element you need to find the following code:

<add name="dotless" path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler,dotless.Core" 
resourceType
="File" preCondition="" />

And replace it with:

<add name="LessAssetHandler" path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
   resourceType="File" preCondition="" />

Bundle Transformer: LESS Lite

BundleTransformer.LessLite contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the DotlessClientOnly. 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, which produces translation of Sass- and SCSS-code to CSS-code by using the SassAndCoffee.Ruby. 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.3.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.8.0). 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.

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 1.3.3.

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 (x86 or x64 version) contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.4.

As a JS-engine is used the Noesis Javascript .NET. 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.1.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.

Updated Wiki: Bundle Transformer 1.6.5

$
0
0

Bundle Transformer 1.6.5

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. Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

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:

using System.Web.Optimization;

using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

namespace BundleTransformer.Example.Mvc
{
   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/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/TestLess.less",
            "~/Content/TestSass.sass",
            "~/Content/TestScss.scss");
         commonStylesBundle.Transforms.Add(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-2.*",
            "~/Scripts/TestCoffeeScript.coffee");
         commonScriptsBundle.Transforms.Add(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         ...
      }
   }
}

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/CommonScripts")
      @RenderSection("scripts", required: false)
   </body>
</html>

Classes CssTransformer and JsTransformer produce processing of CSS- and JavaScript-files. Class NullOrderer disables the built-in sorting mechanism and save assets sorted in the order they are declared.

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

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory");
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.IncludeDirectory("~/Scripts/", "*.js");
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" />
      <section name="less" 
        type="BundleTransformer.LessLite.Configuration.LessLiteSettings" />
      <section name="sassAndScss" 
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" />
      <section name="typeScript" 
        type="BundleTransformer.TypeScript.Configuration.TypeScriptSettings" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" />
      <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" />
      <section name="closure" 
        type="BundleTransformer.Closure.Configuration.ClosureSettings" />
      <section name="uglify" 
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings" />
      <section name="packer" 
        type="BundleTransformer.Packer.Configuration.PackerSettings" />
      <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" />
    </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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" />
      <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="*.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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" 
        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="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">
        <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.LessLite.Translators.LessTranslator, BundleTransformer.LessLite"
            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"
        useLastModifiedHeader="true" useETagHeader="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" severity="0" />
    <sassAndScss useNativeMinification="false" />
    <typeScript useNativeMinification="false" useDefaultLib="true" 
      propagateConstants="false" errorOnWith="true"
      inferPropertiesFromThisAssignment="false" 
      codeGenTarget="EcmaScript3">
      <style bitwise="false" blockInCompoundStatement="false" 
        eqEqEq="false" forIn="false" emptyBlocks="true" 
        newMustBeUsed="false" requireSemicolons="false" 
        assignmentInConditions="false" eqNull="false" 
        evalOk="true" innerScopeDeclarationsEscape="true" 
        functionsInLoops="true" reDeclareLocal="true" 
        literalSubscript="true" implicitAny="false" />
    </typeScript>
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" 
        ignoreErrorList="" indentSize="4" minifyExpressions="true" 
        outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" 
        termSemicolons="false" severity="0" />
      <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" 
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" 
        evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" 
        indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" 
        localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" 
        noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine"
        preprocessorDefineList="" preserveFunctionNames="false" 
        preserveImportantComments="true" removeFunctionExpressionNames="true" 
        removeUnneededCode="true" renamePairs="" strictMode="false" 
        stripDebugStatements="true" termSemicolons="false" 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>
        <parser strictSemicolons="false" />
        <mangler mangle="true" topLevel="false" defines="" 
          except="" noFunctions="false" />
        <squeezer makeSequences="true" deadCode="true" unsafe="false" />
        <codeGenerator beautify="false" indentStart="0" indentLevel="4" 
          quoteKeys="false" spaceColon="false" asciiOnly="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:

 

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

Translators

Bundle Transformer: LESS

BundleTransformer.Less contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the dotless. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

To make LessAssetHandler is the default HTTP-handler for LESS-assets, you need to make changes to the Web.config file. In the configuration\system.web\httpHandlers element you need to find the following code:

<add path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler, dotless.Core" />

And replace it with:

<add path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />

Then in the configuration\system.webServer\handlers element you need to find the following code:

<add name="dotless" path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler,dotless.Core" 
resourceType
="File" preCondition="" />

And replace it with:

<add name="LessAssetHandler" path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
   resourceType="File" preCondition="" />

Bundle Transformer: LESS Lite

BundleTransformer.LessLite contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the DotlessClientOnly. 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, which produces translation of Sass- and SCSS-code to CSS-code by using the SassAndCoffee.Ruby. 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.3.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.8.0). 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 1.3.3.

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 (x86 or x64 version) contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.4.

As a JS-engine is used the Noesis Javascript .NET. 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.1.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.

Updated Wiki: Bundle Transformer 1.6.5

$
0
0

Bundle Transformer 1.6.5

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. Also recommend you read the Rick Anderson's posts about using of Microsoft ASP.NET Web Optimization Framework with Web Forms and Web Pages.

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:

using System.Web.Optimization;

using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

namespace BundleTransformer.Example.Mvc
{
   public class BundleConfig
   {
      public static void RegisterBundles(BundleCollection bundles)
      {
         var cssTransformer = new CssTransformer();
         var jsTransformer = new JsTransformer();
         var nullOrderer = new NullOrderer();

         var commonStylesBundle = new Bundle("~/Bundles/CommonStyles");
         commonStylesBundle.Include(
            "~/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/TestLess.less",
            "~/Content/TestSass.sass",
            "~/Content/TestScss.scss");
         commonStylesBundle.Transforms.Add(cssTransformer);
         commonStylesBundle.Orderer = nullOrderer;

         bundles.Add(commonStylesBundle);

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

         bundles.Add(modernizrBundle);

         var commonScriptsBundle = new Bundle("~/Bundles/CommonScripts");
         commonScriptsBundle.Include("~/Scripts/MicrosoftAjax.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.unobtrusive-ajax.js",
            "~/Scripts/knockout-2.*",
            "~/Scripts/TestCoffeeScript.coffee");
         commonScriptsBundle.Transforms.Add(jsTransformer);
         commonScriptsBundle.Orderer = nullOrderer;

         bundles.Add(commonScriptsBundle);
         ...
      }
   }
}

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/CommonScripts")
      @RenderSection("scripts", required: false)
   </body>
</html>

Classes CssTransformer and JsTransformer produce processing of CSS- and JavaScript-files. Class NullOrderer disables the built-in sorting mechanism and save assets sorted in the order they are declared.

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

var jqueryUiStylesDirectoryBundle = new Bundle("~/Bundles/JqueryUiStylesDirectory");
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.IncludeDirectory("~/Scripts/", "*.js");
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" />
      <section name="less" 
        type="BundleTransformer.LessLite.Configuration.LessLiteSettings" />
      <section name="sassAndScss" 
        type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings" />
      <section name="typeScript" 
        type="BundleTransformer.TypeScript.Configuration.TypeScriptSettings" />
      <section name="microsoftAjax"
        type="BundleTransformer.MicrosoftAjax.Configuration.MicrosoftAjaxSettings" />
      <section name="yui" type="BundleTransformer.Yui.Configuration.YuiSettings" />
      <section name="closure" 
        type="BundleTransformer.Closure.Configuration.ClosureSettings" />
      <section name="uglify" 
        type="BundleTransformer.UglifyJs.Configuration.UglifySettings" />
      <section name="packer" 
        type="BundleTransformer.Packer.Configuration.PackerSettings" />
      <section name="csso" type="BundleTransformer.Csso.Configuration.CssoSettings" />
    </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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" />
      <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="*.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.LessLite.HttpHandlers.LessAssetHandler, BundleTransformer.LessLite" 
        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="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">
        <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.LessLite.Translators.LessTranslator, BundleTransformer.LessLite"
            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"
        useLastModifiedHeader="true" useETagHeader="true"
        serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false"
        disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" />
    </core>
    <less useNativeMinification="false" severity="0" />
    <sassAndScss useNativeMinification="false" />
    <typeScript useNativeMinification="false" useDefaultLib="true" 
      propagateConstants="false" errorOnWith="true"
      inferPropertiesFromThisAssignment="false" 
      codeGenTarget="EcmaScript3">
      <style bitwise="false" blockInCompoundStatement="false" 
        eqEqEq="false" forIn="false" emptyBlocks="true" 
        newMustBeUsed="false" requireSemicolons="false" 
        assignmentInConditions="false" eqNull="false" 
        evalOk="true" innerScopeDeclarationsEscape="true" 
        functionsInLoops="true" reDeclareLocal="true" 
        literalSubscript="true" implicitAny="false" />
    </typeScript>
    <microsoftAjax>
      <css allowEmbeddedAspNetBlocks="false" colorNames="Strict" commentMode="Important" 
        ignoreErrorList="" indentSize="4" minifyExpressions="true" 
        outputMode="SingleLine" blocksStartOnSameLine="NewLine" preprocessorDefineList="" 
        termSemicolons="false" severity="0" />
      <js allowEmbeddedAspNetBlocks="false" collapseToLiteral="true" 
        debugLookupList="Debug,$Debug,WAssert,Msn.Debug,Web.Debug" 
        evalTreatment="Ignore" ignoreConditionalCompilation="false" ignoreErrorList="" 
        indentSize="4" inlineSafeStrings="true" knownGlobalNamesList="" 
        localRenaming="CrunchAll" macSafariQuirks="true" minifyCode="true" 
        noAutoRenameList="$super" outputMode="SingleLine" blocksStartOnSameLine="NewLine"
        preprocessorDefineList="" preserveFunctionNames="false" 
        preserveImportantComments="true" removeFunctionExpressionNames="true" 
        removeUnneededCode="true" renamePairs="" strictMode="false" 
        stripDebugStatements="true" termSemicolons="false" 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>
        <parser strictSemicolons="false" />
        <mangler mangle="true" topLevel="false" defines="" 
          except="" noFunctions="false" />
        <squeezer makeSequences="true" deadCode="true" unsafe="false" />
        <codeGenerator beautify="false" indentStart="0" indentLevel="4" 
          quoteKeys="false" spaceColon="false" asciiOnly="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:

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

Translators

Bundle Transformer: LESS

BundleTransformer.Less contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the dotless. Also contains HTTP-handler LessAssetHandler, which is responsible for text output of translated LESS-asset.

To make LessAssetHandler is the default HTTP-handler for LESS-assets, you need to make changes to the Web.config file. In the configuration\system.web\httpHandlers element you need to find the following code:

<add path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler, dotless.Core" />

And replace it with:

<add path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" />

Then in the configuration\system.webServer\handlers element you need to find the following code:

<add name="dotless" path="*.less" verb="GET" 
   type="dotless.Core.LessCssHttpHandler,dotless.Core" 
resourceType
="File" preCondition="" />

And replace it with:

<add name="LessAssetHandler" path="*.less" verb="GET" 
   type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" 
   resourceType="File" preCondition="" />

Bundle Transformer: LESS Lite

BundleTransformer.LessLite contains translator-adapter LessTranslator, which produces translation of LESS-code to CSS-code by using NuGet-package the DotlessClientOnly. 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, which produces translation of Sass- and SCSS-code to CSS-code by using the SassAndCoffee.Ruby. 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.3.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.8.0). 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 1.3.3.

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 (x86 or x64 version) contains one minifier-adapter for minification of CSS-code - KryzhanovskyCssMinifier. KryzhanovskyCssMinifier is based on the Sergey Kryzhanovsky's CSSO (CSS Optimizer) version 1.3.4.

As a JS-engine is used the Noesis Javascript .NET. 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.1.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.


Updated Wiki: Bundle Transformer 1.6.2

Updated Wiki: Documentation

New Post: Do not use *.min.js

$
0
0

Hello, tstar!

I implement the feature, that you have requested, in the Bundle Transformer 1.6.5.

In the configuration elements css and js added the usePreMinifiedFiles attribute, which enables/disables usage of pre-minified files:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  ...
  <!-- Bundle Transformer configuration settings -->
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core>
      <css usePreMinifiedFiles="true">
        ...
      </css>
      <js usePreMinifiedFiles="true">
        ...
      </js>
      ...
    </core>
    ...
  </bundleTransformer>
  <!-- /Bundle Transformer configuration settings -->
  ...
</configuration>
Simply set to one of these attributes a value equal false.

New Post: Do not use *.min.js

$
0
0

Fantastic! It works! Thank you so much.

But at the first run I got error:

While minimizing the JS-code read from the file C: \Projects\Test\Scripts\jquery-1.8.2.js, using YUI JS-minifier error has occurred!
See more information about the error:

Object reference not set to an instance of an object.
Object reference not set to an instance of an object.
   в BundleTransformer.Yui.Minifiers.YuiJsMinifier.Minify(IList`1 assets)
   в BundleTransformer.Core.Transformers.TransformerBase.Minify(IList`1 assets)
   в BundleTransformer.Core.Transformers.JsTransformer.Transform(IList`1 assets, BundleResponse bundleResponse, HttpContextBase httpContext)
   в BundleTransformer.Core.Transformers.TransformerBase.Process(BundleContext context, BundleResponse response)
   в System.Web.Optimization.Bundle.ApplyTransforms(BundleContext context, String bundleContent, IEnumerable`1 bundleFiles)
   в System.Web.Optimization.Bundle.GenerateBundleResponse(BundleContext context)
   в System.Web.Optimization.Bundle.GetBundleResponse(BundleContext context)
   в System.Web.Optimization.Bundle.ProcessRequest(BundleContext context)
   в System.Web.Optimization.BundleHandler.ProcessRequest(HttpContext context)
   в System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   в System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

But the more I did not see this error.

But there was another problem - its YUICompressor .NET 2.1.0.0. It does not work if the form is used @Html.AntiForgeryToken() and [HttpPost][ValidateAntiForgeryToken] in controller. I have not updated it because of this problem. But Bundle Transformer 1.6.5 now has a hard link with YUICompressor .NET 2.1.0.0. Now the pages with forms is not working. Is it possible to go back to the old version of YUICompressor .NET, because it is a problem of library? And I can not find a solution on the Internet. In any case, I will show You an error message.

Type initializer "System.Web.Helpers.AntiForgery" threw an exception.
Type initializer "System.Web.Helpers.Claims.ClaimsIdentityConverter" threw an exception.
Could not load file or assembly "Microsoft.IdentityModel, Version = 3.5.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35" or one of its dependencies. Can not find the dynamic library DllImport.
Cannot find embedded resource assembly named Yahoo.Yui.Compressor.Resources.Microsoft.IdentityModel.dll
   in System.Web.Helpers.AntiForgery.Validate ()
   in System.Web.Mvc.ValidateAntiForgeryTokenAttribute.OnAuthorization (AuthorizationContext filterContext)
   in System.Web.Mvc.ControllerActionInvoker.InvokeAuthorizationFilters (ControllerContext controllerContext, IList `1 filters, ActionDescriptor actionDescriptor)
   in asyncCallback, Object asyncState)
   in System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult `1.Begin (AsyncCallback callback, Object state, Int32 timeout)
   in System.Web.Mvc.Async.AsyncControllerActionInvoker.BeginInvokeAction (ControllerContext controllerContext, String actionName, AsyncCallback callback, Object state)
   in System.Web.Mvc.Controller. <> c__DisplayClass1d. <BeginExecuteCore> b__17 (AsyncCallback asyncCallback, Object asyncState)
   in System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult `1.Begin (AsyncCallback callback, Object state, Int32 timeout)
   in System.Web.Mvc.Controller.BeginExecuteCore (AsyncCallback callback, Object state)
   in System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult `1.Begin (AsyncCallback callback, Object state, Int32 timeout)
   in System.Web.Mvc.Controller.BeginExecute (RequestContext requestContext, AsyncCallback callback, Object state)
   in System.Web.Mvc.Controller.System.Web.Mvc.Async.IAsyncController.BeginExecute (RequestContext requestContext, AsyncCallback callback, Object state)
   in System.Web.Mvc.MvcHandler. <> c__DisplayClass8. <BeginProcessRequest> b__2 (AsyncCallback asyncCallback, Object asyncState)
   in System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult `1.Begin (AsyncCallback callback, Object state, Int32 timeout)
   in System.Web.Mvc.MvcHandler.BeginProcessRequest (HttpContextBase httpContext, AsyncCallback callback, Object state)
   in System.Web.Mvc.MvcHandler.BeginProcessRequest (HttpContext httpContext, AsyncCallback callback, Object state)
   in System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.BeginProcessRequest (HttpContext context, AsyncCallback cb, Object extraData)
   in System.Web.HttpApplication.ExecuteStep (IExecutionStep step, Boolean & completedSynchronously)

Sorry for the large amount of text and my English.

Once again thank you for the cool library.

New Post: Do not use *.min.js

$
0
0

Unfortunately, YUICompressor. NET 2.1.0.0 already rollback is not possible.

Viewing all 2358 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>