Clever Geek Handbook

Web Essentials 2013のHTML最小化：年間で何が変わったのですか？

Web EssentialsとWebMarkupMinロゴ

前回の記事の公開とそこに表示されているHTMLフラグメントを最小化する例が関係しなくなってから、ほぼ1年が経過しました（HTMLファイルを編集する場合、コンテキストメニューの[Web Essentials]> [選択の縮小]コマンドは使用できなくなりました）。 この機能の重大な変更は、バージョン12がリリースされた昨年の12月に発生しましたが、その時点でこれに関する記事を書く時間がありませんでした。 この間、誰もこの機能をロシア語で説明していなかったため（英語ではDavid Packetによる「Minifying your HTML」という記事があります ）、追いつきましょう。



バージョン1.5では、HTMLファイルのコンテキストメニューに2つの非常に便利なコマンドが追加されました。

  1. HTMLファイルを縮小する
  2. HTMLバンドルファイルを作成する


原則として、これらのコマンドは、JavaScriptファイルとCSSファイルの同じ名前のコマンドに非常に似ています。



この記事では、 WebMarkupMin 0.8.21をサポートするWeb Essentials 2013の最新の安定バージョン（バージョン2.3）を検討します。



HTMLの最小化



Web Essentials 2013を使用したHTMLファイルの最小化は非常に簡単です。 ソリューションエクスプローラーで、 1つ以上のHTMLファイルを選択し（ CTRLキーを押しながら ）、右クリックしてWeb Essentials> Minify HTML file（s ） （図1）。





図1. HTMLファイルshell.htmlの最小化。



最小化が成功した場合、 ソリューションエクスプローラーのshell.html



ファイルの下に、最小化されたバージョンshell.html



が表示され、Visual Studioステータスバーに最小化によって保存できた量に関する情報が表示されます（図2）。





図 2. shell.html HTMLファイルを最小化した結果。



最小化中にエラーが発生すると、エラーメッセージのあるウィンドウが表示されます。



.min.css



および.min.js



ファイルとは異なり、作成された.min.html



ファイルは、デフォルトではソースファイルが保存されるたびに再生成されませんが、この動作は設定で変更できます。 HTML最小化設定に移動するには、メニュー項目[ ツール ] > [オプション]> [Web Essentials]> [HTML ]を選択し、[ 縮小]カテゴリに移動します（図3）。





図 3. HTML最小化設定。



縮小カテゴリのすべてのプロパティを詳細に検討します。

物件 データ型 デフォルト値 説明
gzip圧縮されたファイルを作成する ブール値 false



このプロパティの値がtrue



、最小化中に、 .min.html



ファイルに加えて、 .min.html



ファイルも作成されます（GZipで圧縮された.min.html



ファイル）。 HTMLの最小化とGZip圧縮を共有することの利点については、Mads Christensen の記事、Gzipの効果と対比の効果を参照してください。 HTMLファイルを縮小しています 。 」
Minification Mode



リスティング KeepQuotes



HTML属性の引用削除モード。 次の値を取ることができます。

  • KeepQuotes 引用符を保存します。
  • HTML4。 HTML 4.X標準に従って引用符を削除します。
  • HTML5。 HTML5標準に従って引用符を削除します。
保存時にファイルを縮小する ブール値 false



このプロパティの値がtrue



場合、作成された.min.html



ファイルは、元のファイルが保存されるたびに再生成されます。
上記の設定はすべて、HTMLバンドルにも適用されます。



HTMLバンドルの作成



HTMLバンドルを作成するには、 ソリューションエクスプローラーで複数のHTMLファイルを選択し、右クリックして表示されるコンテキストメニューで[ Web Essentials]> [HTMLバンドルファイルの作成 ]を選択する必要があります（図4）。





図 4. HTMLバンドルを作成します。



表示される[名前を付けて保存 ]ダイアログボックスで、バンドル名を指定し、[ 保存 ]ボタンをクリックする必要があります（図5）。





図 5. [名前を付けて保存]ダイアログボックス。



その結果、3つのファイルが作成されます： content.html.bundle



（バンドル設定を含むXMLファイル）、 content.html



（ソースファイルのコンテンツを結合した結果）、およびcontent.min.html



（最小化されたcontent.html



）（図6）。



設定によりGZipファイルの作成が有効になっている場合、4番目のファイル（content.min.html.gzip）も生成されます。




図 6. HTMLバンドルを作成した結果。



また、HTMLファイルを結合する場合、Web Essentialsは次の形式の名前付きコンテナーを作成しないことに注意してください。 <div id="___" style="display: none;">…</div>



この例では、 change-log.html



、 change-log.html



contact.html



およびindex.html



の内容をchange-log.html



連結することにより、 change-log.html



ファイルが作成されました。



HTMLバンドル設定は、HTML最小化設定と同じウィンドウにあります（図7）。





図 7. HTMLバンドルの設定。



バンドルカテゴリのすべてのプロパティを詳細に検討します。

物件 データ型 デフォルト値 説明
カスタムHTML出力ディレクトリ ひも 空行 生成されたHTMLファイルが保存されるディレクトリへのパスを指定します（バンドル設定のあるファイルはそこに移動されません）。 相対パス（たとえば../../Content/html-bundles



）と絶対パス（たとえばC:\html-bundles



）の両方を指定できます。
バンドルの作成時にファイルを縮小する ブール値 true



バンドルのHTML最小化を有効/無効にします。
ビルドで実行 ブール値 false



このプロパティの値がtrue



、プロジェクトのビルド中にHTMLファイルが再生成されます。 このオプションは、バンドルに含まれるHTMLファイルをVisual Studioの外部で編集できる場合に役立ちます。
上記の設定は、HTMLバンドルを作成する場合にのみ適用されます。 既存のHTMLバンドルの設定を変更するには、バンドル設定でファイルを編集する必要があります（拡張子が.html.bundle



ファイル）。



リスト1. content.html.bundleファイルのバンドル設定。 



 <?xml version="1.0" encoding="utf-8"?> <bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd"> <settings> <!--Determines if the bundle file should be automatically optimized after creation/update.--> <minify>true</minify> <!--Determin whether to generate/re-generate this bundle on building the solution.--> <runOnBuild>false</runOnBuild> <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectory></outputDirectory> </settings> <!--The order of the <file> elements determines the order of the files in the bundle.--> <files> <file>/App_Data/text-content/change-log.html</file> <file>/App_Data/text-content/contact.html</file> <file>/App_Data/text-content/index.html</file> </files> </bundle>


コードから、要素outputDirectory



、 minify



、およびrunOnBuild



使用すると、以前に行った設定をオーバーライドできることがすぐにわかります。 さらに、 files



要素では、バンドル内のファイルの順序を変更できますが、これはVisual Studioインターフェースでは不可能でした。



参照資料



  1. 公式Web Essentials VS拡張Webサイト
  2. David Packettの記事「HTMLの最小化」
  3. Mads Christensen の記事、GZippingの効果vs. HTMLファイルの縮小»
  4. CodePlexのWebMarkupMinプロジェクトページ
  5. 私の記事「Web Essentials 2013のHTML最小化」
  6. 私の記事「WebMarkupMin HTML Minifier-.NETプラットフォーム用の最新のHTMLミニマイザー」




More articles:


All Articles