👩🏻‍🎨 🔧 🤷🏾 विजुअल स्टूडियो 2012 के साथ प्रभावी वेब विकास: स्क्रिप्ट और शैलियों की पैकेजिंग और संशोधन में नवाचार 🛵 💃 👨‍🔧

विजुअल स्टूडियो 2012 की रिलीज़ के साथ, वेब ऑप्टिमाइज़ेशन फ्रेमवर्क की स्क्रिप्ट और शैलियों को स्वचालित रूप से छोटा करने और पैकेजिंग के लिए जिम्मेदार टूल को एक बड़ा अपडेट मिला। इन परिवर्तनों के दो लक्ष्य हैं:

पैक किए गए पैकेजों पर पूर्ण नियंत्रण प्रदान करें जो डिफ़ॉल्ट वेब एप्लिकेशन टेम्प्लेट द्वारा पंजीकृत हैं
डिबगिंग और प्रकाशन मोड का समर्थन करें ताकि डिबगिंग के दौरान पैकेज पैक न हों और सर्वर पर एप्लिकेशन होस्ट किए जाने पर स्वचालित हो

प्रमुख परिवर्तन

सेट कार्यों के लिए एक समाधान प्रदान करने के लिए, पैकेजिंग पैकेजों को कैसे निर्धारित किया जाता है और पंजीकृत किया जाता है और पैक किए गए पैकेजों के लिंक किस प्रकार दृश्य में किए जाते हैं, इस संदर्भ में कुछ बदलाव किए गए थे।

पंजीकरण परिवर्तन

पहले इस्तेमाल किया गया EnableDefaultBundles तंत्र अप्रचलित हो गया है और इसे विजुअल स्टूडियो 2012 के अंतिम संस्करण में हटा दिया जाएगा।

जब आप एक नया प्रोजेक्ट बनाते हैं, तो आपको इसमें एक नई फ़ाइल मिल सकती है, App_Start \ बंडलConfig.cs, जिसमें केवल RegisterBundles विधि होती है जिसे अनुप्रयोग शुरू होने पर Global.asax में कहा जाता है।

यह नया तरीका आपकी परियोजना के सभी पैकेजिंग पैकेज बनाने और पंजीकृत करने के लिए सभी कार्यों को करने के लिए डिज़ाइन किया गया है। फ्रेमवर्क के पिछले संस्करणों में, असेंबली को डिफ़ॉल्ट रूप से पंजीकृत करने की प्रक्रिया को विधानसभा में निर्मित विधियों को कॉल करके किया गया था: RegisterTemplateBundles या EnableDefaultBundles। अब यह कॉल आपके प्रोजेक्ट में एक कोड के रूप में उपलब्ध है, जो आपको पैकेजिंग पैकेजों के पंजीकरण और निर्माण को लचीले ढंग से प्रबंधित करने की अनुमति देता है।

इसके अलावा, विज़ुअल स्टूडियो 2012 आरसी के नए संस्करण में, विभिन्न प्रकार की स्क्रिप्ट के लिए डिफ़ॉल्ट पैकेजिंग पैकेज अलग किए गए थे: jQuery, jQuery यूआई, सत्यापन, और इसी तरह। यह आपको पृष्ठ पर शामिल स्क्रिप्ट के सेट को प्रबंधित करने की अनुमति देता है।

इसके अलावा, पैकेजिंग पैकेजों को पंजीकृत करने की प्रक्रिया को सरल बनाया गया है। उदाहरण के लिए, यदि आपको पहले निम्नलिखित कोड लिखना था:

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 के लिए कई कॉल से बचा जाता है।

विचारों में पैकेजिंग पैकेज के उपयोग में परिवर्तन

पैकेजिंग पैकेज बनाने और पंजीकृत करने की प्रक्रिया को सरल बनाने के अलावा, दृश्यों में पैकेज का उपयोग करने की प्रक्रिया में भी सुधार किया गया है। इन परिवर्तनों को पुन: निर्धारित करने के कार्य को बहुत सरल करना चाहिए कि वर्तमान विकास कार्यों (डिबगिंग या रिलीज़) के आधार पर मिनिफिकेशन और पैकेजिंग कैसे काम करना चाहिए।

पिछले संस्करणों में, उदाहरण के लिए, स्क्रिप्ट टैग में सहायक विधि का उपयोग करके पैकेज पैकेज का लिंक बनाया गया था:

