उपकरणहरू निर्माण गर्नुहोस्
हाम्रो कागजातहरू निर्माण गर्न, स्रोत कोड कम्पाइल गर्न, परीक्षणहरू चलाउन र थप कुराहरू गर्न Bootstrap को समावेश npm स्क्रिप्टहरू कसरी प्रयोग गर्ने सिक्नुहोस्।
उपकरण सेटअप
बुटस्ट्र्यापले यसको निर्माण प्रणालीको लागि एनपीएम स्क्रिप्टहरू प्रयोग गर्दछ। हाम्रो package.json ले फ्रेमवर्कसँग काम गर्नका लागि सुविधाजनक विधिहरू समावेश गर्दछ, कोड कम्पाइल गर्ने, चलिरहेको परीक्षणहरू र थप कुराहरू समावेश गर्दछ।
हाम्रो निर्माण प्रणाली प्रयोग गर्न र स्थानीय रूपमा हाम्रो कागजातहरू चलाउन, तपाईंलाई बुटस्ट्र्यापको स्रोत फाइलहरू र नोडको प्रतिलिपि चाहिन्छ। यी चरणहरू पालना गर्नुहोस् र तपाईं रक गर्न तयार हुनुपर्छ:
- डाउनलोड गर्नुहोस् र Node.js स्थापना गर्नुहोस् , जुन हामीले हाम्रो निर्भरताहरू व्यवस्थापन गर्न प्रयोग गर्छौं।
- कि त बुटस्ट्र्यापको स्रोतहरू डाउनलोड गर्नुहोस् वा बुटस्ट्र्यापको भण्डार फोर्क गर्नुहोस् ।
/bootstrapरूट डाइरेक्टरीमा नेभिगेट गर्नुहोस् र package.jsonnpm installमा सूचीबद्ध हाम्रो स्थानीय निर्भरताहरू स्थापना गर्न चलाउनुहोस् ।
पूरा भएपछि, तपाइँ कमाण्ड लाइनबाट प्रदान गरिएका विभिन्न आदेशहरू चलाउन सक्षम हुनुहुनेछ।
npm स्क्रिप्टहरू प्रयोग गर्दै
हाम्रो package.json ले निम्न आदेश र कार्यहरू समावेश गर्दछ:
| कार्य | विवरण |
|---|---|
npm run dist |
npm run dist/dist/संकलित फाइलहरूसँग डाइरेक्टरी सिर्जना गर्दछ । Sass , Autoprefixer , र Terser प्रयोग गर्दछ । |
npm test |
दौडिएपछि स्थानीय रूपमा परीक्षणहरू चलाउँछnpm run dist |
npm run docs-serve |
स्थानीय रूपमा कागजातहरू बनाउँछ र चलाउँछ। |
सबै npm npm runस्क्रिप्टहरू हेर्न दौडनुहोस्।
सास
Bootstrap v4 हाम्रो Sass स्रोत फाइलहरू CSS फाइलहरूमा कम्पाइल गर्नको लागि नोड Sass प्रयोग गर्दछ (हाम्रो निर्माण प्रक्रियामा समावेश गरिएको)। तपाईंको आफ्नै सम्पत्ति पाइपलाइन प्रयोग गरेर Sass कम्पाइल गर्दा उही उत्पन्न CSS संग समाप्त गर्न, तपाईंले Sass कम्पाइलर प्रयोग गर्न आवश्यक छ जसले कम्तिमा नोड सासले गर्ने सुविधाहरूलाई समर्थन गर्दछ। यो नोट गर्न महत्त्वपूर्ण छ किनभने अक्टोबर 26, 2020 सम्म, LibSass र यसको शीर्षमा निर्मित प्याकेजहरू - नोड सास सहित — हटाइएको छ ।
यदि तपाईंलाई नयाँ Sass सुविधाहरू वा नयाँ CSS मापदण्डहरूसँग अनुकूलता चाहिन्छ भने, डार्ट सास अब Sass को प्राथमिक कार्यान्वयन हो र नोड साससँग पूर्ण रूपमा उपयुक्त JavaScript API समर्थन गर्दछ (Dart Sass को GitHub पृष्ठमा सूचीबद्ध केही अपवादहरू सहित )।
हामी ब्राउजर राउन्डिङमा समस्याहरू रोक्नको लागि Sass राउन्डिङ परिशुद्धता 6 मा बढाउँछौं (पूर्वनिर्धारित रूपमा, यो नोड Sass मा 5 हो)। यदि तपाइँ डार्ट सास प्रयोग गर्नुहुन्छ भने यो तपाइँलाई समायोजन गर्न आवश्यक पर्ने कुरा हुनेछैन, किनकि त्यो कम्पाइलरले 10 को राउन्डिङ परिशुद्धता प्रयोग गर्दछ र दक्षता कारणहरूले यसलाई समायोजन गर्न अनुमति दिँदैन।
Autoprefixer
बुटस्ट्र्यापले निर्माण समयमा केही CSS गुणहरूमा विक्रेता उपसर्गहरू स्वतः थप्नको लागि Autoprefixer (हाम्रो निर्माण प्रक्रियामा समावेश) प्रयोग गर्दछ। त्यसो गर्दा v3 मा पाइने जस्तै विक्रेता मिक्सिनहरूको आवश्यकतालाई हटाउँदै हामीलाई हाम्रो CSS को मुख्य भागहरू एक पटक लेख्न अनुमति दिएर हाम्रो समय र कोड बचत गर्छ।
हामी हाम्रो GitHub भण्डार भित्र एउटा छुट्टै फाइलमा Autoprefixer मार्फत समर्थित ब्राउजरहरूको सूची कायम राख्छौं। विवरणहरूको लागि .browserslistrc हेर्नुहोस् ।
स्थानीय कागजात
हाम्रो कागजात स्थानीय रूपमा चलाउन Hugo को प्रयोग आवश्यक छ, जुन hugo-bin npm प्याकेज मार्फत स्थापित हुन्छ। ह्युगो एक ज्वलन्त छिटो र धेरै विस्तारित स्थिर साइट जनरेटर हो जसले हामीलाई प्रदान गर्दछ: आधारभूत समावेश, मार्कडाउन-आधारित फाइलहरू, टेम्प्लेटहरू, र थप। यसलाई कसरी सुरु गर्ने भन्ने यहाँ छ:
- सबै निर्भरताहरू स्थापना गर्न माथिको टूलिङ सेटअप मार्फत चलाउनुहोस् ।
- रूट
/bootstrapडाइरेक्टरीबाट,npm run docs-serveकमांड लाइनमा चलाउनुहोस्। - आफ्नो ब्राउजरमा खोल्नुहोस्
http://localhost:9001/, र voilà।
ह्युगो प्रयोग गर्ने बारे थप जान्नुहोस् यसको कागजात पढेर ।
समस्या निवारण
यदि तपाइँ निर्भरताहरू स्थापना गर्न समस्याहरू सामना गर्नुहुन्छ भने, सबै अघिल्लो निर्भरता संस्करणहरू (ग्लोबल र स्थानीय) को स्थापना रद्द गर्नुहोस्। त्यसपछि, पुन: चलाउनुहोस् npm install।