HTML-минимизация в Web Essentials 2013: Что изменилось за год?

С момента публикации предыдущей статьи прошел почти год и приведенный в ней пример минимизации HTML-фрагмента уже неактуален (команда Web Essentials > Minify selection больше недоступна в контекстном меню при редактировании HTML-файлов). Серьезные изменения в данном функционале произошли еще в декабре прошлого года, когда вышла версия 1.5, но в тот момент у меня не было времени, чтобы написать об этом статью. Поскольку за это время никто не описывал данный функционал на русском языке (на английском языке есть статья Дэвида Пакетта «Minifying your HTML»), то я постараюсь наверстать упущенное.

В версии 1.5 в контекстное меню для HTML-файлов были добавлены две очень полезные команды:

1. Minify HTML file(s)
2. Create HTML bundle file

По своему принципу действия эти команды очень похожи на одноименные команды для JavaScript- и CSS-файлов.

В данной статье мы рассмотрим последнюю стабильную версию Web Essentials 2013 (версию 2.3), которая поддерживает WebMarkupMin 0.8.21.

Минимизация HTML-файлов

Минимизировать HTML-файлы с помощью Web Essentials 2013 очень просто: в Solution Explorer выбираем один или несколько HTML-файлов (с зажатой клавишей CTRL), а затем щелкаем правой кнопкой мыши и в появившемся контекстном меню выбираем команду Web Essentials > Minify HTML file(s) (рис. 1).


Рис 1. Минимизация HTML-файла shell.html.

Если минимизация прошла успешно, то в Solution Explorer под файлом shell.html появится его минимизированная версия — shell.min.html, а в строке состояния Visual Studio будет выведена информация о том, сколько нам удалось сэкономить за счет минимизации (рис. 2).


Рис. 2. Результат минимизации HTML-файла shell.html.

Если во время минимизации произойдут ошибки, то на экран будет выведено окно с сообщением об ошибке.

В отличие от .min.css и .min.js-файлов, созданные .min.html-файлы по умолчанию не будут заново генерироваться при каждом сохранении исходного файла, но это поведение можно изменить в настройках. Чтобы перейти к настройкам HTML-минимизации выберите пункт меню Tools > Options > Web Essentials > HTML, а затем перейдите к категории Minification (рис. 3).


Рис. 3. Настройки HTML-минимизации.

Подробно рассмотрим все свойства категории Minification:

Свойство	Тип данных	Значение по умолчанию	Описание
Create gzipped files	Булевский	false	Если значение данного свойства равно true, то во время минимизации помимо .min.html-файла также будет создан .min.html.gzip-файл (.min.html-файл, сжатый с помощью GZip). О преимуществах совместного использования HTML-минимизации и GZip-сжатия вы можете прочитать в статье Мэдса Кристенсена «Effects of GZipping vs. minifying HTML files».
Minification Mode	Перечисление	KeepQuotes	Режим удаления кавычек в HTML-атрибутах. Может принимать следующие значения: KeepQuotes. Сохраняет кавычки; Html4. Производит удаление кавычек в соответствии со стандартом HTML 4.X; Html5. Производит удаление кавычек в соответствии со стандартом HTML5.
Minify files on save	Булевский	false	Если значение данного свойства равно true, то созданные .min.html-файлы будут заново генерироваться при каждом сохранении исходного файла.

Все вышеперечисленные настройки также применяются и к HTML-бандлам.

Создание HTML-бандлов

Чтобы создать HTML-бандл нужно в Solution Explorer выделить несколько HTML-файлов, затем щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать команду Web Essentials > Create HTML bundle file (рис. 4).


Рис. 4. Создание HTML-бандла.

В открывшемся диалоговом окне Save As нужно указать имя бандла и нажать кнопку Save (рис. 5).


Рис. 5. Диалоговое окно Save As.

В результате будут созданы 3 файла: content.html.bundle (XML-файл с настройками бандла), content.html (результат объединения содержимого исходных файлов) и content.min.html (минимизированный content.html) (рис. 6).

В случае, если в настройках включено создание GZip-файлов, то будет сгенерирован и 4-й файл — content.min.html.gzip.

Рис. 6. Результат создания HTML-бандла.

Хочу также заметить, что Web Essentials при объединении HTML-файлов не создает именованных контейнеров вида: <div id="ИМЯ_ФАЙЛА_БЕЗ_РАСШИРЕНИЯ" style="display: none;">…</div>. В нашем примере файл content.html был создан путем обычной конкатенации содержимого файлов change-log.html, contact.html и index.html.

Настройки HTML-бандлов находятся в том же окне, что и настройки HTML-минимизации (рис. 7).


Рис. 7. Настройки HTML-бандлов.

Подробно рассмотрим все свойства категории Bundle:

Свойство	Тип данных	Значение по умолчанию	Описание
Custom HTML output directory	Строка	Пустая строка	Задает путь к директории, в которую будут сохраняться сгенерированные HTML-файлы (файл с настройками бандла туда не перемещается). Допускается задавать как относительные пути (например, ../../Content/html-bundles), так и абсолютные (например, C:\html-bundles).
Minify files on making bundle	Булевский	true	Включает/отключает HTML-минимизацию бандла.
Run on build	Булевский	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. Официальный сайт VS-расширения Web Essentials
2. Статья Дэвида Пакетта «Minifying your HTML»
3. Статья Мэдса Кристенсена «Effects of GZipping vs. minifying HTML files»
4. Страница проекта WebMarkupMin на CodePlex
5. Моя статья «HTML-минимизация в Web Essentials 2013»
6. Моя статья «WebMarkupMin HTML Minifier – современный HTML-минимизатор для платформы .NET»