WebMarkupMin: Минимизация представлений KnockoutJS и AngularJS
Начиная с версия 0.9.0 в WebMarkupMin поддерживается минимизация представлений KnockoutJS (далее просто Knockout) и AngularJS (далее просто Angular). Многие из вас могут задать вопрос: «Почему Knockout и Angular, а не Mustache или Underscore?». Этот выбор был сделан по следующим причинам: Шаблоны на основе DOM. Шаблонизаторы, встроенные в Knockout и Angular, базируются на DOM-шаблонах (DOM-based templates), а не на строковых шаблонах (string-based templates) как Mustache и Underscore. Код таких шаблонов не содержит программных вставок (например, {{…}} или <%…%>) за пределами текстового содержимого элементов (тегов) и значений атрибутов, что позволяет минимизировать его как обычный HTML.
Популярность среди .NET-разработчиков. Knockout изначально создавался для .NET-разработчиков, чтобы позволить им перенести свой опыт разработки MVVM-приложений из WPF и Silverlight в обычный веб. Что же касается Angular, то он вообще не нуждается в представлении и его популярность среди веб-разработчиков в целом бьет все возможные рекорды. Помимо этого популярности этих библиотек среди .NET-разработчиков способствовало огромное количество статей евангелиста Microsoft Джона Папы.
Высокая эффективность сжатия выражений привязки. Выражения привязки в Knockout и Angular фактически являются простым JavaScript-кодом или объектами в формате JSON, которые можно сжать JS-минимизатором.
Новые конфигурационные свойстваПо умолчанию минимизация представлений отключена, и чтобы включить ее нужно изменить значения следующих свойств класса HtmlMinificationSettings: Свойство
Тип данных
Значение по умолчанию
Описание
ProcessableScriptTypeList
Строка
Пустая строка
Содержит разделенный запятыми список типов тегов script (например, text/html, text/ng-template), содержимое которых должно быть обработано HTML-минимизатором.
MinifyKnockoutBindingExpressions
Булевский
false
Флаг, отвечающий за минимизацию выражений привязки Knockout в атрибутах data-bind и безконтейнерных комментариях.
MinifyAngularBindingExpressions
Булевский
false
Флаг, отвечающий за минимизацию выражений привязки Angular в Mustache-подобных тегах ({{ }}) и директивах.
CustomAngularDirectiveList
Строка
Пустая строка
Содержит разделенный запятыми список пользовательских Angular-директив (например, myDir, btfCarousel), которые содержат выражения привязки. Если значение свойства MinifyAngularBindingExpressions равно true, то выражения в пользовательских директивах будут минимизированы.
Рассмотрим каждое свойство более подробно: ProcessableScriptTypeList
До версии 0.9.0 теги script, не содержащие JavaScript-кода, просто игнорировались HTML-минимизатором. Это было сделано потому, что в этих тегах может содержаться все что угодно: от кода на VBScript до Handlebars-шаблонов. Но в тоже время, если тег script содержит код DOM-шаблона, то его стоило бы пропустить через HTML-минимизатор. Поэтому пользователям была дана возможность самим определять список допустимых типов содержимого.Возвращаясь к теме статьи, приведу несколько примеров:
Если нужно минимизировать представления Knockout, то свойству ProcessableScriptTypeList нужно присвоить значение равное text/html. Если мы имеем дело с представлениями Angular, то — text/ng-template. Если в проекте используются сразу две библиотеки, то нужно перечислить типы содержимого через запятую: text/html, text/ng-template. Также нужно понимать, что мы не ограничены только Knockout и Angular, теоретически у нас есть возможность минимизировать любой основанный на DOM шаблон (например, мы можем указать тип содержимого text/x-kendo-tmpl для представлений Kendo MVVM, которые мало чем отличаются от Knockout).MinifyKnockoutBindingExpressions Обычно когда я рассказываю про WebMarkupMin, то в качестве примера привожу код файла shell.html из демонстрационного проекта HotTowel:
Если свойству MinifyKnockoutBindingExpressions присвоить значение равное true, то к выражениям будут применены все описанные выше действия. Для этих целей в качестве JS-минимизатора всегда используется CrockfordJsMinifier, потому что только он может корректно минимизировать JSON-код (MsAjaxJsMinifier и YuiJsMinifier не подходят для этих целей).
С новыми настройками мы получим следующий код:
В свою очередь, Mustache-подобные теги могут находиться в текстовом содержимом элементов:
Price: {{ 3×10 | currency }}
и в значениях атрибутов:
Соответственно, если свойству MinifyAngularBindingExpressions присвоить значение равное true, то мы получим следующие результаты:
Price: {{3×10|currency}}
и 
С директивами дело обстоит намного сложнее. В коде шаблонов директивы могут быть представлены 4-мя способами: В виде элементов
В виде атрибутов
Как содержимое атрибутов class
В виде комментариев
Названия директив, также могут иметь различные варианты написания. Например, для директивы ngBind существуют следующие варианты: ng-bind
ng: bind
ng_bind
x-ng-bind
data-ng-bind
Все эти особенности учитываются при минимизации.Кроме того, не все директивы содержат выражения. Некоторые директивы могут также содержать: шаблоны, простые значения или вообще ничего. Для того, чтобы отделить директивы, содержащие выражения, от других директив используется следующий список: ngBind, ngBindHtml, ngBlur, ngChange, ngChecked, ngClass, ngClassEven, ngClassOdd, ngClick, ngController, ngCopy, ngCut, ngDblclick, ngDisabled, ngFocus, ngHide, ngIf, ngInit, ngKeydown, ngKeypress, ngKeyup, ngModelOptions, ngMousedown, ngMouseenter, ngMouseleave, ngMousemove, ngMouseover, ngMouseup, ngOpen, ngPaste, ngReadonly, ngRepeat, ngRepeatStart, ngSelected, ngShow, ngStyle, ngSubmit и ngSwitch.
Элементы HTML-минимизатор обрабатывает всего одну директиву-элемент — ngPluralize. Если говорить более конкретно, то минимизируются выражения в атрибутах count и when.Предположим, что у нас есть следующий код:
Последняя, на момент написания статьи, ночная сборка (версия 2.3.4.1) поддерживает WebMarkupMin 0.9.3 и позволяет настроить все рассмотренные конфигурационные свойства:
Ссылки Страница проекта WebMarkupMin на CodePlex Статья «WebMarkupMin HTML Minifier — современный HTML-минимизатор для платформы .NET» Официальный сайт VS-расширения Web Essentials Статья «HTML-минимизация в Web Essentials 2013» Статья «HTML-минимизация в Web Essentials 2013: Что изменилось за год?»
