WebMarkupMin：KnockoutJSおよびAngularJSビューの最小化

バージョン0.9.0から、 WebMarkupMinはKnockoutJS （以下、単にKnockout）とAngularJS （以下、単にAngular）のビューの最小化をサポートします。 あなたの多くは、「 口ひげや下線ではなく、なぜノックアウトと角度なのか？」と尋ねるかもしれません。 この選択は、次の理由で行われました。

1. DOMベースのテンプレート。 KnockoutとAngularに組み込まれているテンプレートエンジンは、MustacheやUnderscoreなどの文字列ベースのテンプレートではなく、DOMベースのテンプレートに基づいています。 このようなテンプレートのコードには、要素（タグ）および属性値のテキストコンテンツの外側にプログラム挿入（たとえば{{…}}または<%…%> ）が含まれていないため、通常のHTMLとして最小化できます。
2. .NET開発者の間での人気。 Knockoutは、元々.NET開発者がMVVMアプリケーション開発の経験をWPFおよびSilverlightから通常のWebに移行できるようにするために作成されました。 Angularに関しては、まったく導入する必要はなく、Web開発者の間での人気は全体として考えられるすべての記録を破ります。 .NET開発者の間でのこれらのライブラリの人気に加えて、Microsoftエバンジェリストのジョン・パパによる膨大な数の記事が寄稿しました。
3. 非常に効率的なバインディング式圧縮。 KnockoutおよびAngularのバインディング式は、実際には単純なJavaScriptコードまたはJSミニマイザーで圧縮可能なJSON形式のオブジェクトです。

新しい構成プロパティ

デフォルトでは、ビューの最小化は無効になっています。有効にするには、 HtmlMinificationSettingsクラスの次のプロパティの値を変更する必要があります。

物件	データ型	デフォルト値	説明
ProcessableScriptTypeList	ひも	空行	scriptタグタイプのコンマ区切りリスト（たとえば、 text/html,text/ng-template ）が含まれ、そのコンテンツはHTMLミニマイザーによって処理される必要があります。
MinifyKnockoutBindingExpressions	ブール値	false	data-bind属性およびコンテナレスコメント内のノックアウトバインディング式を最小化するフラグ。
MinifyAngularBindingExpressions	ブール値	false	Moustacheのようなタグ（ {{ }} ）およびディレクティブの角度バインディング式を最小化するフラグ。
CustomAngularDirectiveList	ひも	空行	バインディング式を含むカスタムAngularディレクティブのコンマ区切りのリスト（例： myDir,btfCarousel ）が含まれます。 MinifyAngularBindingExpressionsプロパティの値がtrue 、ユーザーディレクティブの式は最小化されます。

各プロパティをより詳細に検討してください。

ProcessableScriptTypeList

バージョン0.9.0より前では、JavaScriptコードを含まないscriptタグは、HTMLミニマイザーによって単に無視されていました。 これは、これらのタグにVBScriptコードからHandlebarsテンプレートまでを含めることができるためです。 ただし、同時に、 scriptタグにDOMテンプレートのコードが含まれている場合は、HTMLミニマイザーを通過する価値があります。 したがって、ユーザーには、受け入れ可能なコンテンツタイプのリストを自分で決定する機会が与えられました。

記事のトピックに戻って、いくつか例を挙げます。

1. Knockoutビューを最小化する場合は、 ProcessableScriptTypeListプロパティをtext/htmlに設定する必要があります。
2. 角度ビューを扱っている場合は、 text/ng-template 。
3. プロジェクトで2つのライブラリを一度に使用する場合、コンマで区切られたコンテンツタイプをリストする必要があります： text/html,text/ng-template 。

また、KnockoutとAngularだけに限定されないことも理解する必要があります。理論的には、DOMベースのテンプレートを最小限に抑えることができます（たとえば、Knockoutとあまり変わらないKendo MVVMビューのコンテンツタイプtext/x-kendo-tmplを指定できます） ）

MinifyKnockoutBindingExpressions

