Bundle Transformer: Летние обновления

Классы StyleTransformer и ScriptTransformer

Постпроцессоры

<configuration>
  …    
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core …>
      <css defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor" …>
        <postProcessors>
          <add name="UrlRewritingCssPostProcessor"
            type="BundleTransformer.Core.PostProcessors.UrlRewritingCssPostProcessor, BundleTransformer.Core"
            useInDebugMode="false" />
          <add name="AutoprefixCssPostProcessor"
            type="BundleTransformer.Autoprefixer.PostProcessors.AutoprefixCssPostProcessor, BundleTransformer.Autoprefixer"
            useInDebugMode="true" />
        </postProcessors>
      </css>
      …
    </core>
    …
  </bundleTransformer>
  …
</configuration>

1. UrlRewritingCssPostProcessor. Производит преобразование относительных путей в абсолютные (стандартная возможность Bundle Transformer, реализованная в виде постпроцессора).
2. AutoprefixCssPostProcessor. Добавляет поддержку Autoprefixer`а в Bundle Transformer.

Усовершенствованные отладочные HTTP-хэндлеры

using System.Collections.Generic;
using System.Web.Optimization;

using BundleTransformer.Core.Builders;
using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;
using BundleTransformer.Core.Translators;
using BundleTransformer.Less.Translators;

public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{
		var nullBuilder = new NullBuilder();
		var nullOrderer = new NullOrderer();

		var lessTranslator = new LessTranslator
		{
			GlobalVariables = "my-variable='Hurrah!'",
			ModifyVariables = "font-family-base='Comic Sans MS';body-bg=lime;font-size-h1=50px"
		};
		var styleTransformer = new StyleTransformer(
			new List<ITranslator> { lessTranslator });

		var commonStylesBundle = new Bundle("~/Bundles/BootstrapStyles");
		commonStylesBundle.Include("~/Content/bootstrap/bootstrap.less");
		commonStylesBundle.Builder = nullBuilder;
		commonStylesBundle.Transforms.Add(styleTransformer);
		commonStylesBundle.Orderer = nullOrderer;
		bundles.Add(commonStylesBundle);
	}
}

using System.Text;
using System.Web.Optimization;

public sealed class InjectContentItemTransform : IItemTransform
{
	private readonly string _beforeContent;
	private readonly string _afterContent;

	public InjectContentItemTransform(string beforeContent, string afterContent)
	{
		_beforeContent = beforeContent ?? string.Empty;
		_afterContent = afterContent ?? string.Empty;
	}

	public string Process(string includedVirtualPath, string input)
	{
		if (_beforeContent.Length == 0 && _afterContent.Length == 0)
		{
			return input;
		}

		var contentBuilder = new StringBuilder();
		if (_beforeContent.Length > 0)
		{
			contentBuilder.AppendLine(_beforeContent);
		}
		contentBuilder.AppendLine(input);
		if (_afterContent.Length > 0)
		{
			contentBuilder.AppendLine(_afterContent);
		}

		return contentBuilder.ToString();
	}
}

using System.Web.Optimization;

using BundleTransformer.Core.Bundles;
using BundleTransformer.Core.Orderers;

public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{
		var nullOrderer = new NullOrderer();

		const string beforeLessCodeToInject = @"@my-variable: 'Hurrah!';";
		const string afterLessCodeToInject = @"@font-family-base: 'Comic Sans MS';
@body-bg: lime;
@font-size-h1: 50px;";

		var commonStylesBundle = new CustomStyleBundle("~/Bundles/BootstrapStyles");
		commonStylesBundle.Include(
		   "~/Content/bootstrap/bootstrap.less",
		   new InjectContentItemTransform(beforeLessCodeToInject, afterLessCodeToInject));
		commonStylesBundle.Orderer = nullOrderer;
		bundles.Add(commonStylesBundle);
	}
}

…
using BundleTransformer.Core.Resolvers;

public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{
		BundleResolver.Current = new CustomBundleResolver();
		…
	}
}

<link
   href="/Content/bootstrap/bootstrap.less?bundleVirtualPath=%7e%2fBundles%2fBootstrapStyles"
   rel="stylesheet">

1. CssAssetHandler. Для обработки CSS-файлов.
2. JsAssetHandler. Для обработки JavaScript-файлов.

<configuration>
  …
  <system.webServer>
    …
    <handlers>
      …
      <add name="CssAssetHandler" path="*.css" verb="GET" 
        type="BundleTransformer.Core.HttpHandlers.CssAssetHandler, BundleTransformer.Core" 
        resourceType="File" preCondition="" />
      <add name="JsAssetHandler" path="*.js" verb="GET" 
        type="BundleTransformer.Core.HttpHandlers.JsAssetHandler, BundleTransformer.Core" 
        resourceType="File" preCondition="" />
      …
    </handlers>
    …
  </system.webServer>
  …
</configuration>

Сопоставление расширений файлов и типов ресурсов в файле Web.config

<configuration>
  …
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core …>
      <css …>
        …
        <fileExtensions>
          <add fileExtension=".css" assetTypeCode="Css" />
          <add fileExtension=".less" assetTypeCode="Less" />
          <add fileExtension=".sass" assetTypeCode="Sass" />
          <add fileExtension=".scss" assetTypeCode="Scss" />
        </fileExtensions>
      </css>
      <js …>
        …
        <fileExtensions>
          <add fileExtension=".js" assetTypeCode="JavaScript" />
          <add fileExtension=".coffee" assetTypeCode="CoffeeScript" />
          <add fileExtension=".litcoffee" assetTypeCode="LiterateCoffeeScript" />
          <add fileExtension=".coffee.md" assetTypeCode="LiterateCoffeeScript" />
          <add fileExtension=".ts" assetTypeCode="TypeScript" />
          <add fileExtension=".mustache" assetTypeCode="Mustache" />
          <add fileExtension=".handlebars" assetTypeCode="Handlebars" />
          <add fileExtension=".hbs" assetTypeCode="Handlebars" />
        </fileExtensions>
      </js>
      …
    </core>
    …
  </bundleTransformer>
  …
</configuration>

1. Не нужно хранить неиспользуемые сопоставления. Как правило, в реальных проектах не нужно устанавливать все виды трансляторов (например, одновременное использование LESS и Sass встречается очень редко), таким образом в проекте будет храниться меньшее количество сопоставлений.
2. Возможность создания неофициальных модулей-трансляторов. Поскольку теперь нет зависимости от кода ядра, то у пользователей Bundle Transformer появилась возможность создавать собственные модули-трансляторы. Примером такого модуля может служить NuGet-пакет AngularBundle, при установке которого в файл Web.config добавляется следующее сопоставление:
   
   

   <configuration>
     …
     <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
       <core>
         …
         <js …>
           …
           <fileExtensions>
             …
             <add fileExtension=".html" assetTypeCode="AngularTemplate" />
             …
           </fileExtensions>
         </js>
         …
       </core>
       …
     </bundleTransformer>
     …
   </configuration>

   
   
3. Привязка новых расширений файлов к существующим модулям-трансляторам. Например, если мы хотим, чтобы модуль BundleTransformer.Hogan начал обрабатывать файлы с расширением .html, нам нужно просто добавить следующий код в файл Web.config:
   
   

   <configuration>
     …
     <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
       <core …>
         …
         <js …>
           …
           <fileExtensions>
             …
             <add fileExtension=".html" assetTypeCode="Mustache" />
             …
           </fileExtensions>
         </js>
         …
       </core>
       …
     </bundleTransformer>
     …
     <system.webServer>
       …
       <handlers>
         …
         <add name="HtmlAssetHandler" path="*.html" verb="GET"
           type="BundleTransformer.Hogan.HttpHandlers.HoganAssetHandler, BundleTransformer.Hogan"
           resourceType="File" preCondition="" />
         …
       </handlers>
       …
     </system.webServer>
     …
   </configuration>

Объединение кода файлов перед минимизацией

1. Появляется возможность объединять в один бандл разные типы ресурсов (например, CSS-, LESS- и Sass-файлы).
2. Не производится повторная минимизация предварительно минимизированных файлов (файлы с расширениями .min.css и .min.js), что в большинстве случаев увеличивает скорость минимизации при первоначальном обращении к бандлу.

<configuration>
  …
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core 
      <css … combineFilesBeforeMinification="true">
        …
      </css>
      <js … combineFilesBeforeMinification="true">
        …
      </js>
      …
    </core>
    …
  </bundleTransformer>
  …
</configuration>

Новые модули

1. Постпроцессор BundleTransformer.Autoprefixer
2. Транслятор BundleTransformer.Handlebars
3. Транслятор BundleTransformer.Hogan

Bundle Transformer: Autoprefixer

1. Добавить постпроцессор AutoprefixCssPostProcessor в конец списка активных CSS-постпроцессоров, который задается в атрибуте defaultPostProcessors конфигурационного элемента /configuration/bundleTransformer/core/css.
2. Зарегистрировать отладочный HTTP-хэндлер CssAssetHandler в файле Web.config (требуется для режима отладки).
3. Зарегистрировать экземпляр класса CustomBundleResolver в качестве текущего BundleResolver`а (требуется для режима отладки).

<configuration>
  …
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    …
    <autoprefixer cascade="true" safe="false">
      <browsers>
        <add conditionalExpression="> 1%" />
        <add conditionalExpression="last 2 versions" />
        <add conditionalExpression="Firefox ESR" />
        <add conditionalExpression="Opera 12.1" />
      </browsers>
      …
    </autoprefixer>
    …
  </bundleTransformer>
  …
</configuration>

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Bundle Transformer: Handlebars

…
using Core.Bundles;
using Core.Orderers;
…

public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{
		…
		var commonTemplatesBundle = new CustomScriptBundle("~/Bundles/CommonTemplates");
		commonTemplatesBundle.Include(
			…
			"~/Scripts/handlebars/handlebars.runtime.js",
			"~/Scripts/handlebars/HandlebarsHelpers.js",
			"~/Scripts/handlebars/HandlebarsTranslatorBadge.handlebars",
			…);
		commonTemplatesBundle.Orderer = nullOrderer;
		bundles.Add(commonTemplatesBundle);
		…			
	}
}

<configuration>
  …
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    …
    <handlebars namespace="Handlebars.templates" rootPath=""
      knownHelpers="link" knownHelpersOnly="true" data="false">
      …
    </handlebars>
    …
  </bundleTransformer>
  …
</configuration>

Bundle Transformer: Hogan

…
using Core.Bundles;
using Core.Orderers;
…

public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{
		…
		var commonTemplatesBundle = new CustomScriptBundle("~/Bundles/CommonTemplates");
		commonTemplatesBundle.Include(
			"~/Scripts/hogan/template-{version}.js",
			"~/Scripts/hogan/HoganTranslatorBadge.mustache",
			…);
		commonTemplatesBundle.Orderer = nullOrderer;
		bundles.Add(commonTemplatesBundle);
		…
	}
}

<configuration>
  …
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    …
    <hogan useNativeMinification="false"
      variable="templates" namespace="" delimiters="">
      <sectionTags>
        <add sectionName="newWindow" openingTagName="_newWindow" closingTagName="newWindow" />
      </sectionTags>
      …
    </hogan>
    …
  </bundleTransformer>
  …
</configuration>