<लिंक href = '@ bundTable.Bundles.ResolveBundleUrl ("~ / सामग्री / थीम / आधार / सीएसएस")' rel = "स्टाइलशीट" type = "text / css" />

<script src = '@ bundTable.Bundles.ResolveBundleUrl ("~ / लिपियों / js")'> </ script>

यद्यपि यह दृष्टिकोण आमतौर पर URL को डीफ़रेंसिंग के उद्देश्य से और यहां तक कि एक अद्वितीय संस्करण URL प्राप्त करने के लिए भी अच्छा काम करता है, जब यह डीबग मोड में काम करता है तो यह अपना विपक्ष दिखाता है। डिबगिंग करते समय, हम प्रत्येक स्क्रिप्ट या शैली को पृष्ठ पर एक अलग पंक्ति के रूप में देखना चाहेंगे।

नए संस्करण में, निम्नलिखित कोड का उपयोग करके पेज पर पैकेजिंग पैकेजों को पंजीकृत करके इस समस्या को हल किया गया है:

@ Styles.Render ("~ / सामग्री / थीम / आधार / सीएसएस")

@ स्क्रिप्स.रेंडर ("~ / लिपियों / जेएस")

इसके अतिरिक्त, ये सहायक विधियाँ पृष्ठों पर रेंडर करने के लिए URL की एक सरणी के साथ मापदंडों को स्वीकार कर सकती हैं, इसलिए आप एक साथ कई पैकेजों का आउटपुट निर्दिष्ट कर सकते हैं:

@ Styles.Render ("~ / सामग्री / थीम / आधार / सीएसएस", "~ / सामग्री / सीएसएस")

इस दृष्टिकोण के लिए, डिबग मोड में, स्क्रिप्ट और शैली जो पैकेजिंग पैकेजों का उपयोग करके निर्धारित की जाती हैं, उन्हें अलग-अलग फ़ाइलों के रूप में एक पृष्ठ पर प्रदान किया जाएगा। जब आप साइट को प्रोडक्शन सर्वर पर डालते हैं, तो ये स्क्रिप्ट और स्टाइल पैकेज्ड मिनीफाइड पैकेज के रूप में प्रस्तुत किए जाएंगे।

डिफ़ॉल्ट रूप से, मोड स्विचिंग वर्तमान HttpContext संदर्भ के IsDebuggingEnabled संपत्ति पर निर्भर करता है, जिसका अर्थ है कि आप web.config सेटिंग के माध्यम से पैकेजिंग तंत्र के ऑपरेटिंग मोड को नियंत्रित कर सकते हैं:

<संकलन डीबग = "गलत" />

आप बंडलटेबल क्लास की स्थिर संपत्ति EnableOptimifications के अपने स्वयं के संस्करण को लागू करके इस व्यवहार को ओवरराइड कर सकते हैं।

यद्यपि ये गुण आपको डिबगिंग और रिलीज़ मोड के बीच स्विचिंग को नियंत्रित करने की अनुमति देते हैं, ऐसे कई उदाहरण हो सकते हैं जब आपको कई अन्य कारकों के आधार पर अधिक लचीले विनियमन और मार्कअप की पीढ़ी की आवश्यकता होती है। हेल्पर तरीकों के लिए धन्यवाद, फ्रेमवर्क का नया संस्करण इस परिदृश्य का समर्थन करना जारी रखता है:

<script type = "text / javascript" src = '@ Scripts.Url ("~ / बंडलों / आधुनिकीकरण")> </ script>

यह दृष्टिकोण आपको शैलियों और लिपियों को परिभाषित करने के लिए मार्कअप को पूरी तरह से नियंत्रित करने की अनुमति देता है।

तृतीय-पक्ष मीनिंग लाइब्रेरी के कनेक्शन

वेब ऑप्टिमाइज़ेशन फ्रेमवर्क, मानक 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);

इस तरह के परिवर्तन का क्रम संग्रह में पुस्तकालयों को जोड़ने के क्रम से निर्धारित होता है।

विजुअल स्टूडियो 2012 के साथ प्रभावी वेब विकास: स्क्रिप्ट और शैलियों की पैकेजिंग और संशोधन में नवाचार

प्रमुख परिवर्तन

पंजीकरण परिवर्तन

विचारों में पैकेजिंग पैकेज के उपयोग में परिवर्तन

तृतीय-पक्ष मीनिंग लाइब्रेरी के कनेक्शन

More articles: