Web Essentials 之 Bundling_html/css_WEB-ITnose

Web Essentials 機能ディレクトリに戻る

この記事ディレクトリ

• はじめに
• サンプル ファイル
• 既知の動作

この記事はバンドリングに関するものです。好きです、このように理解できますが、私はまだバンドルまたはバンドルするのが好きです。

バンドルを使用すると、同じ種類のファイルを結合して圧縮し、Web サイトのパフォーマンスを向上させることができます。

バンドルとは何ですか?

Web Essentials のバンドル ファイルは、同じ種類のファイルのグループを結合して圧縮するためのレシピであり、ブラウザがダウンロードするデータ量を制限します。

Web Essentials には 2 つのバンドル タイプがあります:

1. .bundle: CSS および JS ファイルの場合、XML タイプのバンドル レシピ ファイルとターゲット CSS ファイルが出力されます。ソース コードの圧縮バージョン (レシピ ファイルで minify オプションがオンになっている場合)。
2. .sprite: 画像ファイル (png、jpg、gif) 用。 スプライト画像、背景プロパティのすべての座標のサンプル コードを含む CSS、同じ背景プロパティを保持する難読化された LESS ファイルと SASS ファイル、およびカスタム マッピング ファイル (json) を生成します。

バンドルを作成するにはどうすればよいですか?

バンドルを作成する手順は、すべての種類のファイルで同じです。

• ソリューション ブラウザーで、バンドルするファイルを選択します。
• web Essentials のコンテキスト メニューで、コンテキストに応じて、イメージ スプライトの作成... または CSS/JS バンドル ファイルの作成を選択します。
• バンドル ファイルに名前を付けます。

どのように機能しますか?

基本的に、バンドルされたアセット (バンドルに配置されたリソース ファイル) を更新するには 2 つの方法があります:

1. .js、css、画像などの原材料を変更します。
2. バンドルのレシピ ファイルを更新します。

サンプル ファイル

デフォルトで MyBundle という名前のバンドル ファイルを作成しました。生成した XML ファイルの内容を以下に置きます。ご覧のとおり、生成された XML ファイルにはそれ自体で注釈が付けられていますが、英語で注釈が付けられているだけです。

<?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>    <!--Determine whether to generate/re-generate this bundle on building the solution.-->    <runOnBuild>false</runOnBuild>    <!--Use absolute path in the generated CSS files. By default, the URLs are relative to generated bundled CSS file.-->    <adjustRelativePaths>true</adjustRelativePaths>    <!--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 />  </settings>  <!--The order of the <file> elements determines the order of the files in the bundle.-->  <files>    <file>/Content/themes/base/jquery-ui.css</file>    <file>/Content/themes/base/jquery.ui.accordion.css</file>    <file>/Content/themes/base/jquery.ui.all.css</file>  </files></bundle>

以下のスプライト ファイルを作成しています:

対応する XML タイプのスプライト ファイルの内容は次のとおりです:

<?xml version="1.0" encoding="utf-8"?><sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd">  <settings>    <!--Determines if the sprite image should be automatically optimized after creation/update.-->    <optimize>true</optimize>    <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.-->    <orientation>vertical</orientation>    <!--The margin (in pixel) around and between the constituent images.-->    <margin>1</margin>    <!--File extension of sprite image.-->    <outputType>png</outputType>    <!--Determine whether to generate/re-generate this sprite on building the solution.-->    <runOnBuild>false</runOnBuild>    <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.-->    <fullPathForIdentifierName>true</fullPathForIdentifierName>    <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).-->    <useAbsoluteUrl>false</useAbsoluteUrl>    <!--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 />    <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->    <outputDirectoryForCss />    <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->    <outputDirectoryForLess />    <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->    <outputDirectoryForScss />  </settings>  <!--The order of the <file> elements determines the order of the images in the sprite.-->  <files>    <file>/Content/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png</file>    <file>/Content/themes/base/images/ui-bg_flat_75_ffffff_40x100.png</file>    <file>/Content/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png</file>  </files></sprite>

既知の動作

汎用

ディレクトリのバンドルを生成する場合、ファイルのリストは VS プロジェクトではなくファイル システムから取得されます。したがって、ディレクトリにプロジェクトに含まれていないファイルが含まれている場合、それらはスプライトに含まれます。これを防ぐには、ディレクトリではなくすべてのファイルを手動で選択する必要があります。