company_banner

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

Автор оригинала: Howard Dierking
  • Перевод

С выходом 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); 

Порядок такой трансформации определяется порядком добавления библиотек в коллекцию.
Microsoft
476,00
Microsoft — мировой лидер в области ПО и ИТ-услуг
Поделиться публикацией

Комментарии 14

    0
    Ситуация с CDN как-то разрешилась?
      +1
      появилась начальная поддержка:

        +2
        bundles.UseCdn = true;
        
        var jq = new ScriptBundle("~/bundles/jquery")
           .Include("~/Scripts/jquery-1.*");
        
        jq.CdnPath = http://ajax.aspnetcdn.com/ajax...
        
        bundles.Add(jq);
    +3
    Хаос, у тебя термины гуляют и литературу давно не читал.
    Кто ж так говорит: «пакет упаковки».
    То «пакет упаковки», то «сборка», то «упакованные пакеты».
    При переводе всегда нужно работать над терминами, а не писать, то как слышится слово.
    И минификация это просто зачет.
    пишу как слышу?

    «нововведения в упаковку и минификацию скриптов и стилей»
    по-русски:«нововведения для упаковки и минимизации скриптов и стилей»

    Почитай книжку Пелевина, Р.А.Б. :)
    Освежит твои мысли в литературном направлении.
    А то ощущение, что ты так торопился переводить, что забил на самые основные моменты.
      0
      Р.А.Б. вроде как книжка Минаева, не?
        0
        Разве минимизация и минификация обозначают одно и то же?
        Мне казалось, что минимизация функции (minimize, поиск минимума), но минификация скрипта (minify, уменьшение размера при той же функциональности). Хотя есть минимизация логических функций, задача которой заключается в уменьшении количества членов и переменных, так что наверное и правда такой термин некорректно применять.
        0
        Оригинал лежит 504 Gateway Time-out
          0
          вроде работает
            0
            Да, уже все в порядке
          +1
          Пример с трансформацией LESS будет некорректно работать в режиме отладки (когда отображаются ссылки на отдельные файлы), если в файле Web.config не зарегистрирован HTTP-хэдлер для файлов с расширением *.less. В новой версии Bundle Transformer я постарался решить данную проблему путем добавления HTTP-хэндлеров в модули, которые отвечают за трансляцию LESS, Sass, SCSS и CoffeeScript.
            0
            А всё это добро без 12-ой студии через какой-нить NuGet вытащить можно? А то у меня от нового интерфейса глаза болят.
              +1
              На NuGet доступен пакет Microsoft ASP.NET Web Optimization Framework. Сборка System.Web.Optimization.dll скомпилирована под .NET Framework 4 и ее можно использовать даже в ASP.NET MVC 3 (сам проверял).
                0
                А вообще, есть возможность установить ASP.NET MVC 4 RC под Visual Studio 2010. Достаточно просто скачать и установить ASP.NET MVC 4 Release Candidate for Visual Studio 2010 SP1 and Visual Web Developer 2010 SP1. Единственный недостаток этой версии в том, что она написана под .NET Framework 4.0 и не будет поддерживать новые возможности асинхронного программирования из .NET 4.5.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое