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