С выходом Visual Studio 2012 инструмент отвечающий за автоматическую минификацию и упаковку скриптов и стилей Web Optimization Framework получил большое обновление. Эти изменения преследуют две цели:
- Предоставить полный контроль над упакованными пакетами, которые регистрируются шаблонами веб-приложений по умолчанию
- Поддержать режимы отладки и публикации так чтобы во время отладки упаковка пакетов не производилась и была автоматической, когда приложение размещается на сервере
Основные изменения
Для того, чтобы предоставить решение поставленных задач, во фреймворке были произведены некоторые изменения в моментах относящихся к тому как пакеты упаковки определяются и регистрируются и то, как производится ссылка на упакованные пакеты в представлении.
Изменения в регистрации
Используемый ранее механизм EnableDefaultBundles становится устаревшим и будет удален в финальной версии Visual Studio 2012.
Когда вы создаете новый проект, то можете обнаружить в нем новый файл App_StartBundleConfig.cs, в котором содержится единственный метод RegisterBundles, который вызывается в global.asax при запуске приложения.
Этот новый метод предназначен для выполнения всех задач для создания и регистрации всех пакетов упаковки вашего проекта. В предыдущих версиях фреймворка процесс регистрации сборок по умолчанию выполнялся с помощью вызова встроенных в сборку методов: RegisterTemplateBundles или EnableDefaultBundles. Теперь этот вызов доступен в виде кода в вашем проекте, что позволяет вам гибко управлять регистрацией и созданием пакетов упаковки.
Кроме того, в новой версии Visual Studio 2012 RC пакеты упаковки по умолчанию были разделены для разных типов скриптов: jQuery, jQuery UI, валидации и так далее. Это позволяет вам управлять наборами скриптов включаемых на страницы.
В добавок, было упрощен процесс регистрации пакетов упаковки. Например, если ранее приходилось писать следующий код:
bundle = new Bundle("~/Content/themes/base/css", csstransformer);
bundle.AddFile("~/Content/themes/base/jquery.ui.core.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.button.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css", true);
bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css", true);
bundles.Add(bundle);То в новой версии вы сможете определить его следующим образом:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));Как вы можете заметить, тут присутствует несколько улучшений:
- Создание строготипизированного класса упаковки для стилей и скриптов будет автоматически применять подходящий по умолчанию минификатор
- Добавлена поддержка цепочек определений скриптов, которая упрощает написание кода и позволяет избежать указания трех параметров конфигурирования
- Добавлена возможность передавать данные о скриптах через параметры, что позволяет избежать множественного вызова AddXXX.
Изменения в использовании пакетов упаковки в представлениях
В добавление к упрощению процесса создания и регистрации пакетов упаковки, был так же улучшен процесс использования пакетов в представлениях. Эти изменения должны значительно упростить задачу переконфигурирования того, как должны работать минификация и упаковка в зависимости от текущих задач разработки (отладка или релиз).
В предыдущих версиях ссылка на пакет упаковки в представлении создавалась с помощью хелпер-метода в теге script, например:
<link href=’@BundleTable.Bundles.ResolveBundleUrl(“~/Content/themes/base/css”)’ rel=”stylesheet” type=”text/css” />
<script src=’@BundleTable.Bundles.ResolveBundleUrl(“~/Scripts/js”)’></script>
Хотя такой подход в целом работает хорошо для целей разыменовывания URL и даже для получения уникального версионного URL, при работе в режиме отладки он показывает свои минусы. При отладке нам хотелось бы видеть каждый скрипт или стиль отдельной строкой на странице.
В новой версии эта проблема решается путем регистрации пакетов упаковки на странице с помощью следующего кода:
@Styles.Render(“~/Content/themes/base/css”)
@Scripts.Render(“~/Scripts/js”)
Дополнительно, эти хелпер-методы могут принимать параметры с массивом URL для рендеренга на страницах, так что вы можете указать вывод нескольких пакетов сразу:
@Styles.Render(“~/Content/themes/base/css”, “~/Content/css”)
Благодаря этому подходу, в режиме отладки скрипты и стили, которые определяются с помощью пакетов упаковки будут рендерится на странице в виде отдельных файлов. Когда вы поместите сайт в пролакшн на рабочий сервер эти скрипты и стили будут рендерится в виде упакованных минифицированных пакетов.
По умолчанию переключение режимов зависит от свойства IsDebuggingEnabled текущего контекста HttpContext, что означает, что вы можете управлять режимом работы механизма упаковки через настройку web.config:
<compilation debug=”false” />
Вы можете переопределить это поведение, реализовав собственный вариант статического свойства EnableOptimizations класса BundleTable.
Хотя данные свойства позволяют контролировать переключение между режимами отладки и релиза, может быть масса примеров того, когда вам нужно более гибкое регулирование и генерация разметки в зависимости от множества других факторов. В новой версии фреймворка продолжается поддержка этого сценария, благодаря хелпер-методам:
<script type=”text/javascript” src=’@Scripts.Url(“~/bundles/modernizr”)’></script>
Такой подход позволяет вам полностью контролировать разметку определения стилей и скриптов.
Подключение сторонних библиотек минификации
Web Optimization Framework, помимо стандартных JsMinify и CssMinify, поддерживает сторонние библиотеки для минификации и упаковки скриптов и стилей. В новой версии была добавлена возможность множественной трансформации файлов скриптов и стилей. Например, вы можете трансформировать LESS-стиль в CSS, а затем упаковать его:
var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle); Порядок такой трансформации определяется порядком добавления библиотек в коллекцию.
Автор: XaocCPS