通常、WebMarkupMinについて話すときは、 shell.htmlデモプロジェクトのshell.htmlファイルshell.htmlを例として使用します 。

 <div> <header> <!--ko compose: {view: 'nav'} --><!--/ko--> </header> <section id="content" class="main container-fluid"> <!--ko compose: {model: router.activeItem, afterCompose: router.afterCompose, transition: 'entrance'} --> <!--/ko--> </section> <footer> <!--ko compose: {view: 'footer'} --><!--/ko--> </footer> </div> 

最小化後、このコードは次の形式を取ります。

 <div><header><!--ko compose: {view: 'nav'}--><!--/ko--></header><section id="content" class="main container-fluid"><!--ko compose: {model: router.activeItem, afterCompose: router.afterCompose, transition: 'entrance'}--> <!--/ko--></section><footer><!--ko compose: {view: 'footer'}--><!--/ko--></footer></div> 

コンテナなしのコメント（いわゆるコンテナなしの制御フロー構文 ）のバインディング式（以下、単に式）に含まれる空白文字が多すぎるため、最小限に抑える必要があることがすぐにわかります 。

例えば、式compose: {view: 'nav'} 。これは、本質的に、外部中括弧なしのJSON形式のオブジェクトです。 中括弧で包むことができます： {compose: {view: 'nav'}} 、JS {compose: {view: 'nav'}}で処理します。 次に、最小化されたコードから外側の中括弧を削除し、コンテナなしのコメントに戻します。

MinifyKnockoutBindingExpressionsプロパティMinifyKnockoutBindingExpressions trueに設定されているtrue 、上記のすべてのアクションが式に適用されます。 CrockfordJsMinifierは、JSONコードを正しく最小化できるため、これらの目的のJS MsAjaxJsMinifierとして常に使用されます（ MsAjaxJsMinifierとYuiJsMinifierこれらの目的には適しYuiJsMinifierいません）。

新しい設定では、次のコードが取得されます。

 <div><header><!--ko compose:{view:'nav'}--><!--/ko--></header><section id="content" class="main container-fluid"><!--ko compose:{model:router.activeItem,afterCompose:router.afterCompose,transition:'entrance'}--> <!--/ko--></section><footer><!--ko compose:{view:'footer'}--><!--/ko--></footer></div> 

data-bind属性でも同じアクションが実行されます。 たとえば、次のコードがあります。

 <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span> 

最小化後、次のようになります。

 <span data-bind="text:price()>50?'expensive':'cheap'"></span> 

MinifyAngularBindingExpressions

ドキュメントによると、Angularの式はJavaScriptに似たコードスニペットです。 ただし、それらはCrockfordJsMinifierで最小化できます。 唯一の問題は、1回限りのバインディング式（ ::始まる）でした。 元のJSMinは常に空白を削除していましたが、 CrockfordJsMinifierコードに小さな変更を加えた後、問題は修正されました。

Angularでは、式をMustacheのようなタグ（ {{ }} ）およびディレクティブに含めることができます。

次に、Mustacheのようなタグを要素のテキストコンテンツに含めることができます。

 <strong>Price:</strong> {{ 3 * 10 | currency }} 

および属性値：

 <img src="/Content/images/icons/{{ iconName + '.png' }}"> 

したがって、 MinifyAngularBindingExpressionsプロパティをtrue設定すると、次の結果が得られます。

 <strong>Price:</strong> {{3*10|currency}} 

そして

 <img src="/Content/images/icons/{{iconName+'.png'}}"> 

ディレクティブははるかに複雑です。 テンプレートコードでは、ディレクティブは4つの方法で表すことができます。

1. 要素として
2. 属性として
3. class属性のコンテンツのように
4. コメントとして

ディレクティブ名には異なるスペルを使用することもできます。 たとえば、 ngBindディレクティブには、次のオプションがあります。

• ng-bind
• ng:bind
• ng_bind
• x-ng-bind
• data-ng-bind

これらの機能はすべて、最小化するときに考慮されます。

また、すべてのディレクティブに式が含まれているわけではありません。 一部のディレクティブには、テンプレート、単純な値、または何も含まれない場合もあります。 式を含むディレクティブを他のディレクティブから分離するために、次のリストが使用されます： ngBind 、 ngBindHtml 、 ngBlur 、 ngChange 、 ngChecked 、 ngClass 、 ngClassEven 、 ngClassOdd 、 ngClick 、 ngController 、 ngCopy 、 ngCut 、 ngDblclick 、 ngInit ngKeydown ngKeypress ngKeyup ngModelOptions ngMousedown ngRepeatStart ngSelected ngShow ngStyle ngSubmit ngSwitch

