Бандл… Пара-пара-па хэй! или Bundle Transformer шагает по планете 2

^[1]

Я немного отойду от формата предыдущей статьи ^[2] и прежде чем привести подборку интересных упоминаний о Bundle Transformer ^[3], я расскажу об изменениях, которые произошли в проекте за последние полгода.

До августа прошлого года библиотека dotless ^[4] была основным средством для работы с LESS в сообществе .NET-разработчиком, и входила в состав практически всех инструментов клиентской оптимизации для ASP.NET: Cassette ^[5], SquishIt ^[6], Combres ^[7] и RequestReduce ^[8]. Bundle Transformer также не являлся исключением: библиотеки dotless и DotlessClientOnly (облегченная версия) использовались в модулях BundleTransformer.Less ^[9] и BundleTransformer.LessLite.

Ситуация в корне изменилась, когда вышел Twitter Bootstrap 3.0 ^[10]. Исходники таблиц стилей Bootstrap 3.0 были написаны на LESS 1.4.X, а библиотека dotless на тот момент поддерживала более старую версию LESS (поддержка LESS 1.4.X появилась в dotless только в декабре 2013 года). Фактически все перечисленные инструменты для работы с LESS в одночасье стали морально устаревшими.

Для того чтобы исправить сложившуюся ситуацию, я решил реализовать в модулях BundleTransformer.Less и BundleTransformer.LessLite собственную версию LESS-компилятора на основе исходного кода проекта less.js ^[11]. К тому времени у меня уже был большой опыт создания компиляторов (трансляторов) и минимизаторов на базе Node.js-библиотек (модули BundleTransformer.CoffeeScript ^[12], BundleTransformer.TypeScript ^[13], BundleTransformer.UglifyJs ^[14] и BundleTransformer.Csso ^[15]). Первоначально в обновленных модулях BundleTransformer.Less и BundleTransformer.LessLite в качестве JavaScript-движка использовалась библиотека MSIE JavaScript Engine for .Net ^[16], но с ростом популярности этих модулей я стал получать много сообщений от пользователей, которые просили меня отказаться от MSIE JavaScript Engine for .Net и использовать вместо нее одну из реализаций движка V8 под .NET. Так я начал работу над своим новым проектом — JavaScript Engine Switcher ^[17].

JavaScript Engine Switcher – это .NET-библиотека, которая определяет унифицированный интерфейс доступа к базовым возможностям популярных JavaScript-движков:

1. MSIE JavaScript Engine for .Net
2. V8 (первоначально в качестве реализации движка использовалась библиотека Noesis Javascript .NET ^[18], но из-за плохой совместимости с 64-битными версиями IIS 8.X она была заменена на более современную библиотеку — Microsoft ClearScript.V8 ^[19])
3. Jurassic ^[20]

JavaScript Engine Switcher позволяет легко и быстро переключить любой .NET-проект на использование другого JavaScript-движка. Кроме того, у вас есть возможность подключить свой любимый JavaScript-движок с помощью JavaScript Engine Switcher. Для этого нужно написать адаптер, который реализует интерфейс IJsEngine или наследует класс JsEngineBase из пространства имен JavaScriptEngineSwitcher.Core, а затем зарегистрировать его в элементе configurationjsEngineSwitchercoreengines конфигурационного файла (Web.config или App.config).

Начиная с версии 1.8.0 все модули Bundle Transformer, созданные на основе кода JavaScript-библиотек, стали использовать JavaScript Engine Switcher. Разработка модуля BundleTransformer.LessLite была прекращена, т.к. он уже ничем не отличался от BundleTransformer.Less. Возможность использования движка V8 позволила на основе кода проекта Clean-css ^[21] создать модуль BundleTransformer.CleanCss ^[22].

Отсутствие прямой зависимости от Internet Explorer и поддержка самых последних версий LESS (на данный момент поддерживается LESS 1.6.1) позволила Bundle Transformer обойти всех своих конкурентов и занять 21-е место в категории ASP.NET ^[23] рейтинга сайта NuGet Gallery. Постоянный приток новых пользователей способствовал появлению актуальных технических статей о Bundle Transformer:

1. Статья Дженнифер Семтнер «Setting up ASP.NET MVC 4 and Twitter Bootstrap 3 with LESS» ^[24]
2. Статья Тома Дюпона «Bootstrap 3, LESS, Bundling, and ASP.NET MVC» ^[25]
3. Пост Евгения Ярославова «Использование LESS в проектах ASP.NET MVC» ^[26] в блоге компании «ТиЭс Софт» ^[27]
4. Пост пользователя Kalint «Guide to getting LESS working with Twitter Bootstrap in MVC 5» ^[28] на форуме сайта Neowin.net ^[29]

Помимо этого некоторые разработчики ПО стали включать Bundle Transformer в состав своих продуктов:

1. Демонстрационный проект Майкла Берда «MVC4 Bootstrap .less{} Demo Project» ^[30]
2. Расширение Sassy ^[31] для CMS Umbraco, разработанное Уорреном Бакли
3. Расширение Optimus ^[32] для CMS Umbraco, разработанное Тимом Гейссенсом, Уорреном Бакли и Дживоном Леопольдом
4. Проект «Open Government Data Initiative v6» ^[33]
5. CMS EonicWeb5 ^[34]

