मैं विजुअल स्टूडियो और वेब अनिवार्यता 2012 के साथ बूटस्ट्रैप-3.0.0-wip कम फ़ोल्डर को .css में संकलित कैसे करूं?

Question

मैं विजुअल स्टूडियो 2012 एमवीसी वेब प्रोजेक्ट में शामिल .less फ़ाइलों (जैसे बूटस्ट्रैप-3.0.0-wip) के फ़ोल्डर को संकलित कैसे करूं?

मैं संकलित कर सकता हूं। बाहरी उपकरणों के साथ .css तक, लेकिन यह स्पष्ट नहीं है कि नवीनतम दृश्य स्टूडियो के साथ निर्माण के हिस्से के रूप में .css को फ़ाइलों को संकलित करने के लिए कैसे नहीं। (वर्तमान वीएस प्लगइन्स द्वारा प्रदान की गई .लेस संगतता के बावजूद *) मैं पूर्वावलोकन विंडो में .less फ़ाइलों के संकलित आउटपुट को देख सकता हूं, लेकिन मैं यह नहीं समझ सकता कि आउटपुट को कैसे सहेजना है या जब मैं प्रोजेक्ट चलाता हूं तो इसे स्वचालित रूप से संकलित करता हूं।

* वी.एस. 2012.2 अद्यतन, माइक्रोसॉफ्ट वेब डेवलपर उपकरण, और वेब अनिवार्य 2012

Answer 1

वेब अनिवार्यता के लिए changelog के आधार पर, मैं कहूंगा कि यह 31 जुलाई, 2013 ("निश्चित कम सापेक्ष @ आयात समस्या") पर तय किया गया था। मैंने बस विजुअल स्टूडियो 2012 (अपडेट 3) और नवीनतम वेब अनिवार्यता 2012 और बूटस्ट्रैप 3.0 के साथ एक एमवीसी 4 प्रोजेक्ट में यह कोशिश की, और यह ठीक काम करने लग रहा था (विशेष रूप से, यह bootstrap.less से bootstrap.css उत्पन्न कर रहा था)।

किसी के लिए जो ऐसा करना चाहता है, मैंने वेब अनिवार्यता स्थापित करने के बाद किया था, मेरे सीएसएस फ़ोल्डर में .less फाइलें जोड़ दी गईं, मेरे स्क्रिप्ट फ़ोल्डर में boostrap.js फ़ाइल जोड़ें, मेरे फ़ॉन्ट फ़ोल्डर में फ़ॉन्ट फ़ाइलें जोड़ें (बूटस्ट्रैप अब स्प्राइट छवि के बजाय फोंट का उपयोग करता है), और संकलित bootstrap.css और bootstrap.js फ़ाइलों को मेरे मुख्य दृश्य में शामिल किया गया। ध्यान दें कि मैंने समाधान सेटिंग्स उत्पन्न करने के लिए .less फ़ाइलों में से एक पर भी क्लिक किया है (वेब ​​अनिवार्यता द्वारा उपयोग की जाने वाली कुछ कॉन्फ़िगरेशन फ़ाइल)। और .css फ़ाइल को पहली बार उत्पन्न करने के लिए, मैंने अभी एक सतही परिवर्तन किया और इसे सहेजा।

Answer 2

कैसे वी.एस. के साथ एक .less फ़ाइल संकलन करने के लिए वेब अनिवार्य 2012

साथ सीएसएस को संकलित करने के लिए .less पाने के लिए 2012 + वेब अनिवार्यता 2012, आपकी .less फ़ाइलों को त्रुटि मुक्त होना चाहिए। प्रत्येक .less फ़ाइल जिसके लिए आयात या मिश्रण की आवश्यकता होती है उसे निर्दिष्ट करना होगा। अपनी .less फ़ाइल को हाइलाइट करें और पूर्वावलोकन फलक में आउटपुट का पूर्वावलोकन करें। यदि कोई त्रुटि निर्दिष्ट है, तो .css पर आपका संकलन काम नहीं करेगा।

यह निर्माण पर .less फ़ाइल संकलित करने के लिए वेब अनिवार्य विकल्प सेट करने में भी मदद करता है।

Tools > Options > Web Essentials > LESS > Compile On Build = TRUE 

आप इसे निम्नलिखित सेट करके 'css' फ़ोल्डर में संकलित करने के लिए भी सेट कर सकते हैं।

Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE 

