उपकरणानि निर्मायताम्
अस्माकं दस्तावेजीकरणस्य निर्माणार्थं, स्रोतसङ्केतस्य संकलनार्थं, परीक्षणं चालयितुं, इत्यादीनि च 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 dist |
npm run dist/dist/संकलितसञ्चिकाभिः सह निर्देशिकां निर्माति । Sass , Autoprefixer , terser इत्येतयोः उपयोगं करोति | |
npm test |
धावनानन्तरं स्थानीयतया परीक्षणं चालयतिnpm run dist |
npm run docs-serve |
दस्तावेजीकरणं स्थानीयतया निर्माति चालयति च । |
npm runसर्वाणि npm स्क्रिप्ट् द्रष्टुं चालयन्तु ।
सस्स
Bootstrap v4 अस्माकं Sass स्रोतसञ्चिकानां CSS सञ्चिकासु (अस्माकं निर्माणप्रक्रियायां समाविष्टम्) संकलनार्थं Node Sass इत्यस्य उपयोगं करोति । स्वस्य सम्पत्तिपाइपलाइनस्य उपयोगेन Sass संकलनं कुर्वन् समानेन उत्पन्नेन CSS इत्यनेन सह अन्त्यं कर्तुं, भवद्भिः Sass संकलकस्य उपयोगः करणीयः भविष्यति यः न्यूनातिन्यूनं तानि विशेषतानि समर्थयति यत् Node Sass करोति एतत् महत्त्वपूर्णं यतोहि २०२० तमस्य वर्षस्य अक्टोबर्-मासस्य २६ दिनाङ्कपर्यन्तं LibSass तस्य उपरि निर्मिताः संकुलाः च—Node Sass सहितम्— अप्रचलिताः सन्ति .
यदि भवतां कृते नूतनानां Sass-विशेषतानां अथवा नूतनानां CSS-मानकानां सह संगततायाः आवश्यकता वर्तते, तर्हि Dart Sass इदानीं Sass इत्यस्य प्राथमिकं कार्यान्वयनम् अस्ति तथा च एकं JavaScript API समर्थयति यत् Node Sass इत्यनेन सह पूर्णतया संगतम् अस्ति (Dart Sass इत्यस्य GitHub पृष्ठे सूचीकृतानि कतिपयानि अपवादाः सन्ति )
ब्राउजर् गोलीकरणस्य समस्यां निवारयितुं वयं Sass गोलीकरणस्य सटीकताम् 6 यावत् वर्धयामः (पूर्वनिर्धारितरूपेण, Node Sass मध्ये 5 अस्ति) । यदि भवान् Dart Sass इत्यस्य उपयोगं करोति तर्हि एतत् भवता समायोजितुं आवश्यकं किमपि न भविष्यति, यतः सः संकलकः 10 इत्यस्य गोलीकरणसटीकताम् उपयुङ्क्ते तथा च दक्षताकारणात् तत् समायोजितुं न अनुमन्यते ।
स्वयम् उपसर्गः
Bootstrap Autoprefixer (अस्माकं निर्माणप्रक्रियायां समाविष्टम्) इत्यस्य उपयोगं करोति यत् स्वयमेव निर्माणसमये केषुचित् CSS गुणेषु विक्रेता उपसर्गं योजयति । एतत् कृत्वा अस्माकं CSS इत्यस्य प्रमुखभागान् एकवारं लिखितुं अनुमतिं दत्त्वा अस्माकं समयस्य कोडस्य च रक्षणं भवति तथा च v3 इत्यस्मिन् दृश्यमानानां इव विक्रेता-मिक्सिन्-इत्यस्य आवश्यकतां निवारयति ।
वयं अस्माकं GitHub भण्डारस्य अन्तः पृथक् सञ्चिकायां Autoprefixer मार्गेण समर्थितानां ब्राउजर्-सूचीं परिपालयामः । विस्तरेण .browserslistrc पश्यन्तु ।
स्थानीय दस्तावेजीकरणम्
अस्माकं दस्तावेजीकरणं स्थानीयरूपेण चालयितुं Hugo इत्यस्य उपयोगस्य आवश्यकता वर्तते, यत् hugo-bin npm संकुलद्वारा संस्थाप्यते । ह्यूगो एकः धधकति द्रुततरः तथा च अत्यन्तं विस्तारणीयः स्थिरसाइट् जनरेटरः अस्ति यः अस्मान् प्रदाति: मूलभूतः समाविष्टः, Markdown-आधारितसञ्चिकाः, टेम्पलेट्, इत्यादीनि च। अत्र कथं आरम्भः कर्तव्यः इति दर्शितम् अस्ति :
- सर्वाणि निर्भरतानि संस्थापयितुं उपरि टूलिंग सेटअप मार्गेण चालयन्तु ।
- मूलनिर्देशिकातः आदेशपङ्क्तौ चालयन्तु
/bootstrap।npm run docs-serve - भवतः ब्राउजरे उद्घाटयन्तु
http://localhost:9001/, तथा voilà.
तस्य दस्तावेजं पठित्वा Hugo इत्यस्य उपयोगविषये अधिकं ज्ञातुं शक्नुवन्ति .
समस्या निवारणम्
यदि भवान् निर्भरतास्थापनस्य समस्यां प्राप्नोति तर्हि पूर्ववर्तीनां सर्वेषां निर्भरतासंस्करणानाम् (वैश्विकं स्थानीयं च) विस्थापयतु । ततः, पुनः चालयन्तु npm install.