А теперь перейдем к подборке наиболее ярких упоминаний о Bundle Transformer:

1. 77-й выпуск интернет радио-шоу Code Name «APS»

В предыдущей статье я уже рассказывал о 21-м выпуске радио-шоу Code Name «APS» ^[35] на Бинарном Радио ^[36], в эфире которого местные диджеи сделали обзор Bundle Transformer 1.6.5. На этот раз мне посчастливилось стать гостем 77-го выпуска данного радио-шоу. В основном я рассказывал о Bundle Transformer и WebMarkupMin ^[37], но в процессе обсуждения также были затронуты следующие темы: WebMatrix, ASP.NET Web Pages, Web Essentials 2013, TypeScript, Windows 8 и веб-сервисы. Запись данной радио-передачи можно прослушать в группе Бинарного Радио ^[38] в социальной сети «ВКонтакте» или скачать в виде MP3-файла ^[39].

2. Презентация расширения Optimus на конференции «Umbraco UK Fest 2013»

Optimus ^[32] – это расширение для CMS Umbraco ^[40], созданное на основе Microsoft ASP.NET Web Optimization Framework ^[41] и Bundle Transformer. Данное расширение позволяет front-end разработчикам, не знакомым c C# или VB.NET, создавать бандлы через интерфейс административной части Umbraco. Также для Optimus существуют дополнительные модули (провайдеры), которые позволяют добавить поддержку промежуточных языков: LESS, Sass/SCSS, CoffeeScript и TypeScript.

Стоит отметить, что авторы расширения (Тим Гейссенс и Уоррен Бакли) очень творчески подошли к выбору его названия. Название «Optimus» одновременно обыгрывает названия двух базовых продуктов:

1. Оно созвучно со словом «Optimization» из Microsoft ASP.NET Web Optimization Framework.
2. Совпадает с именем одного из главных персонажей вселенной трансформеров — Оптимуса Прайма ^[42].

Даже в логотипе расширения присутствует эмблема трансформеров-автоботов ^[43]:
^[44]
Не менее креативным было и выступление Тима Гейссенса на конференции «Umbraco UK Fest 2013» ^[45]:

Более подробную информацию об Optimus вы можете найти в блоге Тима Гейссенса ^[46] и статье Уоррена Бакли «Transformers! Robots in Disguise» ^[47].

3. Обучающий курс «ASP.NET Bundling, Minification & Resource Optimization» от Pluralsight

Обучающий курс Трэвиса Госселина «ASP.NET Bundling, Minification & Resource Optimization» ^[48], содержит практически исчерпывающую информацию о работе с библиотекой Microsoft ASP.NET Web Optimization Framework (не была затронута только тема использования данной библиотеки в ASP.NET Web Pages). Раньше подобную информацию приходилось собирать по крупицам: читать официальную документацию ^[49], следить за блогом Говарда Дёркинга ^[50], искать ответы на Stack Overflow ^[51] и даже изучать код сборки System.Web.Optimization.dll с помощью декомпилятора.

Как вы уже успели догадаться, в таком большом курсе нашлось место и для Bundle Transformer. Работе с Bundle Transformer посвящены два видео-ролика:

^[52]

В видео-ролике «Demo: Bundle Transformer Package» автор курса на примере установки и настройки модулей BundleTransformer.Less и BundleTransformer.Yui ^[53] объясняет основные принципы работы с Bundle Transformer и приводит следующий пример кода:

bundles.Add(new Bundle("~/bundles/app", new JsTransformer())
	.IncludeDirectory("~/Scripts/app", "*.js"));

bundles.Add(new Bundle("~/styles/site", new CssTransformer()).Include(
	"~/Content/bootstrap/bootstrap.css",
	"~/Content/site.less",
	"~/Content/toastr.css"));

В принципе, это корректный код, но его можно сделать более производительным, если в качестве построителя кода по умолчанию использовать экземпляр класса NullBuilder:

var nullBuilder = new NullBuilder();

bundles.Add(new Bundle("~/bundles/app", new JsTransformer())
	{
		Builder = nullBuilder
	}
	.IncludeDirectory("~/Scripts/app", "*.js"));

bundles.Add(new Bundle("~/styles/site", new CssTransformer())
	{
		Builder = nullBuilder
	}
	.Include(
		"~/Content/bootstrap/bootstrap.css",
		"~/Content/site.less",
		"~/Content/toastr.css"));

Кроме того, объем данного кода можно сократить, если воспользоваться классами CustomScriptBundle и CustomStyleBundle:

bundles.Add(new CustomScriptBundle("~/bundles/app")
	.IncludeDirectory("~/Scripts/app", "*.js"));

bundles.Add(new CustomStyleBundle("~/styles/site")
	.Include(
		"~/Content/bootstrap/bootstrap.css",
		"~/Content/site.less",
		"~/Content/toastr.css"));

Несмотря на то, что я давно использую Microsoft ASP.NET Web Optimization Framework и хорошо знаю его внутреннее устройство, из этого курса я смог подчеркнуть для себя много нового (особенно из двух последних модулей: «Architecting Optimizations» и «Testing Optimizations»).

Заключение

В заключении, я хотел бы поблагодарить всех технических специалистов, которые помогают мне продвигать Bundle Transformer в широкие массы.

Автор: Taritsyn

Источник ^[54]