Clever Geek Handbook

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

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



ディレクティブには、次のオプションがあります。



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



また、すべてのディレクティブに式が含まれているわけではありません。 一部のディレクティブには、テンプレート、単純な値、または何も含まれない場合もあります。 式を含むディレクティブを他のディレクティブから分離するために、次のリストが使用されます： 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をサポートし、考慮されるすべての構成プロパティを構成できます。



Web Essentials 2013（バージョン2.3.4.1）のHTML最小化設定



参照資料



  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）がリリースされました。これは提示されたすべての機能をサポートします。



More articles:


All Articles