in English

साधने तयार करा

आमचे दस्तऐवज तयार करण्यासाठी, स्त्रोत कोड संकलित करण्यासाठी, चाचण्या चालवण्यासाठी आणि बरेच काही करण्यासाठी बूटस्ट्रॅपच्या समाविष्ट केलेल्या npm स्क्रिप्ट्सचा वापर कसा करावा ते शिका.

टूलिंग सेटअप

बूटस्ट्रॅप त्याच्या बिल्ड सिस्टमसाठी एनपीएम स्क्रिप्ट वापरते. आमच्या package.json मध्ये फ्रेमवर्कसह काम करण्याच्या सोयीस्कर पद्धतींचा समावेश आहे, ज्यामध्ये कोड संकलित करणे, चाचण्या चालवणे आणि बरेच काही समाविष्ट आहे.

आमची बिल्ड सिस्टम वापरण्यासाठी आणि आमचे दस्तऐवज स्थानिक पातळीवर चालवण्यासाठी, तुम्हाला बूटस्ट्रॅपच्या स्त्रोत फाइल्स आणि नोडची एक प्रत आवश्यक असेल. या चरणांचे अनुसरण करा आणि तुम्ही रॉक करण्यासाठी तयार असाल:

  1. Node.js डाउनलोड आणि स्थापित करा , जे आम्ही आमच्या अवलंबित्व व्यवस्थापित करण्यासाठी वापरतो.
  2. एकतर बूटस्ट्रॅपचे स्रोत डाउनलोड करा किंवा बूटस्ट्रॅपचे भांडार फोर्क करा .
  3. /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 द्वारे बूटस्ट्रॅपसह प्रारंभ करा! तुमच्या स्वतःच्या npm प्रोजेक्टमध्ये बूटस्ट्रॅप कसा बनवायचा आणि सानुकूलित कसा करायचा हे पाहण्यासाठी twbs/bootstrap-npm-starter टेम्पलेट रेपॉजिटरीकडे जा. Sass कंपाइलर, ऑटोप्रीफिक्सर, स्टाइलिंट, पर्जसीएसएस आणि बूटस्ट्रॅप चिन्हांचा समावेश आहे.

सस

Bootstrap v4 आमच्या Sass स्रोत फाइल्स CSS फाइल्समध्ये संकलित करण्यासाठी नोड Sass वापरते (आमच्या बिल्ड प्रक्रियेमध्ये समाविष्ट). तुमची स्वतःची मालमत्ता पाइपलाइन वापरून Sass संकलित करताना समान व्युत्पन्न CSS सह समाप्त करण्यासाठी, तुम्हाला Sass कंपाइलर वापरणे आवश्यक आहे जे किमान वैशिष्ट्यांना समर्थन देते जे नोड सास करते. हे लक्षात घेणे महत्त्वाचे आहे कारण 26 ऑक्टोबर 2020 पर्यंत, LibSass आणि त्याच्या वर तयार केलेली पॅकेजेस—नोड साससह—नापसलेली आहेत .

तुम्हाला नवीन Sass वैशिष्ट्ये किंवा नवीन CSS मानकांशी सुसंगतता हवी असल्यास, Dart Sass ही Sass ची प्राथमिक अंमलबजावणी आहे आणि JavaScript API चे समर्थन करते जे Node Sass (Dart Sass च्या GitHub पृष्ठावर सूचीबद्ध केलेल्या काही अपवादांसह) पूर्णपणे सुसंगत आहे .

ब्राउझर राउंडिंगमध्ये समस्या टाळण्यासाठी आम्ही Sass राउंडिंगची अचूकता 6 पर्यंत वाढवतो (डिफॉल्टनुसार, नोड सासमध्ये ते 5 आहे) जर तुम्ही Dart Sass वापरत असाल तर हे तुम्हाला समायोजित करण्याची गरज नाही, कारण ते कंपाइलर 10 ची गोलाकार अचूकता वापरते आणि कार्यक्षमतेच्या कारणास्तव ते समायोजित करण्याची परवानगी देत ​​​​नाही.

ऑटोप्रिफिक्सर

बूटस्ट्रॅप ऑटोप्रीफिक्सर (आमच्या बिल्ड प्रक्रियेमध्ये समाविष्ट) वापरते जे बिल्ड वेळेवर काही CSS गुणधर्मांमध्ये स्वयंचलितपणे विक्रेता उपसर्ग जोडण्यासाठी. असे केल्याने आम्हाला आमच्या CSS चे प्रमुख भाग एकाच वेळी लिहिण्याची परवानगी देऊन आमचा वेळ आणि कोड वाचतो आणि v3 सारख्या विक्रेत्या मिक्सिनची गरज नाहीशी होते.

आम्ही आमच्या GitHub रेपॉजिटरीमध्ये एका वेगळ्या फाईलमध्ये Autoprefixer द्वारे समर्थित ब्राउझरची सूची राखतो. तपशीलांसाठी .browserslistrc पहा.

स्थानिक दस्तऐवजीकरण

आमचे दस्तऐवज स्थानिक पातळीवर चालवण्यासाठी Hugo चा वापर करणे आवश्यक आहे, जे hugo-bin npm पॅकेजद्वारे स्थापित केले जाते . ह्यूगो हे एक अतिशय वेगवान आणि बर्‍यापैकी एक्स्टेंसिबल स्टॅटिक साइट जनरेटर आहे जे आम्हाला प्रदान करते: मूलभूत समावेश, मार्कडाउन-आधारित फाइल्स, टेम्पलेट्स आणि बरेच काही. ते कसे सुरू करायचे ते येथे आहे:

  1. सर्व अवलंबित्व स्थापित करण्यासाठी वरील टूलिंग सेटअपद्वारे चालवा .
  2. रूट /bootstrapनिर्देशिकेतून, npm run docs-serveकमांड लाइनमध्ये चालवा.
  3. http://localhost:9001/तुमच्या ब्राउझरमध्ये उघडा आणि व्हॉइला.

ह्यूगोचे दस्तऐवजीकरण वाचून वापरण्याबद्दल अधिक जाणून घ्या .

समस्यानिवारण

अवलंबित्व स्थापित करताना तुम्हाला समस्या आल्यास, मागील सर्व अवलंबित्व आवृत्त्या (जागतिक आणि स्थानिक) विस्थापित करा. मग, पुन्हा चालवा npm install.