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