Главная > .NET, Веб-стандарты > HTML-минимизация в Web Essentials 2013: Что изменилось за год?

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

Логотипы Web Essentials и WebMarkupMin

С момента публикации предыдущей статьи прошел почти год и приведенный в ней пример минимизации 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»
Реклама
  1. Комментариев нет.
  1. No trackbacks yet.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: