साधने तयार करा
आमचे दस्तऐवज तयार करण्यासाठी, स्त्रोत कोड संकलित करण्यासाठी, चाचण्या चालवण्यासाठी आणि बरेच काही करण्यासाठी बूटस्ट्रॅपच्या समाविष्ट केलेल्या npm स्क्रिप्ट्सचा वापर कसा करावा ते शिका.
टूलिंग सेटअप
बूटस्ट्रॅप त्याच्या बिल्ड सिस्टमसाठी एनपीएम स्क्रिप्ट वापरते. आमच्या package.json मध्ये फ्रेमवर्कसह काम करण्याच्या सोयीस्कर पद्धतींचा समावेश आहे, ज्यामध्ये कोड संकलित करणे, चाचण्या चालवणे आणि बरेच काही समाविष्ट आहे.
आमची बिल्ड सिस्टम वापरण्यासाठी आणि आमचे दस्तऐवज स्थानिक पातळीवर चालवण्यासाठी, तुम्हाला बूटस्ट्रॅपच्या स्त्रोत फाइल्स आणि नोडची एक प्रत आवश्यक असेल. या चरणांचे अनुसरण करा आणि तुम्ही रॉक करण्यासाठी तयार असाल:
- Node.js डाउनलोड आणि स्थापित करा , जे आम्ही आमच्या अवलंबित्व व्यवस्थापित करण्यासाठी वापरतो.
- एकतर बूटस्ट्रॅपचे स्रोत डाउनलोड करा किंवा बूटस्ट्रॅपचे भांडार फोर्क करा .
/bootstrapरूट निर्देशिकेवर नेव्हिगेट करा आणि package.jsonnpm installमध्ये सूचीबद्ध केलेले आमचे स्थानिक अवलंबन स्थापित करण्यासाठी चालवा .
पूर्ण झाल्यावर, तुम्ही कमांड लाइनवरून प्रदान केलेल्या विविध कमांड्स चालविण्यात सक्षम व्हाल.
एनपीएम स्क्रिप्ट वापरणे
आमच्या package.json मध्ये प्रकल्प विकसित करण्यासाठी अनेक कार्ये समाविष्ट आहेत. तुमच्या टर्मिनलमधील सर्व एनपीएम npm runस्क्रिप्ट पाहण्यासाठी धावा. प्राथमिक कार्यांमध्ये हे समाविष्ट आहे:
| कार्य | वर्णन |
|---|---|
npm start |
CSS आणि JavaScript संकलित करते, दस्तऐवजीकरण तयार करते आणि स्थानिक सर्व्हर सुरू करते. |
npm run dist |
dist/संकलित फाइल्ससह निर्देशिका तयार करते . Sass , Autoprefixer , आणि Terser आवश्यक आहे . |
npm test |
धावल्यानंतर स्थानिक पातळीवर चाचण्या चालवतातnpm run dist |
npm run docs-serve |
स्थानिक पातळीवर दस्तऐवज तयार करते आणि चालवते. |
सस
Bootstrap आमच्या Sass स्रोत फाइल्स CSS फाइल्समध्ये (आमच्या बिल्ड प्रक्रियेमध्ये समाविष्ट) संकलित करण्यासाठी Dart Sass वापरते आणि आम्ही शिफारस करतो की तुम्ही तुमची स्वतःची मालमत्ता पाइपलाइन वापरून Sass संकलित करत असाल तर. आम्ही पूर्वी Bootstrap v4 साठी Node Sass वापरला होता, परंतु LibSass आणि नोड Sass सह त्याच्या वर तयार केलेली पॅकेजेस आता नापसंत केली आहेत .
Dart Sass 10 ची गोलाकार अचूकता वापरते आणि कार्यक्षमतेच्या कारणास्तव या मूल्याचे समायोजन करण्याची परवानगी देत नाही. आम्ही आमच्या व्युत्पन्न केलेल्या CSS च्या पुढील प्रक्रियेदरम्यान ही अचूकता कमी करत नाही, जसे की मिनिफिकेशन दरम्यान, परंतु तुम्ही असे करणे निवडल्यास आम्ही ब्राउझर राउंडिंगमध्ये समस्या टाळण्यासाठी किमान 6 ची अचूकता राखण्याची शिफारस करतो.
ऑटोप्रिफिक्सर
बूटस्ट्रॅप ऑटोप्रीफिक्सर (आमच्या बिल्ड प्रक्रियेमध्ये समाविष्ट) वापरते जे बिल्ड वेळेवर काही CSS गुणधर्मांमध्ये स्वयंचलितपणे विक्रेता उपसर्ग जोडण्यासाठी. असे केल्याने आम्हाला आमच्या CSS चे मुख्य भाग एकाच वेळी लिहिण्याची परवानगी देऊन वेळ आणि कोड वाचतो आणि v3 मध्ये आढळलेल्या विक्रेत्या मिश्रणाची गरज नाहीशी होते.
आम्ही आमच्या GitHub रेपॉजिटरीमध्ये एका वेगळ्या फाईलमध्ये Autoprefixer द्वारे समर्थित ब्राउझरची सूची राखतो. तपशीलांसाठी .browserslistrc पहा.
RTLCSS
बूटस्ट्रॅप संकलित CSS प्रक्रिया करण्यासाठी RTLCSS चा वापर करते आणि त्यांना RTL मध्ये रूपांतरित करते – मुळात क्षैतिज दिशा जागरूक गुणधर्म (उदा. padding-left) त्यांच्या विरुद्ध बदलून. हे आम्हाला आमचे CSS एकाच वेळी लिहू देते आणि RTLCSS नियंत्रण आणि मूल्य निर्देश वापरून किरकोळ बदल करू देते.
स्थानिक दस्तऐवजीकरण
आमचे दस्तऐवज स्थानिक पातळीवर चालवण्यासाठी Hugo चा वापर करणे आवश्यक आहे, जे hugo-bin npm पॅकेजद्वारे स्थापित केले जाते . ह्यूगो हे एक अतिशय वेगवान आणि बर्‍यापैकी एक्स्टेंसिबल स्टॅटिक साइट जनरेटर आहे जे आम्हाला प्रदान करते: मूलभूत समावेश, मार्कडाउन-आधारित फाइल्स, टेम्पलेट्स आणि बरेच काही. ते कसे सुरू करायचे ते येथे आहे:
- सर्व अवलंबित्व स्थापित करण्यासाठी वरील टूलिंग सेटअपद्वारे चालवा .
- रूट
/bootstrapनिर्देशिकेतून,npm run docs-serveकमांड लाइनमध्ये चालवा. http://localhost:9001/तुमच्या ब्राउझरमध्ये उघडा आणि व्हॉइला.
ह्यूगोचे दस्तऐवजीकरण वाचून वापरण्याबद्दल अधिक जाणून घ्या .
समस्यानिवारण
अवलंबन स्थापित करताना तुम्हाला समस्या आल्यास, सर्व मागील अवलंबन आवृत्त्या (जागतिक आणि स्थानिक) विस्थापित करा. मग, पुन्हा चालवा npm install.