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