in English

साधनां तयार करप

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

टूलींग सेटअप करप

बूटस्ट्रॅप आपल्या बिल्ड प्रणालीखातीर npm स्क्रिप्ट वापरता. आमच्या package.json कडेन फ्रेमवर्क वांगडा काम करपाच्यो सोयीच्यो पद्दती आसपावीत केल्यात, तातूंत कोड संकलित करप, चांचण्यो चालीक लावप, आनी हेर आसपावीत आसात.

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

  1. Node.js डावनलोड करात आनी प्रतिष्ठापीत करात , जें आमी आमचीं अवलंबन वेवस्थापन करपाक वापरतात.
  2. एक तर Bootstrap च्या स्रोत डाउनलोड करात वा Bootstrap च्या भंडाराक फोर्क करात .
  3. मुळाव्या /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 runसगळ्यो npm स्क्रिप्ट पळोवपाक धांवचीं .

आमच्या स्टार्टर प्रकल्पा वांगडा npm वरवीं Bootstrap कडेन सुरवात करात! तुमच्या स्वताच्या npm प्रकल्पांत Bootstrap कसो तयार करचो आनी पसंतीचो करचो तें पळोवपाक twbs/bootstrap-npm-starter साचा भंडारांत वचचें . Sass संकलक, ऑटोप्रिफिक्सर, स्टायललिंट, PurgeCSS, आनी बूटस्ट्रॅप चिन्नांचो आस्पाव आसा.

सास

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

तुमकां नव्या Sass वैशिश्ट्यां वा नव्या CSS मानकांकडेन सुसंगतीची गरज आसल्यार, Dart Sass आतां Sass ची मुखेल कार्यान्वयन आसा आनी Node Sass कडेन पुरायपणान सुसंगत आशिल्ल्या JavaScript API चो समर्थन करता (Dart Sass च्या GitHub पानाचेर दिल्ल्या कांय आडवादां सयत ).

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

ऑटोप्रिफिक्सर हें नांव

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

आमी Autoprefixer वरवीं समर्थीत केल्ल्या ब्राउझरांची वळेरी आमच्या GitHub रिपॉझिटरी भितर वेगळ्या फायलीन सांबाळटात. तपशीलां खातीर .browserslistrc पळयात.

थळावें दस्तावेजीकरण

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

  1. सगळ्यो अवलंबन प्रतिष्ठापीत करपाक वयर दिल्ल्या साधन सेटअपांतल्यान चालीक लावची .
  2. मुळाव्या /bootstrapनिर्देशिका वयल्यान, npm run docs-serveआदेश ओळींत चालीक लावचें.
  3. तुमच्या ब्राउझरांत उगडात http://localhost:9001/, आनी voilà.

ताचें दस्तावेजीकरण वाचून ह्यूगो वापरपा विशीं चड जाणून घेयात .

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

तुमकां अवलंबन प्रतिष्ठापीत करपाक समस्या येवंक जाय जाल्यार, आदल्यो सगळ्यो अवलंबन आवृत्त्यो (संवसारीक आनी थळावी) विस्थापित करात. मागीर, परतून चालीक लावचें npm install.