Bundle Transformer Bundle Transformer ASP NET Web Optimization
Что такое Bundle Transformer? Bundle Transformer – это модульное расширение для ASP. NET Web Optimization Framework. Microsoft Исходный код Bundle Transformer распространяется под Open Source- лицензией Apache License 2. 0 и его можно загрузить с Code. Plex - http : // bundletransformer. codeplex. com. Для установки Bundle Transformer следует использовать пакетный менеджер Nu. Get ( http: // nuget. org ).
Краткий обзор возможностей Microsoft ASP. NET Web Optimization Framework
Проект Web Optimization Microsoft ASP. NET Web Optimization Framework – это библиотека, позволяющая автоматизировать клиентскую оптимизацию в ASP. NET -приложениях. Данный продукт также известен под следующими названиями • ASP. NET Bundling and Minification • System. Web. Optimization • Microsoft. Web. Optimization • ASP. NET Optimization – Bundling :
Создание bundle`ов Создавать bundle` ы следует в файле _App. Start. cshtml: @using System. Web. Optimization; @{ var bundles = Bundle. Table. Bundles; var css. Transformer = new Css. Minify (); var js. Transformer = new Js. Minify (); var common. Styles. Bundle = new Bundle("~/Bundles/Common. Styles" ); common. Styles. Bundle. Include("~/Content/Site. css", …); common. Styles. Bundle. Transforms. Add(css. Transformer ); bundles. Add(common. Styles. Bundle); var modernizr. Bundle = new Bundle("~/Bundles/Modernizr" ); modernizr. Bundle. Include("~/Scripts/modernizr-2. *"); modernizr. Bundle. Transforms. Add(js. Transformer ); bundles. Add(modernizr. Bundle); var common. Scripts. Bundle = new Bundle("~/Bundles/Common. Scripts" ); common. Scripts. Bundle. Include("~/Scripts/Microsoft. Ajax. js", "~/Scripts/jquery-{version}. js", … "~/Scripts/knockout-2. *"); common. Scripts. Bundle. Transforms. Add(js. Transformer ); bundles. Add(common. Scripts. Bundle); …
Регистрация bundle`ов в представлениях Пример регистрации bundle` ов в файле _Site. Layout. cshtml: @using System. Web. Optimization; <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@Page. Title - My ASP. NET Web Page</title> <link href="~/favicon. ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles. Render("~/Bundles/Common. Styles" ) @Scripts. Render("~/Bundles/Modernizr" ) … </head> <body> … @Scripts. Render("~/Bundles/Common. Scripts" ) @Render. Section("Scripts", required: false) </body> </html>
HTML-разметка в режиме отладки <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - My ASP. NET Web Page</title> <link href="/favicon. ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> … <link href="/Content/themes/base/jquery. ui. dialog. css" rel="stylesheet"/> <link href="/Content/Site. css" rel="stylesheet"/> … <script src="/Scripts/modernizr-2. 5. 3. js"></ script > … </head> <body> … <script src="/Scripts/jquery-1. 7. 1. js"></ script > … <script src="/Scripts/Microsoft. Ajax. debug. js"></ script > <script src="/Scripts/knockout-2. 1. 0. debug. js"></ script > </body> </html>
HTML-разметка в режиме выпуска <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - My ASP. NET Web Page</title> <link href="/favicon. ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Bundles/Common. Styles? v=acdf. Dq. Hyv. HEi 8 pq. LV 2 f. VSTlljje-0 Rs. Wq 4 OO 3 F 23 tk. Q 1 rel="stylesheet"/> <script src="/Bundles/Modernizr? v=jmd. Bhqk. I 3 e. Ma. PZJdu. Ay. IYBj 7 Mp. Xr. Gd 2 Zqm. HAOSNe. Ycg 1 "> </script> … </head> <body> … <script src="/Bundles/Common. Scripts? v=oq. T 9 IP 1 UU 3 z. Hqtey. Kf. YQBTl 5 GRXqr 3 I-YZ 4 x. PZW 6 ta. E 1 </script> </body> </html> " ">
Подключение Bundle Transformer @using System. Web. Optimization; @using Bundle. Transformer. Core. Orderers; @using Bundle. Transformer. Core. Transformers; @{ var var bundles = Bundle. Table. Bundles; css. Transformer = new Css. Transformer (); js. Transformer = new Js. Transformer (); null. Orderer = new Null. Orderer (); var common. Styles. Bundle = new Bundle("~/Bundles/Common. Styles"); common. Styles. Bundle. Include("~/Content/Site. css", …); common. Styles. Bundle. Transforms. Add(css. Transformer ); common. Styles. Bundle. Orderer = null. Orderer ; bundles. Add(common. Styles. Bundle); var modernizr. Bundle = new Bundle("~/Bundles/Modernizr"); modernizr. Bundle. Include("~/Scripts/modernizr-2. *"); modernizr. Bundle. Transforms. Add(js. Transformer ); modernizr. Bundle. Orderer = null. Orderer ; bundles. Add(modernizr. Bundle); var common. Scripts. Bundle = new Bundle("~/Bundles/Common. Scripts"); common. Scripts. Bundle. Include("~/Scripts/Microsoft. Ajax. js", …); common. Scripts. Bundle. Transforms. Add(js. Transformer ); common. Scripts. Bundle. Orderer = null. Orderer ; bundles. Add(common. Scripts. Bundle); …
Декларативное подключение модулей производится с помощью файла Web. config: <? xml version="1. 0" encoding="utf-8"? > <configuration> <bundle. Transformer xmlns="http: //tempuri. org/Bundle. Transformer. Configuration. xsd"> <core> <css default. Minifier ="Kryzhanovsky. Css. Minifier" > <minifiers> … <add name="Kryzhanovsky. Css. Minifier" type="…" /> </minifiers> <translators> … <add name="Less. Translator" type="…" enabled ="true" /> </translators> </css> <js default. Minifier ="Closure. Remote. Js. Minifier" > <minifiers> … <add name="Closure. Remote. Js. Minifier" type="…" /> </minifiers> <translators> … <add name="Type. Script. Translator" type="…" enabled ="true" /> …
Пример сайта ASP. NET Web Pages По адресу http: // bundletransformer. codeplex. com/releases/view/96306 можно скачать архив с примером сайта ASP. NET Web Pages , использующего Bundle Transformer (установлены все модули, кроме Bundle. Transformer. WG ):
Ссылки • http: // bundletransformer. codeplex. com – страница проекта Bundle Transformer на Code. Plex • http: // github. com/Taritsyn/Msie. Java. Script. Engine - страница проекта MSIE JS Engine (использую для запуска под. NET кода следующих JSбиблиотек : Packer, Uglify. JS, Coffee. Script и Type. Script ) на Git. Hub • www. taritsyn. ru – мой блог • http: // aspnetoptimization. codeplex. com – страница проекта Microsoft ASP. NET Web Optimization Framework на Code. Plex • http: // www. asp. net/mvc/tutorials/mvc-4/bundling-and-minification учебник по Microsoft ASP. NET Web Optimization Framework • http: //codebetter. com/howarddierking / - блог Howard Dierking (руководитель проекта Web Optimization ) • http: //www. microsoft. com/Web/webmatrix / - сайт среды разработки Web. Matrix • http: // www. asp. net/web-pages - материалы по ASP. NET Web Pages
Спасибо за внимание! АНДРЕЙ ТАРИЦЫН Email: taritsyn@gmail. com Сайт: www. taritsyn. ru Twitter: http: //twitter. com/taritsyn
- Slides: 37