html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Эффективная веб-разработка 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); 

Порядок такой трансформации определяется порядком добавления библиотек в коллекцию.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

34
    +16 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • Wanhallen
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции