Эффективная веб-разработка c Visual Studio 2012: нововведения в упаковку и минификацию скриптов и стилей

Источник: habrahabr
habrahabr

Эффективная веб-разработка c Visual Studio 2012: нововведения в упаковку и минификацию скриптов и стилей перевод


С выходом Visual Studio 2012 инструмент отвечающий за автоматическую минификацию и упаковку скриптов и стилей Web Optimization Framework получил большое обновление. Эти изменения преследуют две цели:

  1. Предоставить полный контроль над упакованными пакетами, которые регистрируются шаблонами веб-приложений по умолчанию
  2. Поддержать режимы отладки и публикации так чтобы во время отладки упаковка пакетов не производилась и была автоматической, когда приложение размещается на сервере

Основные изменения


Для того, чтобы предоставить решение поставленных задач, во фреймворке были произведены некоторые изменения в моментах относящихся к тому как пакеты упаковки определяются и регистрируются и то, как производится ссылка на упакованные пакеты в представлении.

Изменения в регистрации


Используемый ранее механизм EnableDefaultBundles становится устаревшим и будет удален в финальной версии Visual Studio 2012.

Когда вы создаете новый проект, то можете обнаружить в нем новый файл App_Start\BundleConfig.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);

Порядок такой трансформации определяется порядком добавления библиотек в коллекцию.

Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=29326