Clever Geek Handbook

Bundle Transformer 1.6.2がリリースされましたか、6か月で何が変更されましたか？

バンドルトランスフォーマーロゴ

Bundle Transformerは、 Microsoft ASP.NET Web Optimization Framework （他の名前：ASP.NET Bundling and Minification、System.Web.Optimization、Microsoft.Web.Optimization、およびASP.NET Optimization-Bundling）用に開発したモジュール式の拡張機能です。 今年の4月に、Bundle Transformerの機能の詳細なレビューを既に行いましたが、この間にこの製品は大きく変わりました。 そのため、このレビューを書いて、過去6か月間にBundle Transformerで発生した主な変更について話すことにしました。



Microsoft ASP.NET Web Optimization Framework開発の変更



Bundle Transformerの4月バージョンは、Microsoft ASP.NET Web最適化フレームワーク（以下、B / Mと呼びます）の最初のベータ版用に開発されました。 すでにB / Mの第2ベータで重大な変更が行われました：APIが大幅に変更され、デバッグモードのサポートが登場し、動的バンドルを作成する機能は時代遅れになりました（ EnableDefaultBundles



メソッドとDynamicFolderBundle



クラスの使用は推奨されなくなりました）。 B / Mの最終バージョンに大きな変更はありませんでしたが、1つの非常に便利な機能が追加されました-CDNをサポートします。



上記の変更はすべてバンドルトランスフォーマーにも影響しました。



B / Mの2番目のベータ版から、バンドルを作成するコードをGlobal.asax



ファイルからBundleConfig



クラスに転送し、このクラスをApp_Start



ディレクトリに配置することをお勧めします。 Global.asax



ファイルでは、 BundleConfig



クラスのRegisterBundles



メソッドの呼び出しのみを残す必要があります。 



 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); //   bundle` BundleConfig.RegisterBundles(BundleTable.Bundles); } } }


BundleConfig



として次のBundleConfig



クラスを使用して、Bundle Transformerを使用してバンドルを作成し、処理をカスタマイズすることを検討してください。 



 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); 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); } } }


1番目のB / Mベータと比較した主な違いは、ファイルとディレクトリの追加に（ AddFile



およびAddDirectory



代わりに） Include



およびIncludeDirectory



メソッドが使用されるようになったことです。 さらに、変換はBundle



クラスのコンストラクターではなく、 Transforms



プロパティを通じて追加されるようになりました（上記のコードでは、 JsTransformer



とJsTransformer



インスタンスを追加することでこれを確認できJsTransformer



）。

Bundle



クラスに加えて、そのサブクラスであるStyleBundle



（スタイル用）およびScriptBundle



（スクリプト用）もバンドルの作成に使用できることに注意してください。 コード（ CssMinify



およびJsMinify



クラスのインスタンス）を最小化するための変換は、これらのクラスに既に追加されています。 この場合、これらのサブクラスを使用することはできませんCssMinify



およびJsMinify



クラスのインスタンスの代わりに、バンドルトランスフォーマー（ CssTransformer



およびJsTransformer



インスタンス）からの変換を追加する必要があるためです。


サンプルファイル_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>


バンドルへのリンクは、 Render



メソッドを使用してビューコードに追加されます（ Styles.Render



CSSに使用され、 Scripts.Render



JavaScriptに使用されます）。 Render



メソッドを使用すると、バンドルへのリンクの追加がより便利になるだけでなく、B / Mの初期バージョンの主な問題（デバッグモードのサポート）も解決します。



B / Mは、次の設定に基づいてWebアプリケーションのモードを決定します。

  1. Web.config



    ファイルのcompilation



    要素のdebug



    属性の値（ Web.config



    デバッグモード; false



    リリースモード）;
  2. BundleTable.EnableOptimizations



    プロパティの値BundleConfig



    クラスで指定できます（ BundleConfig



    リリースモード、 BundleConfig



    デバッグモード）。 さらに、 BundleTable.EnableOptimizations



    プロパティの値は、 Web.config



    ファイルの設定よりも優先されます。


