साधनां तयार करप
आमचें दस्तावेजीकरण तयार करपाक, स्त्रोत कोड संकलित करपाक, चांचण्यो चालीक लावपाक, आनी हेर जायतें करपाक Bootstrap ची समाविष्ट केल्ली npm स्क्रिप्ट कशी वापरची तें शिकात.
टूलींग सेटअप करप
बूटस्ट्रॅप आपल्या बिल्ड प्रणालीखातीर npm स्क्रिप्ट वापरता. आमच्या package.json कडेन फ्रेमवर्क वांगडा काम करपाच्यो सोयीच्यो पद्दती आसपावीत केल्यात, तातूंत कोड संकलित करप, चांचण्यो चालीक लावप, आनी हेर आसपावीत आसात.
आमची बिल्ड प्रणाली वापरपाक आनी आमचें दस्तावेजीकरण थळाव्यान चालीक लावपाक, तुमकां Bootstrap च्या स्त्रोत फायलींची आनी नोडाची प्रत जाय पडटली. ह्यो पावलां पाळचीं आनी तुमी रॉक करपाक तयार आसूंक जाय:
- Node.js डावनलोड करात आनी प्रतिष्ठापीत करात , जें आमी आमचीं अवलंबन वेवस्थापन करपाक वापरतात.
- एक तर Bootstrap च्या स्रोत डाउनलोड करात वा Bootstrap च्या भंडाराक फोर्क करात .
/bootstrap
मुळाव्या निर्देशिकेंत वचात आनी package.jsonnpm 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 |
दस्तावेजीकरण थळाव्यान तयार करता आनी चालीक लायता. |
सास
आमच्या Sass स्त्रोत फायलींचें CSS फायलींनी (आमच्या बिल्ड प्रक्रियांत आस्पाव केल्लें) संकलित करपाखातीर बूटस्ट्रॅप Dart Sass वापरता , आनी तुमी तुमची स्वताची मालमत्ता पायपलायन वापरून Sass संकलित करतात जाल्यार आमी तुमकां तशें करपाची शिफारस करतात. आमी आदीं Bootstrap v4 खातीर Node Sass वापरताले, पूण LibSass आनी ताचेर तयार केल्लीं पॅकेजीं, Node Sass सयत, आतां नाका जाल्यांत .
डार्ट सॅस 10 ची वाटकुळी सुक्ष्मताय वापरता आनी कार्यक्षमताय कारणांक लागून ह्या मोलाचें समायोजन करपाक परवानगी दिना. आमच्या निर्माण केल्ल्या CSS चेर फुडले प्रक्रिया करतना, जशें मिनिफिकेशन वेळार, आमी ही सुक्ष्मताय उणी करिनात, पूण तुमी तशें करपाक निवडल्यार ब्राउझर गोल करपाक समस्या आडावपाक आमी उण्यांत उणी 6 सुक्ष्मताय सांबाळपाची शिफारस करतात.
ऑटोप्रिफिक्सर हें नांव
बूटस्ट्रॅप बिल्ड वेळार कांय CSS गुणधर्मांक आपोआप विक्रेतो उपसर्ग जोडपाक Autoprefixer (आमच्या बिल्ड प्रक्रियेंत आस्पाव केल्लो) वापरता. अशें केल्यार v3 त मेळपी सारकिल्या विक्रेत्याच्या मिक्सिनाची गरज ना करतना आमच्या CSS च्या मुखेल भागांक एकूच फावट बरोवपाक परवानगी दिवन आमकां वेळ आनी कोड वाचयता.
आमी Autoprefixer वरवीं समर्थीत केल्ल्या ब्राउझरांची वळेरी आमच्या GitHub रिपॉझिटरी भितर वेगळ्या फायलीन सांबाळटात. तपशीलां खातीर .browserslistrc पळयात.
आरटीएलसीएसएस हांणी केला
बूटस्ट्रॅप संकलित CSS प्रक्रिया करपाक आनी तांकां RTL कडेन रुपांतरीत करपाक RTLCSSpadding-left
वापरता – मुळाव्यान आडव्या दिका जागृत गुणधर्मांची सुवात (देखीक. ) तांच्या उरफाट्यान. तो आमकां फकत आमचो CSS एकूच फावट बरोवपाक आनी RTLCSS नियंत्रण आनी मोल निर्देश वापरून ल्हान ल्हान ट्वीक्स करपाक परवानगी दिता.
थळावें दस्तावेजीकरण
आमचें दस्तावेजीकरण थळाव्यान चालीक लावपाक Hugo चो वापर करचो पडटा, जो hugo-bin npm पॅकेजी वरवीं प्रतिष्ठापीत जाता. ह्यूगो हो एक blazingly वेगवान आनी सामको विस्तारीत स्थिर साइट जनरेटर आसा जो आमकां पुरवण करता: मुळावो आस्पावता, Markdown-आधारीत फायली, साचे, आनी हेर. ताका कशें सुरू करप तें पळयात:
- सगळ्यो अवलंबन प्रतिष्ठापीत करपाक वयर दिल्ल्या साधन सेटअपांतल्यान चालीक लावची .
- मुळाव्या
/bootstrap
निर्देशिका वयल्यान,npm run docs-serve
आदेश ओळींत चालीक लावचें. - तुमच्या ब्राउझरांत उगडात
http://localhost:9001/
, आनी voilà.
ताचें दस्तावेजीकरण वाचून ह्यूगो वापरपा विशीं चड जाणून घेयात .
समस्या निवारण करप
तुमकां अवलंबन प्रतिष्ठापीत करपाक समस्या येवंक जाय जाल्यार, आदल्यो सगळ्यो अवलंबन आवृत्त्यो (संवसारीक आनी थळावी) विस्थापित करात. मागीर, परतून चालीक लावचें npm install
.