Bundle Transformer Bundle Transformer ASP NET Web Optimization
![](https://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-1.jpg)
![Что такое Bundle Transformer? Bundle Transformer – это модульное расширение для ASP. NET Web Что такое Bundle Transformer? Bundle Transformer – это модульное расширение для ASP. NET Web](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-2.jpg)
Что такое 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 Краткий обзор возможностей Microsoft ASP. NET Web Optimization Framework](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-3.jpg)
Краткий обзор возможностей Microsoft ASP. NET Web Optimization Framework
![Проект Web Optimization Microsoft ASP. NET Web Optimization Framework – это библиотека, позволяющая автоматизировать Проект Web Optimization Microsoft ASP. NET Web Optimization Framework – это библиотека, позволяющая автоматизировать](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-4.jpg)
Проект 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 :
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-5.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-6.jpg)
![Создание bundle`ов Создавать bundle` ы следует в файле _App. Start. cshtml: @using System. Web. Создание bundle`ов Создавать bundle` ы следует в файле _App. Start. cshtml: @using System. Web.](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-7.jpg)
Создание 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 Регистрация bundle`ов в представлениях Пример регистрации bundle` ов в файле _Site. Layout. cshtml: @using](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-8.jpg)
Регистрация 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>
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-9.jpg)
![HTML-разметка в режиме отладки <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page HTML-разметка в режиме отладки <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-10.jpg)
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 HTML-разметка в режиме выпуска <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-11.jpg)
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> " ">
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-12.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-13.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-14.jpg)
![Подключение Bundle Transformer @using System. Web. Optimization; @using Bundle. Transformer. Core. Orderers; @using Bundle. Подключение Bundle Transformer @using System. Web. Optimization; @using Bundle. Transformer. Core. Orderers; @using Bundle.](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-15.jpg)
Подключение 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); …
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-16.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-17.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-18.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-19.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-20.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-21.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-22.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-23.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-24.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-25.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-26.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-27.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-28.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-29.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-30.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-31.jpg)
![Декларативное подключение модулей производится с помощью файла Web. config: <? xml version="1. 0" encoding="utf-8"? Декларативное подключение модулей производится с помощью файла Web. config: <? xml version="1. 0" encoding="utf-8"?](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-32.jpg)
Декларативное подключение модулей производится с помощью файла 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" /> …
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-33.jpg)
![](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-34.jpg)
![Пример сайта ASP. NET Web Pages По адресу http: // bundletransformer. codeplex. com/releases/view/96306 можно Пример сайта ASP. NET Web Pages По адресу http: // bundletransformer. codeplex. com/releases/view/96306 можно](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-35.jpg)
Пример сайта 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. Ссылки • http: // bundletransformer. codeplex. com – страница проекта Bundle Transformer на Code.](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-36.jpg)
Ссылки • 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: Спасибо за внимание! АНДРЕЙ ТАРИЦЫН Email: taritsyn@gmail. com Сайт: www. taritsyn. ru Twitter: http:](http://slidetodoc.com/presentation_image/4480b9db074498208d5c22b9d3759b97/image-37.jpg)
Спасибо за внимание! АНДРЕЙ ТАРИЦЫН Email: taritsyn@gmail. com Сайт: www. taritsyn. ru Twitter: http: //twitter. com/taritsyn
- Slides: 37