前回の記事の公開とそこに表示されているHTMLフラグメントを最小化する例が
関係しなくなってから、ほぼ1年が経過しました（HTMLファイルを編集する場合、コンテキストメニューの
[Web Essentials]> [選択の縮小]コマンドは使用できなくなりました）。 この機能の重大な変更は、バージョン12がリリースされた昨年の12月に発生しましたが、その時点でこれに関する記事を書く時間がありませんでした。 この間、誰もこの機能をロシア語で説明していなかったため（英語ではDavid
Packetによる「Minifying your HTML」という記事があり
ます ）、追いつきましょう。
バージョン1.5では、HTMLファイルのコンテキストメニューに2つの非常に便利なコマンドが追加されました。
- HTMLファイルを縮小する
- 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> <minify>true</minify> <runOnBuild>false</runOnBuild> <outputDirectory></outputDirectory> </settings> <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インターフェースでは不可能でした。
参照資料
- 公式Web Essentials VS拡張Webサイト
- David Packettの記事「HTMLの最小化」
- Mads Christensen の記事、GZippingの効果vs. HTMLファイルの縮小»
- CodePlexのWebMarkupMinプロジェクトページ
- 私の記事「Web Essentials 2013のHTML最小化」
- 私の記事「WebMarkupMin HTML Minifier-.NETプラットフォーム用の最新のHTMLミニマイザー」