リリースモードでは、バンドルに含まれるファイルのコードが結合されて処理されます（変換が適用されます）。 出力は、次の形式のHTMLコードです。 



 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - Bundle Transformer Example MVC Application</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Bundles/CommonStyles?v=IWN75r8IOIWnlehQ6JVPUgrb7UER075iobpzbjYTtRQ1" rel="stylesheet"/> <script src="/Bundles/Modernizr?v=1dm47T0PPFmcdy8ssp2EZ4h8yT2SjNhVvtdbc0MyDAs1"></script> ... </head> <body> ... <script src="/Bundles/CommonScripts?v=qWsyReB8UFAt-HPS-6MCkeDDTs2lQgYMdyCUd2V9O4o1"></script> </body> </html>


デバッグモードでは、バンドルに含まれるファイルが元の形式で個別に表示されます。 



 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - Bundle Transformer Example MVC Application</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Content/Site.css" rel="stylesheet"/> <link href="/Content/BundleTransformer.css" rel="stylesheet"/> <link href="/AlternativeContent/css/TestCssComponentsPaths.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/> <link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/> <link href="/Content/TestTranslators.css" rel="stylesheet"/> <link href="/Content/TestLess.less" rel="stylesheet"/> <link href="/Content/TestSass.sass" rel="stylesheet"/> <link href="/Content/TestScss.scss" rel="stylesheet"/> <script src="/Scripts/modernizr-2.5.3.js"></script> ... </head> <body> ... <script src="/Scripts/MicrosoftAjax.debug.js"></script> <script src="/Scripts/jquery-1.8.1.js"></script> <script src="/Scripts/jquery-ui-1.8.23.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> <script src="/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="/Scripts/knockout-2.1.0.debug.js"></script> <script src="/Scripts/TestCoffeeScript.coffee"></script> </body> </html>


これにより、クライアントコードのデバッグが大幅に簡素化されます。



ただし、プリプロセッサを使用すると、デバッグモードで作業するときに問題が発生する場合があります。 上記のコードには、拡張子が.less



、 .sass



、 .scss



、および.coffee



ファイルへのリンクが含まれています。 これらの拡張機能のWeb.config



ファイルにHTTPハンドラーが登録されていない場合、これらのファイルの内容は処理されず、クライアント側のエラーが発生する可能性があります。



この問題を解決するために、トランスレーターライブラリBundleTransformer.Less、BundleTransformer.LessLite、BundleTransformer.SassAndScss、およびBundleTransformer.CoffeeScriptが、対応するHTTPハンドラーの実装とともに追加されました。 NuGetを介してトランスレーターをインストールすると、HTTPハンドラーがWeb.config



ファイルに自動的に登録されます。 



 <?xml version="1.0" encoding="utf-8"?> <configuration> ... <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> ... </configuration>


例外はBundleTransformer.Less NuGetパッケージです。インストールすると、ドットレスパッケージもインストールされます。これにより、 .less



拡張子を持つファイルを処理するためのHTTPハンドラーのバージョンが自動的に登録されます。 ただし、BundleTransformer.LessのHTTPハンドラLessAssetHandler



に手動で置き換える機会は常にあります。



Web.config



ファイルの/configuration/bundleTransformer/core/assetHandler



構成要素を使用して、ネイティブHTTP /configuration/bundleTransformer/core/assetHandler



ヘッダーの設定を制御できます。 次のコードは、デフォルトのHTTPハンドラー設定を示しています。 



 <configuration> ... <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd"> <core> ... <assetHandler clientCacheDurationInDays="365" enableCompression="true" useLastModifiedHeader="true" useETagHeader="true" serverCacheDurationInMinutes="15" useServerCacheSlidingExpiration="false" disableClientCacheInDebugMode="true" disableCompressionInDebugMode="true" /> ... </core> </bundleTransformer> ... </configuration>


どこで



翻訳者



バンドルトランスフォーマー：LESS Lite



4月下旬、 ドット レスライブラリDotlessClientOnlyと呼ばれる軽量バージョンが登場しました 。 このライブラリにはLESSコンパイラのみが含まれており、ASP.NETに関連するすべての機能がライブラリから削除されています（たとえば、HTTPハンドラー）。



BundleTransformer.LessLiteはDotlessClientOnlyの機能を使用して、LESSコードをCSSに変換します。 機能とプログラミングインターフェイスの点では、BundleTransformer.LessLiteはBundleTransformer.Lessと完全に同等です 。 したがって、プロジェクト内でLESSのすべての処理がBundle Transformerを介してのみ行われる場合、BundleTransformer.LessLiteモジュールを使用することをお勧めします。 より軽量なライブラリに基づいています。



バンドルトランスフォーマー：CoffeeScript



バージョン1.5.5より前では、 BundleTransformer.CoffeeScriptはSassAndCoffee.JavaScriptバージョン2.0.2.0ライブラリを使用してCoffeeScriptコードをJavaScriptに変換していました。 残念ながら、SassAndCoffee.JavaScriptライブラリは長い間開発されておらず、 CoffeeScriptの古いバージョン（バージョン1.1.3）をサポートしています。 そのため、BundleTransformer.CoffeeScriptの新しいバージョンでは、それを放棄し、CoffeeScript 1.3.3をサポートする独自のコンパイラを実装する必要がありました。



ミニマイザー



Bundle Transformerを作成する際の主なタスクは、開発者に複数の最小化機能から選択する機会を提供することでした。 製品の初期バージョンでは、アダプターは、 Microsoft Ajax MinifierおよびYUI Compressorの 2つのファミリのミニマイザーでのみ開発者が使用できました。 現在のバージョンでは、ほとんどすべての一般的なCSSおよびJSコードミニマイザーでアダプターを使用できます。



バンドルトランスフォーマー：クロージャー



BundleTransformer.Closureには、 ClosureRemoteJsMinifier



およびClosureLocalJsMinifier



2つのJS ミニマイザーが含まれています。 ClosureRemoteJsMinifier



は、 Google Closure Compiler Service API Webサービスの使用を最小限に抑え、永続的なインターネット接続を必要とします。 ClosureLocalJsMinifier



は、コンソールアプリケーションのGoogle Closure Compiler Applicationによって最小化され、Java仮想マシンとcompiler.jarファイルの最新バージョンが必要です。



バンドルトランスフォーマー：JSMin



BundleTransformer.JsMinには、 CrockfordJsMinifier



JSコードミニマイザーアダプターが含まれています。 CrockfordJsMinifier



、Douglas Crockfordによって作成された、最も古いJSコードミニマイザーであるJSMinのC＃ポートに基づいています。 使用されるC＃ポートは、2007年5月22日のJSMinバージョンに基づいて作成されました。



バンドルトランスフォーマー：UglifyJS



BundleTransformer.UglifyJsには、 UglifyJsMinifier JSコードミニマイザー UglifyJsMinifier



が含まれています。 UglifyJsMinifier



は、Node.jsコミュニティで人気のあるUglifyJS （バージョン1.3.3がサポートされるようになった）JSコードUglifyJsMinifier



に基づいています。



バンドルトランスフォーマー：パッカー



BundleTransformer.Packerには、 EdwardsJsMinifier JSコードミニマイザー EdwardsJsMinifier



が含まれています。 EdwardsJsMinifier



は、Dean Edwards Packerバージョン3.0 JS EdwardsJsMinifier



に基づいています。 Packerの主な機能は、コードの最小化と難読化に加えて、Base62アルゴリズムを使用してコードを圧縮できることです。 Base62圧縮は、WebサーバーがGZIP / Deflate圧縮をサポートしていない場合に使用できます。



バンドルトランスフォーマー：CSSO



BundleTransformer.Cssoには、 KryzhanovskyCssMinifier



CSSミニマイザーアダプターが含まれています。 KryzhanovskyCssMinifier



CSS KryzhanovskyCssMinifier



基づいています （バージョン1.2.18がサポートされるようになりました）。 この最小化ツールは、 BEM手法の開発者であるセルゲイクリザノフスキーとヴィタリーハリソフによって作成されました。 このCSSミニマイザーと他のCSS最小化ツールの主な違いは、構造的な最小化のサポートです（たとえば、CSSコードでは次の操作が実行されます：同じセレクターでブロックを結合し、重複するプロパティを削除し、別のブロックでプロパティを部分的に強調表示し、ブロックを部分的に結合し、など）。 構造の最小化は高度な圧縮を提供し、「マシン」（プリプロセッサなど）によって生成されるコードを最小化します。



CSSOはECMAScript 5で記述されており、非常に長い間、このライブラリのコードを正しく実行できる.NET用のJSエンジンを見つけることができませんでした。 その結果、.NET- Noesis Javascript .NET用のV8 JSエンジンの実装を選択しました。 このエンジンは部分的にアンマネージコードで記述されており、32ビットと64ビットの2つのバージョンがあります。 この実装機能のため、BundleTransformer.Cssoモジュールは2つのNuGetパッケージに分割されました： BundleTransformer.Csso.x86およびBundleTransformer.Csso.x64 。 Noesis Javascript .NETを正しく動作させるには、Microsoft Visual C ++ 2010のmsvcp100.dll



およびmsvcr100.dll



が必要です。システムにこれらのアセンブリがない場合は、Microsoft Visual C ++ 2010再頒布可能パッケージ（ x86 、 x64 ）をインストールすることをお勧めします。



バンドルトランスフォーマー：WebGrease



BundleTransformer.WGには、 WgCssMinifier CSS WgCssMinifier



が含まれています。 WgCssMinifier



、MicrosoftのWebGreaseライブラリのセマンティックCSS WgCssMinifier



を使用してCSSを最小化します。 CSSOなどのWebGreaseのセマンティックCSSミニマイザーは、構造的なCSSの最小化を実現します。



現時点では、BundleTransformer.WG NuGetパッケージのアルファステータスは次のとおりです。 WebGreaseの現在のバージョン（バージョン1.1.0）にはエラーが含まれているため、サイトの製品バージョンでは使用できません。



このミニマイザーについて詳しく知りたい場合は、HowardDörking のビデオレポート「 Bundling and Optimizing」をご覧になることをお勧めします。



ミニマイザーの使用に関する推奨事項



最も信頼性の高いミニマイザーは、Microsoft Ajax Minifier、YUI Compressor、およびGoogle Closure Compiler（JSコードの圧縮度のリーダー）の最初の3つのミニマイザーです。 これらはすべて圧縮率が高く、実際に処理されるコードにはエラーが含まれていません。



Node.js向けに開発された新しいミニマイザー：UglifyJSとCSSOは、最初の3つのミニマイザーよりも高い圧縮率を提供します（UglifyJSはSimple



モードのGoogle Closure Compilerよりも圧縮率が高い場合があります）が、このレベルの信頼性はありません。



最も古い最小化ツールであるJSMinおよびPackerは、最も単純なJSコードの圧縮にのみ適しています。 残念なことに、圧縮率と信頼性レベルの両方の点で、それらは現代のミニマムに負けています。



WebGreaseのセマンティックCSSミニマイザーを他のミニマイザーと比較したのは、それに含まれるエラーの詳細のためです。 しかし、一般的な観察によれば、CSSOよりもコード圧縮の程度が大きいように思われます。



設定



Bundle Transformerの現在の設定は、次のバージョンのWeb.config



ファイルと同等です（すべての追加モジュールがインストールされている場合）。 



 <?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> ... <!-- 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>


bundleTransformer



, :



, .. . , bundleTransformer



IntelliSense:



IntelliSense bundleTransformer Web.config



おわりに



, B/M Bundle Transformer.



, B/M ASP.NET MVC, . B/M ASP.NET-: Web Forms Web Pages ( , , ).



B/M Bundle Transformer .NET Framework 4.0, ASP.NET MVC 3 ASP.NET Web Forms 4.0.



参照資料



  1. Bundle Transformer CodePlex
  2. Microsoft ASP.NET Web Optimization Framework CodePlex
  3. - «Bundling and Optimizing»
  4. - «Build high-performing HTML 5 applications easily with ASP.NET 4.5»
  5. «Bundling and Minification»
  6. «Adding Bundling and Minification to Web Forms» ( )
  7. «Adding Web Optimization to a Web Pages Site» ( )
  8. «Keeping in touch with the Web optimization team»




More articles:


All Articles