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