बंडल ... पारा-पा-पा हे! या बंडल ट्रांसफार्मर ग्रह 2 चल रहा है

मैं पिछले लेख के प्रारूप से थोड़ा आगे बढ़ूंगा और बंडल ट्रांसफार्मर के लिए दिलचस्प संदर्भों का चयन करने से पहले, मैं पिछले छह महीनों में परियोजना में हुए परिवर्तनों के बारे में बात करूंगा।

पिछले साल अगस्त तक, डॉटलेस लाइब्रेरी .NET डेवलपर कम्युनिटी में LESS के साथ काम करने का मुख्य टूल था, और ASP.NET के लिए लगभग सभी क्लाइंट ऑप्टिमाइज़ेशन टूल्स का हिस्सा था: कैसेट , स्क्विश , कॉम्ब्रिज और रिक्वेस्ट । बंडल ट्रांसफॉर्मर कोई अपवाद नहीं था: बंडलट्रेनफॉर्मर.लीस और बंडलट्रांसफॉर्मर.लीसलाइट मॉड्यूल में डॉटलेस और डॉटलेसक्लाइंटली लाइब्रेरी (लाइट संस्करण) का उपयोग किया गया था।

ट्विटर बूटस्ट्रैप 3.0 के बाहर आने पर स्थिति में आमूल परिवर्तन आया। बूटस्ट्रैप 3.0 स्टाइलशीट के लिए स्रोत कोड LESS 1.4.X में लिखा गया था, और उस समय डॉटलेस लाइब्रेरी ने LESS के पुराने संस्करण का समर्थन किया था (LESS 1.4.X के लिए समर्थन केवल दिसंबर 2013 में डॉटलेस में दिखाई दिया था)। वास्तव में, कम से कम रातोंरात काम करने के लिए सूचीबद्ध सभी उपकरण अप्रचलित हो गए।

इस स्थिति को ठीक करने के लिए, मैंने बंडलट्रांसफॉर्मर में लागू करने का निर्णय लिया। लेस एंड बंडलट्रांसफॉर्मर.लीस मॉड्यूल ने कम.जेएस प्रोजेक्ट के स्रोत कोड के आधार पर लेस कंपाइलर के अपने संस्करण का निर्माण किया। उस समय तक मुझे पहले से ही Node.js लाइब्रेरीज़ ( बंडलट्रांसफॉर्मर.कॉफ़ीस्क्रिप्ट , बंडलट्रेनफॉर्मर.टाइपस्क्रिप्ट , बंडलट्रेनफॉर्मर.उपयोगी.जे. और बंडलट्रांसफॉर्मर.कौस मॉड्यूल ) पर आधारित कंपाइलर्स (अनुवादक) और मिनिमाइज़र बनाने का बहुत अनुभव था। प्रारंभ में, अद्यतन बंडल ट्रैनसफॉर्मर। लेस और बंडलट्रांसफॉर्मर.लीस मॉड्यूल ने एक जावास्क्रिप्ट इंजन के रूप में । नेट लाइब्रेरी के लिए MSIE जावास्क्रिप्ट इंजन का उपयोग किया था, लेकिन इन मॉड्यूल की लोकप्रियता के साथ मुझे उन उपयोगकर्ताओं से कई संदेश प्राप्त होने लगे जिन्होंने मुझसे MSIE जावास्क्रिप्ट इंजन को छोड़ने के लिए कहा। और इसके बजाय .NET के लिए V8 इंजन कार्यान्वयन में से एक का उपयोग करें। इसलिए मैंने अपने नए प्रोजेक्ट - जावास्क्रिप्ट इंजन स्विचर पर काम शुरू किया।

जावास्क्रिप्ट इंजन स्विचर एक .NET पुस्तकालय है जो लोकप्रिय जावास्क्रिप्ट इंजन की बुनियादी सुविधाओं तक पहुंचने के लिए एकीकृत इंटरफ़ेस को परिभाषित करता है:

1. MSIE जावास्क्रिप्ट इंजन .Net के लिए
2. V8 (शुरू में, Noesis Javascript .NET लाइब्रेरी का उपयोग इंजन के कार्यान्वयन के रूप में किया गया था, लेकिन IIS 8.X के 64-बिट संस्करणों के साथ खराब संगतता के कारण इसे और अधिक आधुनिक लाइब्रेरी द्वारा बदल दिया गया था - Microsoft ClearScript.V8 )
3. जुरासिक