यह सेटिंग जहां यह प्रत्येक फ़ाइल यह निर्माण प्रक्रिया के दौरान संकलित .less के लिए एक [filename] .css और [filename] .min.css फ़ाइल स्थानों कम निर्देशिका के भीतर एक सीएसएस फ़ोल्डर बनाता है।

---

क्यों बूटस्ट्रैप-3.0.0-WIP .less फ़ोल्डर वेब अनिवार्य 2012 (+ वी.एस. 2012) के साथ संकलन नहीं होगा करने के लिए के रूप में

एक) यह अगर फ़ाइलों सीएसएस करने के लिए संकलन नहीं होगा .less फ़ाइलों का निर्माण करने में कोई त्रुटि है।

बी) वेब अनिवार्यता 2012 (+ वीएस 2012) अभी तक एक फ़ोल्डर में एकाधिक .less फ़ाइलों को पहचानने के लिए प्रतीत नहीं होता है जो सभी एक एकल प्रविष्टि बिंदु फ़ाइल द्वारा आयात किए जाते हैं, जैसे Bootstrap.less फ़ाइल बूटस्ट्रैप 3.0-wip में (जब तक कि प्रत्येक फ़ाइल में इसके आवश्यक आयात सूचीबद्ध नहीं होते)। ऐसा संभव है क्योंकि अभी तक एंट्री पॉइंट फ़ाइल निर्दिष्ट करने का कोई तरीका नहीं है। इसकी वजह से, अधिकांश बूटस्ट्रैप .less फ़ाइलें संकलित करने में असफल होती हैं क्योंकि उनके चर और मिश्रित परिभाषित नहीं होते हैं। (चूंकि mixins.less और variables.less फ़ाइल को व्यक्तिगत फ़ाइलों में आयात नहीं किया गया है) और चूंकि वे संकलित करने में असफल होते हैं, इसलिए .less -> .css संकलन प्रक्रिया चुपचाप विफल हो जाती है।

सी) एक दूसरे पर निर्भर होने वाली .less फ़ाइलों के फ़ोल्डर को संकलित करने का तरीका (वेब ​​अनिवार्यता 2.7 के रूप में सभी फ़ाइलों को एक साथ एक बड़ी .less फ़ाइल में बूट करने के क्रम में बूटस्ट्रैप में सूचीबद्ध किया गया है। कम

डी) चूंकि चरण सी एक समय लेने वाला दर्द है, इसलिए मैं अब के लिए बाहरी कंपाइलर के साथ बूटस्ट्रैप की कम फ़ाइलों को संकलित करने की अनुशंसा करता हूं। कम से कम जब तक वेब अनिवार्यता आपको एक प्रविष्टि बिंदु सेट करने और आवश्यक आदेश में निर्भर .less फ़ाइलों के एक फ़ोल्डर को संकलित करने की अनुमति देता है।

Answer 3

बूटस्ट्रैप के फ़ोल्डर को संकलित करने के लिए। विजुअल स्टूडियो 2012 + वेब अनिवार्यता 2012 के साथ फ़ाइलें, आपको थोड़ा समायोजन करना होगा क्योंकि वेब अनिवार्य बूटस्ट्रैप कम फ़ोल्डर को संकलित नहीं कर सकते हैं जैसा कि जिथब पर स्वरूपित है।

एक दृश्य स्टूडियो वेब प्रोजेक्ट में bootstrap-3.0.0-wip folder जोड़ें। (मेरी परियोजना एक एएसपी.नेट एमवीसी 4 खाली प्रोजेक्ट बन गई, लेकिन इससे कोई फर्क नहीं पड़ता।)

बूटस्ट्रैप.लेस फ़ाइल (सभी प्रोजेक्ट कम फाइलों के लिए प्रवेश बिंदु) को एक फ़ोल्डर में ले जाएं, छोड़कर \ n फ़ोल्डर में अन्य सभी फाइलें।

यह इस तरह दिखना चाहिए:

bootstrap.less 
less\[all other less files].less 

इसके बाद, इस प्रकार @import बयानों के सभी के लिए "कम \" फ़ोल्डर उपसर्ग जोड़ने bootstrap.less फ़ाइल को संपादित:

// Core variables and mixins 
@import "less\variables.less"; 
@import "less\mixins.less"; 

// ...etc until all of the import statements include less\ at the start 

अब, परियोजना को बचाओ। स्थानांतरित bootstrap.less फ़ाइल को bootstrap.css और bootstrap.min.css फ़ाइल में संकलित किया जाना चाहिए जब तक कि आपके पास अभी भी संकलन त्रुटि न हो। (विवरण के लिए त्रुटि सूची देखें)

