उपकरणानि निर्मायताम्
अस्माकं दस्तावेजीकरणस्य निर्माणार्थं, स्रोतसङ्केतस्य संकलनार्थं, परीक्षणं चालयितुं, इत्यादीनि च Bootstrap इत्यस्य समाविष्टानां npm स्क्रिप्ट् इत्यस्य उपयोगं कथं करणीयम् इति ज्ञातव्यम् ।
टूलिंग सेटअप
बूटस्ट्रैप् स्वस्य बिल्ड् सिस्टम् कृते npm स्क्रिप्ट् इत्यस्य उपयोगं करोति । अस्माकं package.json इत्यत्र framework इत्यनेन सह कार्यं कर्तुं सुविधाजनकाः पद्धतयः सन्ति, यथा कोड् संकलनं, परीक्षणं चालयति, इत्यादीनि ।
अस्माकं build system इत्यस्य उपयोगाय अस्माकं documentation इत्येतत् स्थानीयरूपेण चालयितुं च, भवद्भ्यः Bootstrap इत्यस्य source files इत्यस्य Node इत्यस्य च प्रतिलिपिः आवश्यकी भविष्यति । एतानि पदानि अनुसृत्य भवन्तः हिलितुं सज्जाः भवेयुः।
- Node.js डाउनलोड् कृत्वा संस्थापयन्तु , यस्य उपयोगं वयं स्वनिर्भरतां प्रबन्धयितुं कुर्मः ।
- यावान् Bootstrap इत्यस्य स्रोताः डाउनलोड् कुर्वन्तु अथवा Bootstrap इत्यस्य भण्डारं fork कुर्वन्तु .
- मूलनिर्देशिकायां गत्वा package.json मध्ये सूचीकृतानि अस्माकं स्थानीयनिर्भरतां संस्थापयितुं
/bootstrapचालयन्तु ।npm install
समाप्ते सति, भवन्तः आदेशपङ्क्तौ प्रदत्तान् विविधान् आदेशान् चालयितुं शक्नुवन्ति ।
npm लिपियों का प्रयोग करते हुए
अस्माकं 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 |
दस्तावेजीकरणं स्थानीयतया निर्माति चालयति च । |
सस्स
Bootstrap अस्माकं Sass स्रोतसञ्चिकानां CSS सञ्चिकासु (अस्माकं निर्माणप्रक्रियायां समाविष्टा) संकलनार्थं Dart Sass इत्यस्य उपयोगं करोति, तथा च यदि भवान् स्वस्य सम्पत्तिपाइपलाइनस्य उपयोगेन Sass संकलयति तर्हि भवान् अपि तथैव कर्तुं अनुशंसयामः वयं पूर्वं Bootstrap v4 कृते Node Sass इत्यस्य उपयोगं कृतवन्तः, परन्तु LibSass तथा तस्य उपरि निर्मिताः संकुलाः, Node Sass सहितं, अधुना अप्रचलिताः सन्ति .
Dart Sass 10 इत्यस्य गोलीकरणसटीकतायाः उपयोगं करोति तथा च दक्षताकारणात् अस्य मूल्यस्य समायोजनं न अनुमन्यते । अस्माकं उत्पन्नस्य CSS इत्यस्य अग्रे संसाधनस्य समये, यथा लघुकरणस्य समये, वयं एतां परिशुद्धतां न न्यूनीकरोमः, परन्तु यदि भवान् तत् कर्तुं चयनं कृतवान् तर्हि ब्राउजर् गोलीकरणस्य समस्यां निवारयितुं न्यूनातिन्यूनं 6 इत्यस्य सटीकताम् अवलम्बयितुं वयं अनुशंसयामः
स्वयम् उपसर्गः
Bootstrap Autoprefixer (अस्माकं निर्माणप्रक्रियायां समाविष्टम्) इत्यस्य उपयोगं करोति यत् स्वयमेव निर्माणसमये केषुचित् CSS गुणेषु विक्रेता उपसर्गं योजयति । एतत् कृत्वा अस्माकं CSS इत्यस्य प्रमुखभागान् एकवारं लिखितुं अनुमतिं दत्त्वा अस्माकं समयस्य कोडस्य च रक्षणं भवति तथा च v3 इत्यस्मिन् दृश्यमानानां इव विक्रेता-मिक्सिन्-इत्यस्य आवश्यकतां निवारयति ।
वयं अस्माकं GitHub भण्डारस्य अन्तः पृथक् सञ्चिकायां Autoprefixer मार्गेण समर्थितानां ब्राउजर्-सूचीं परिपालयामः । विस्तरेण .browserslistrc पश्यन्तु ।
RTLCSS इति
Bootstrap संकलित CSS को संसाधित करने एवं RTL में परिवर्तित करने के लिए RTLCSS का उपयोग करता है – मूलतः क्षैतिज दिशा जागरूक गुणों (eg. padding-left) को उनके विपरीत से प्रतिस्थापित करता है। एतत् अस्मान् केवलं एकवारं अस्माकं CSS लिखितुं RTLCSS नियन्त्रणस्य मूल्यनिर्देशानां च उपयोगेन लघु-लघु-ट्वीक्-करणं कर्तुं शक्नोति ।
स्थानीय दस्तावेजीकरणम्
अस्माकं दस्तावेजीकरणं स्थानीयरूपेण चालयितुं Hugo इत्यस्य उपयोगस्य आवश्यकता वर्तते, यत् hugo-bin npm संकुलद्वारा संस्थाप्यते । ह्यूगो एकः धधकति द्रुततरः तथा च अत्यन्तं विस्तारणीयः स्थिरसाइट् जनरेटरः अस्ति यः अस्मान् प्रदाति: मूलभूतः समाविष्टः, Markdown-आधारितसञ्चिकाः, टेम्पलेट्, इत्यादीनि च। अत्र कथं आरम्भः कर्तव्यः इति दर्शितम् अस्ति :
- सर्वाणि निर्भरतानि संस्थापयितुं उपरि टूलिंग सेटअप मार्गेण चालयन्तु ।
- मूलनिर्देशिकातः आदेशपङ्क्तौ चालयन्तु
/bootstrap।npm run docs-serve - भवतः ब्राउजरे उद्घाटयन्तु
http://localhost:9001/, तथा voilà.
तस्य दस्तावेजं पठित्वा Hugo इत्यस्य उपयोगविषये अधिकं ज्ञातुं शक्नुवन्ति .
समस्या निवारणम्
यदि भवान् निर्भरतास्थापनस्य समस्यां प्राप्नोति तर्हि पूर्ववर्तीनां सर्वेषां निर्भरतासंस्करणानाम् (वैश्विकं स्थानीयं च) विस्थापयतु । ततः, पुनः चालयन्तु npm install.