जावास्क्रिप्ट इंजन स्विचर आपको एक अलग जावास्क्रिप्ट इंजन का उपयोग करने के लिए किसी भी .NET प्रोजेक्ट को जल्दी और आसानी से स्विच करने की अनुमति देता है। इसके अलावा, आपके पास जावास्क्रिप्ट इंजन स्विचर का उपयोग करके अपने पसंदीदा जावास्क्रिप्ट इंजन को जोड़ने का अवसर है। ऐसा करने के लिए, एक एडाप्टर लिखें जो IJsEngine इंटरफ़ेस को लागू करता है या JavaScriptEngineSwitcher.Core नाम स्थान से JsEngineBase श्रेणी को इनहेरिट करता है, और उसके बाद इसे कॉन्फ़िगरेशन फ़ाइल ( Web.config या App.config ) के \configuration\jsEngineSwitcher\core\engines तत्व में पंजीकृत करता है।

संस्करण 1.8.0 के साथ शुरू, जावास्क्रिप्ट लाइब्रेरी के कोड के आधार पर बनाए गए सभी बंडल ट्रांसफार्मर मॉड्यूल ने जावास्क्रिप्ट इंजन स्विचर का उपयोग करना शुरू किया। बंडलट्रांसफॉर्मर.लीसलाइट मॉड्यूल का विकास बंद कर दिया गया था यह बंडलट्रांसफॉर्मर से अलग नहीं था। V8 इंजन का उपयोग करने की क्षमता ने हमें क्लीन- प्रोजेक्ट प्रोजेक्ट कोड के आधार पर बंडलट्रांसफॉर्मर.क्लीनकस मॉड्यूल बनाने की अनुमति दी।

इंटरनेट एक्सप्लोरर पर प्रत्यक्ष निर्भरता की कमी और LESS के नवीनतम संस्करणों के लिए समर्थन (वर्तमान में LESS 1.6.1 द्वारा समर्थित) ने बंडल ट्रांसफॉर्मर को अपने सभी प्रतियोगियों को पछाड़ने और NuGet गैलरी वेबसाइट रेटिंग के ASP.NET श्रेणी में 21 वां स्थान लेने की अनुमति दी। नए उपयोगकर्ताओं की निरंतर आमद ने बंडल ट्रांसफार्मर के बारे में प्रासंगिक तकनीकी लेखों के उद्भव में योगदान दिया है:

1. जेनिफर सेम्टनर का लेख "ASP.NET MVC 4 और ट्विटर बूटस्ट्रैप 3 को LESS के साथ स्थापित करना"
2. टॉम ड्यूपॉन्ट का लेख "बूटस्ट्रैप 3, लेस, बंडलिंग और ASP.NET MVC"
3. येवगेनी यारोस्लाव का पोस्ट " सॉफ्ट नेट ब्लॉग पर ASP.NET MVC प्रोजेक्ट्स में LESS का उपयोग" है
4. Kalint की पोस्ट "MVC 5 में Twitter बूटस्ट्रैप के साथ LESS काम करने के लिए मार्गदर्शिका" Neowin.net फोरम पर

इसके अलावा, कुछ सॉफ्टवेयर डेवलपर्स ने अपने उत्पादों में बंडल ट्रांसफार्मर को शामिल करना शुरू किया:

1. माइकल बर्ड डेमो प्रोजेक्ट "MVC4 बूटस्ट्रैप। {{डेमो प्रोजेक्ट"
2. वॉरेन बकले द्वारा Umbraco CMS के लिए Sassy एक्सटेंशन
3. टिम गिसेंस, वारेन बकले और जिवोन लियोपोल्ड द्वारा डिज़ाइन किया गया CMS Umbraco के लिए ऑप्टिमस एक्सटेंशन
4. प्रोजेक्ट "ओपन सरकारी डेटा पहल v6"
5. सीएमएस EonicWeb5

अब बंडल ट्रांसफॉर्मर के सबसे हड़ताली संदर्भों के चयन के लिए आगे बढ़ते हैं:

1. कोड का नाम "एपीएस" इंटरनेट रेडियो शो का 77 वां संस्करण

पिछले लेख में, मैंने पहले से ही बाइनरी रेडियो पर कोड नाम रेडियो शो "एपीएस" के 21 वें संस्करण के बारे में बात की थी, जिस पर स्थानीय डीजे ने बंडल ट्रांसफॉर्मर 1.6.5 की समीक्षा की। इस बार मैं भाग्यशाली था कि मैं इस रेडियो शो के 77 वें संस्करण का मेहमान बन गया। मैंने मुख्य रूप से बंडल ट्रांसफॉर्मर और WebMarkupMin के बारे में बात की थी, लेकिन चर्चा के दौरान निम्नलिखित विषयों पर भी चर्चा की गई थी: WebMatrix, ASP.NET वेब पेज, वेब अनिवार्य 2013, टाइपस्क्रिप्ट, विंडोज 8 और वेब सेवाएं। इस रेडियो कार्यक्रम की रिकॉर्डिंग VKontakte सामाजिक नेटवर्क पर बाइनरी रेडियो समूह में सुनी जा सकती है या एमपी 3 फ़ाइल के रूप में डाउनलोड की जा सकती है ।