शेष .less फ़ाइलें संकलित नहीं होंगी क्योंकि उनमें अभी भी त्रुटियां हैं (व्यक्तिगत फ़ाइलों पर @ @ आयात विवरण नहीं), लेकिन इससे कोई फर्क नहीं पड़ता क्योंकि आपने महत्वपूर्ण संकलित किया है।

---

आप एक ASP.MVC 4 परियोजना के भीतर Bootstrap3.0.0-WIP स्रोत कोड को एकीकृत साथ-साथ आप जे एस फ़ाइलें संकलित करने के लिए MVC 4 की बंडलिंग का लाभ ले सकते।

आप अपने प्रोजेक्ट/सामग्री/बूटस्ट्रैप में एक फ़ोल्डर में बूटस्ट्रैप स्रोत कोड ड्रॉप मानते हुए, जोड़ने तेह अपने App_Start \ BundleConfig.cs फ़ाइल में निम्नलिखित:

// Bootstrap 3 script bundle 
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
      "~/Content/bootstrap/js/bootstrap-transition.js", 
      "~/Content/bootstrap/js/bootstrap-alert.js", 
      "~/Content/bootstrap/js/bootstrap-button.js", 
      "~/Content/bootstrap/js/bootstrap-carousel.js", 
      "~/Content/bootstrap/js/bootstrap-collapse.js", 
      "~/Content/bootstrap/js/bootstrap-dropdown.js", 
      "~/Content/bootstrap/js/bootstrap-modal.js", 
      "~/Content/bootstrap/js/bootstrap-tooltip.js", 
      "~/Content/bootstrap/js/bootstrap-popover.js", 
      "~/Content/bootstrap/js/bootstrap-scrollspy.js", 
      "~/Content/bootstrap/js/bootstrap-tab.js", 
      "~/Content/bootstrap/js/bootstrap-typeahead.js", 
      "~/Content/bootstrap/js/bootstrap-affix.js")); 

(नोट: इन js फ़ाइलों का आदेश प्रोजेक्ट के साथ मेकफ़ाइल से पुनर्प्राप्त किया गया था)

Answer 4

यह अब बहुत आसान हो गया है, और बहुत कम कार्रवाई की आवश्यकता है। सबसे पहले, मैं वीएस 2013 का उपयोग कर रहा हूं, लेकिन चरण वीएस 2012 के लिए समान होना चाहिए:

1. सुनिश्चित करें कि वेब अनिवार्यताएं ठीक से स्थापित हैं।
2. के तहत उपकरण/विकल्प/वेब अनिवार्य/कम, यह सुनिश्चित करें कि ऑटो संकलन निर्भर फ़ाइलों को बचाने केसच है, और बचाने केसच है पर संकलित फ़ाइलें।
3. अपने वेब अनुप्रयोग परियोजना वर्तमान में पूर्व संकलित NuGet पैकेज का उपयोग कर रहा है बूटस्ट्रैप, या यदि आप स्वयं अपनी परियोजना के लिए बूटस्ट्रैप कहा, उसे निकाल दें।
4. NuGet का उपयोग करके, बूटस्ट्रैप कम स्रोत पैकेज को अपने वेब एप्लिकेशन प्रोजेक्ट में जोड़ें।
5. एक नया बूटस्ट्रैप.लेस फ़ाइल को ~/सामग्री फ़ोल्डर (एमवीसी) में जोड़ें।
6. इस फ़ाइल की संपूर्ण सामग्री हटाएं, फिर इस फ़ाइल में ~/सामग्री/बूटस्ट्रैप/bootstrap.less फ़ाइल पर क्लिक करें और खींचें। यह @import "बूटस्ट्रैप/बूटस्ट्रैप" बनाएगा; आपकी नई फाइल में प्रवेश।
7. इस फ़ाइल को सीएसएस फ़ाइलों में संकलित करने के लिए, आपको बस फ़ाइल को सहेजना है (यानी CTRL-S दबाएं, या फ़ाइल सहेजें बटन)।
8. यदि आप फ़ाइलों में कोई भी परिवर्तन करते हैं, तो आपको बस इतना करना है कि इस फ़ाइल को पुनः सहेजें।

ऐसा करने से आपको एक नया संस्करण उपलब्ध होने पर आसानी से अपने NuGet पैकेज को अपडेट करने की अनुमति मिल जाएगी। आप @import लाइन के बाद कोई भी कम परिवर्तनीय परिवर्तन जोड़ सकते हैं।

ENJOY!