アイテム

HTML ngPluralize 1つの要素ディレクティブのみを処理します。 より具体的には、 count内の式、および属性が最小化さwhen 。

次のコードがあるとします：

 <ng-pluralize count=" personCount " when="{ '0': 'Nobody is viewing.', 'one': '1 person is viewing.', 'other': '{} people are viewing.' }"> </ng-pluralize> 

最小化後、次のようになります。

 <ng-pluralize count="personCount" when="{'0':'Nobody is viewing.','one':'1 person is viewing.','other':'{} people are viewing.'}"> </ng-pluralize> 

属性

Angularの属性ディレクティブの式を最小化data-bindことは、Knockoutのdata-bind属性のコンテンツを最小化するよりも簡単です。外部の中括弧を考える必要がないからです。

ngRepeatとしてngRepeatディレクティブngRepeat 、属性ディレクティブの式を最小化することを検討してください。

 <li ng-repeat="customer in customers | filter:nameText | orderBy:'name'"> {{customer.name}} - {{customer.city}} </li> 

（JavaScriptの観点から）属性に「誤った」コードが含まれているという事実にもかかわらず、最小化は引き続き成功します。

 <li ng-repeat="customer in customers|filter:nameText|orderBy:'name'">{{customer.name}} - {{customer.city}}</li> 

クラス

ディレクティブクラスと属性ディレクティブの主な違いは、 class属性に複数のディレクティブを同時に含めることができることです。

 <span class="ng-bind: name; ng-cloak; ng-style: { 'background-color': 'lime' };"></span> 

この問題も解決されました。

 <span class="ng-bind:name;ng-cloak;ng-style:{'background-color':'lime'}"></span> 

コメント

残念ながら、Angularには、コメントとして表示できる単一の組み込みディレクティブがありません。 そのため、ユーザーディレクティブmyDirをコメントディレクティブとして使用する、少し工夫された例を検討します。

 <!-- directive: my-dir 1 + 1 --> 

最小化後、次のコードを取得します。

 <!--directive:my-dir 1+1--> 

CustomAngularDirectiveList

Angularには独自のディレクティブを作成する機能があるため、ユーザーにはこれらのディレクティブの名前を特別なリストに追加する機会が与えられました。 CustomAngularDirectiveListプロパティで指定されたカスタムディレクティブは、Angular組み込みディレクティブと同様に、 CustomAngularDirectiveListによって処理されます。

Web Essentials 2013でのサポート

ビューを個別のHTMLファイルに保存する場合、WebMarkupMinにバンドルされている標準のASP.NET拡張機能はほとんど役に立ちません。 この場合、プロジェクトのアセンブリ段階でHTMLファイルを最小化する根本的に異なるツールが必要です。 現時点では、このようなツールは1つだけです。これはWeb Essentials 2013の VS拡張機能です。

Web Essentials 2013の最新の安定バージョン（バージョン2.3）は、WebMarkupMinの古いバージョン（バージョン0.8.21）をサポートしています。 そのため、Web Essentials 2013のナイトリービルドをインストールする必要があります（拡張サイトにはインストールガイドがあります ）。

最後に、この記事の執筆時点では、ナイトリービルド（バージョン2.3.4.1）はWebMarkupMin 0.9.3をサポートし、考慮されるすべての構成プロパティを構成できます。

参照資料

1. CodePlexのWebMarkupMinプロジェクトページ
2. WebMarkupMin HTML Minifier-.NETプラットフォーム用の最新のHTMLミニマイザー
3. 公式Web Essentials VS拡張Webサイト
4. 記事「Web Essentials 2013のHTML最小化」
5. 記事「Web Essentials 2013でのHTMLの最小化：年間で何が変わったのですか？」

UPD1： 10月17日に、 Web Essentials 2013の安定バージョン （バージョン2.4）がリリースされました。これは提示されたすべての機能をサポートします。