2. ऑम्ब्रेको यूके फेस्ट 2013 सम्मेलन में ऑप्टिमस विस्तार की प्रस्तुति

ऑप्टिमस CMS Umbraco के लिए एक एक्सटेंशन है, जिसे Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क और बंडल ट्रांसफार्मर के आधार पर बनाया गया है। यह एक्सटेंशन Umbraco प्रशासनिक इंटरफ़ेस के माध्यम से बंडल बनाने के लिए सामने वाले सी # या VB.NET से अपरिचित है। ऑप्टिमस के लिए अतिरिक्त मॉड्यूल (प्रदाता) हैं जो आपको मध्यवर्ती भाषाओं के लिए समर्थन जोड़ने की अनुमति देते हैं: LESS, Sass / SCSS, CoffeeScript और TypeScript।

यह ध्यान देने योग्य है कि विस्तार के लेखक (टिम गिसेन्स और वॉरेन बकले) बहुत रचनात्मक रूप से इसके नाम की पसंद से संपर्क कर रहे हैं। नाम "ऑप्टिमस" एक साथ दो बुनियादी उत्पादों के नामों को बेहतर बनाता है:

1. यह Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क से "अनुकूलन" शब्द के अनुरूप है।
2. ट्रांसफॉर्मर ब्रह्मांड में एक मुख्य पात्र के नाम के साथ मेल खाता है - ऑप्टिमस प्राइम ।

यहां तक ​​कि विस्तार के लोगो में भी ट्रांसफॉर्मर-ऑटोबोट्स का प्रतीक है:

कम से कम रचनात्मक सम्मेलन " जिम्राको यूके फेस्ट 2013" में टिम गिसेन्स का भाषण नहीं था:



आप Opt के बारे में और जानकारी Tim Geissens के ब्लॉग और Warren Buckley के ट्रांसफॉर्मर पर प्राप्त कर सकते हैं ! भेस में रोबोट । "

3. Pluralsight ASP.NET बंडलिंग, न्यूनतमकरण और संसाधन अनुकूलन ट्यूटोरियल

ट्रैविस गोसलिन के ट्यूटोरियल "ASP.NET बंडलिंग, मिनिमेशन एंड रिसोर्स ऑप्टिमाइज़ेशन" में Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क के साथ काम करने के बारे में लगभग व्यापक जानकारी है (केवल ASP.NET वेब पेज में इस लाइब्रेरी का उपयोग करने का विषय नहीं बताया गया था)। पहले, इस तरह की जानकारी को थोड़ा-थोड़ा करके एकत्र किया जाना था: आधिकारिक दस्तावेज पढ़ें, हावर्ड डॉकिंग के ब्लॉग का पालन ​​करें, स्टैक ओवरफ्लो के जवाब की तलाश करें , और यहां तक ​​कि System.Web.Optimization.dll के असेंबली कोड का अध्ययन भी करें।

जैसा कि आपने पहले ही अनुमान लगाया था, ऐसे महान पाठ्यक्रम में बंडल ट्रांसफार्मर के लिए एक जगह थी। बंडल ट्रांसफॉर्मर के साथ काम करने के लिए दो वीडियो समर्पित हैं:



बंडलट्रांसफॉर्मर.लीस और बंडलट्रांसफॉर्मर.युई मॉड्यूल को स्थापित करने और कॉन्फ़िगर करने के उदाहरण का उपयोग करते हुए, वीडियो क्लिप "डेमो: बंडल ट्रांसफार्मर पैकेज", पाठ्यक्रम लेखक, बंडल ट्रांसफार्मर के साथ काम करने के बुनियादी सिद्धांतों की व्याख्या करता है और निम्नलिखित कोड उदाहरण देता है:

 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 वर्ग के डिफ़ॉल्ट कोड 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 का उपयोग करके इस कोड की मात्रा को कम कर सकते 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 वेब ऑप्टिमाइज़ेशन फ्रेमवर्क का उपयोग कर रहा हूं और इसकी आंतरिक संरचना को अच्छी तरह से जानता हूं, इस कोर्स से मैं खुद के लिए बहुत जोर देने में सक्षम था (विशेषकर पिछले दो मॉड्यूल से: "आर्किटेक्चर ऑप्टिमाइज़ेशन" और "परीक्षण अनुकूलन")।

निष्कर्ष

अंत में, मैं सभी तकनीकी विशेषज्ञों को धन्यवाद देना चाहता हूं जो मुझे बंडल ट्रांसफॉर्मर को जनता तक पहुंचाने में मदद करते हैं।