उपकरण बनाएं
हमारे दस्तावेज़ बनाने, स्रोत कोड संकलित करने, परीक्षण चलाने, और बहुत कुछ करने के लिए बूटस्ट्रैप की शामिल npm स्क्रिप्ट का उपयोग करना सीखें।
टूलींग सेटअप
बूटस्ट्रैप अपने बिल्ड सिस्टम के लिए npm स्क्रिप्ट का उपयोग करता है। हमारे package.json में फ्रेमवर्क के साथ काम करने के लिए सुविधाजनक तरीके शामिल हैं, जिसमें कोड संकलित करना, परीक्षण चलाना, और बहुत कुछ शामिल हैं।
हमारे बिल्ड सिस्टम का उपयोग करने और हमारे दस्तावेज़ों को स्थानीय रूप से चलाने के लिए, आपको बूटस्ट्रैप की स्रोत फ़ाइलों और Node. इन चरणों का पालन करें और आपको रॉक करने के लिए तैयार रहना चाहिए:
- Node.js डाउनलोड और इंस्टॉल करें , जिसका उपयोग हम अपनी निर्भरता को प्रबंधित करने के लिए करते हैं।
- या तो बूटस्ट्रैप के स्रोत डाउनलोड करें या बूटस्ट्रैप के भंडार को फोर्क करें ।
- रूट
/bootstrapनिर्देशिका पर नेविगेट करें और package.jsonnpm installमें सूचीबद्ध हमारी स्थानीय निर्भरता को स्थापित करने के लिए चलाएं ।
पूरा होने पर, आप कमांड लाइन से प्रदान की गई विभिन्न कमांड को चलाने में सक्षम होंगे।
एनपीएम स्क्रिप्ट का उपयोग करना
हमारे package.json में निम्नलिखित कमांड और कार्य शामिल हैं:
| काम | विवरण |
|---|---|
npm run dist |
npm run dist/dist/संकलित फ़ाइलों के साथ निर्देशिका बनाता है । Sass , Autoprefixer , और terser का उपयोग करता है। |
npm test |
चलने के बाद स्थानीय स्तर पर परीक्षण चलाता हैnpm run dist |
npm run docs-serve |
स्थानीय रूप से प्रलेखन बनाता और चलाता है। |
npm runसभी npm स्क्रिप्ट देखने के लिए दौड़ें ।
सास
बूटस्ट्रैप v4 हमारे Sass स्रोत फ़ाइलों को CSS फ़ाइलों में संकलित करने के लिए Node Sass का उपयोग करता है (हमारी निर्माण प्रक्रिया में शामिल)। अपनी खुद की संपत्ति पाइपलाइन का उपयोग करते हुए Sass को संकलित करते समय समान उत्पन्न CSS के साथ समाप्त करने के लिए, आपको एक Sass कंपाइलर का उपयोग करने की आवश्यकता होगी जो कम से कम उन सुविधाओं का समर्थन करता है जो Node Sas करता है। यह नोट करना महत्वपूर्ण है क्योंकि 26 अक्टूबर, 2020 तक, LibSass और इसके ऊपर बने पैकेज-जिसमें Node Sass शामिल हैं- को हटा दिया गया है।
यदि आपको नए Sass सुविधाओं या नए CSS मानकों के साथ संगतता की आवश्यकता है, तो Dart Sass अब Sass का प्राथमिक कार्यान्वयन है और एक JavaScript API का समर्थन करता है जो Node Sass (डार्ट Sass के GitHub पृष्ठ पर सूचीबद्ध कुछ अपवादों के साथ) के साथ पूरी तरह से संगत है ।
हम ब्राउज़र राउंडिंग के साथ समस्याओं को रोकने के लिए Sass गोलाई सटीकता को 6 तक बढ़ाते हैं (डिफ़ॉल्ट रूप से, यह Node Sass में 5 है)। यदि आप डार्ट सास का उपयोग करते हैं तो यह कुछ ऐसा नहीं होगा जिसे आपको समायोजित करने की आवश्यकता है, क्योंकि वह कंपाइलर 10 की गोलाकार परिशुद्धता का उपयोग करता है और दक्षता कारणों से इसे समायोजित करने की अनुमति नहीं देता है।
ऑटोप्रीफिक्सर
बूटस्ट्रैप ऑटोप्रिफ़िक्सर (हमारी निर्माण प्रक्रिया में शामिल) का उपयोग स्वचालित रूप से निर्माण समय पर कुछ सीएसएस गुणों में विक्रेता उपसर्ग जोड़ने के लिए करता है। ऐसा करने से हमें अपने सीएसएस के प्रमुख हिस्सों को एक बार लिखने की अनुमति देकर समय और कोड की बचत होती है, जबकि v3 में पाए जाने वाले वेंडर मिक्सिन की आवश्यकता समाप्त हो जाती है।
हम अपने GitHub रिपॉजिटरी के भीतर एक अलग फ़ाइल में Autoprefixer के माध्यम से समर्थित ब्राउज़रों की सूची बनाए रखते हैं। विवरण के लिए .browserslistrc देखें ।
स्थानीय दस्तावेज़ीकरण
हमारे दस्तावेज़ों को स्थानीय रूप से चलाने के लिए ह्यूगो के उपयोग की आवश्यकता होती है, जो ह्यूगो-बिन एनपीएम पैकेज के माध्यम से स्थापित हो जाता है। ह्यूगो एक तेज और काफी एक्स्टेंसिबल स्थिर साइट जनरेटर है जो हमें प्रदान करता है: बुनियादी शामिल हैं, मार्कडाउन-आधारित फाइलें, टेम्पलेट्स, और बहुत कुछ। इसे शुरू करने का तरीका यहां बताया गया है:
- सभी निर्भरताओं को स्थापित करने के लिए उपरोक्त टूलिंग सेटअप के माध्यम से चलाएं ।
- रूट
/bootstrapडायरेक्टरी से,npm run docs-serveकमांड लाइन में रन करें। http://localhost:9001/अपने ब्राउज़र में खोलें , और आवाज करें।
ह्यूगो के दस्तावेज़ों को पढ़कर उसके उपयोग के बारे में और जानें ।
समस्या निवारण
यदि आपको निर्भरता स्थापित करने में समस्या आती है, तो सभी पिछले निर्भरता संस्करणों (वैश्विक और स्थानीय) की स्थापना रद्द करें। फिर, फिर से चलाएँ npm install।