പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്‌സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

ഉപകരണങ്ങൾ നിർമ്മിക്കുക

ഞങ്ങളുടെ ഡോക്യുമെന്റേഷൻ നിർമ്മിക്കുന്നതിനും സോഴ്സ് കോഡ് കംപൈൽ ചെയ്യുന്നതിനും ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതിനും മറ്റും ബൂട്ട്സ്ട്രാപ്പിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന npm സ്ക്രിപ്റ്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക.

ഈ പേജിൽ

ടൂളിംഗ് സജ്ജീകരണം

ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ ബിൽഡ് സിസ്റ്റത്തിനായി npm സ്ക്രിപ്റ്റുകൾ ഉപയോഗിക്കുന്നു. കോഡ് കംപൈൽ ചെയ്യൽ, റണ്ണിംഗ് ടെസ്റ്റുകൾ എന്നിവയും അതിലേറെയും ഉൾപ്പെടെ, ചട്ടക്കൂടിനൊപ്പം പ്രവർത്തിക്കുന്നതിനുള്ള സൗകര്യപ്രദമായ രീതികൾ ഞങ്ങളുടെ package.json- ൽ ഉൾപ്പെടുന്നു.

ഞങ്ങളുടെ ബിൽഡ് സിസ്റ്റം ഉപയോഗിക്കുന്നതിനും ഞങ്ങളുടെ ഡോക്യുമെന്റേഷൻ പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കുന്നതിനും, നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പിന്റെ ഉറവിട ഫയലുകളുടെയും നോഡിന്റെയും ഒരു പകർപ്പ് ആവശ്യമാണ്. ഈ ഘട്ടങ്ങൾ പാലിക്കുക, നിങ്ങൾ റോക്ക് ചെയ്യാൻ തയ്യാറായിരിക്കണം:

  1. ഞങ്ങളുടെ ഡിപൻഡൻസികൾ മാനേജ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന Node.js ഡൗൺലോഡ് ചെയ്ത് ഇൻസ്റ്റാൾ ചെയ്യുക.
  2. ഒന്നുകിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിടങ്ങൾ ഡൗൺലോഡ് ചെയ്യുക അല്ലെങ്കിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ശേഖരം ഫോർക്ക് ചെയ്യുക .
  3. /bootstrapറൂട്ട് ഡയറക്‌ടറിയിലേക്ക് നാവിഗേറ്റ് ചെയ്‌ത് പാക്കേജ്. json-npm install ൽ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന ഞങ്ങളുടെ പ്രാദേശിക ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യാൻ പ്രവർത്തിപ്പിക്കുക .

പൂർത്തിയാകുമ്പോൾ, നിങ്ങൾക്ക് കമാൻഡ് ലൈനിൽ നിന്ന് നൽകിയിരിക്കുന്ന വിവിധ കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കാൻ കഴിയും.

npm സ്ക്രിപ്റ്റുകൾ ഉപയോഗിക്കുന്നു

ഞങ്ങളുടെ പാക്കേജ്. json- ൽ പ്രോജക്റ്റ് വികസിപ്പിക്കുന്നതിനുള്ള നിരവധി ജോലികൾ ഉൾപ്പെടുന്നു. npm runനിങ്ങളുടെ ടെർമിനലിലെ എല്ലാ npm സ്ക്രിപ്റ്റുകളും കാണാൻ റൺ ചെയ്യുക. പ്രാഥമിക ജോലികളിൽ ഇവ ഉൾപ്പെടുന്നു:

ചുമതല വിവരണം
npm start CSS ഉം JavaScript ഉം കംപൈൽ ചെയ്യുന്നു, ഡോക്യുമെന്റേഷൻ നിർമ്മിക്കുന്നു, കൂടാതെ ഒരു പ്രാദേശിക സെർവർ ആരംഭിക്കുന്നു.
npm run dist dist/കംപൈൽ ചെയ്ത ഫയലുകൾ ഉപയോഗിച്ച് ഡയറക്ടറി സൃഷ്ടിക്കുന്നു . Sass , Autoprefixer , terser എന്നിവ ആവശ്യമാണ് .
npm test ഓട്ടത്തിന് ശേഷം പ്രാദേശികമായി ടെസ്റ്റുകൾ നടത്തുന്നുnpm run dist
npm run docs-serve പ്രാദേശികമായി ഡോക്യുമെന്റേഷൻ നിർമ്മിക്കുകയും പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുന്നു.
ഞങ്ങളുടെ സ്റ്റാർട്ടർ പ്രോജക്‌റ്റ് ഉപയോഗിച്ച് npm വഴി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ആരംഭിക്കുക! നിങ്ങളുടെ സ്വന്തം എൻ‌പി‌എം പ്രോജക്റ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് എങ്ങനെ നിർമ്മിക്കാമെന്നും ഇഷ്‌ടാനുസൃതമാക്കാമെന്നും കാണാൻ twbs/bootstrap-npm-starter ടെംപ്ലേറ്റ് ശേഖരണത്തിലേക്ക് പോകുക . Sass compiler, Autoprefixer, Stylelint, PurgeCSS, Bootstrap ഐക്കണുകൾ എന്നിവ ഉൾപ്പെടുന്നു.

സാസ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഞങ്ങളുടെ Sass സോഴ്‌സ് ഫയലുകൾ CSS ഫയലുകളിലേക്ക് (ഞങ്ങളുടെ ബിൽഡ് പ്രോസസിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്) കംപൈൽ ചെയ്യുന്നതിന് ഡാർട്ട് സാസ് ഉപയോഗിക്കുന്നു , നിങ്ങളുടെ സ്വന്തം അസറ്റ് പൈപ്പ്‌ലൈൻ ഉപയോഗിച്ചാണ് നിങ്ങൾ Sass കംപൈൽ ചെയ്യുന്നതെങ്കിൽ അത് ചെയ്യാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. ബൂട്ട്‌സ്‌ട്രാപ്പ് v4-നായി ഞങ്ങൾ മുമ്പ് Node Sass ഉപയോഗിച്ചിരുന്നു, എന്നാൽ LibSass ഉം Node Sass ഉൾപ്പെടെ അതിന് മുകളിൽ നിർമ്മിച്ച പാക്കേജുകളും ഇപ്പോൾ ഒഴിവാക്കിയിരിക്കുന്നു .

Dart Sass 10 ന്റെ റൗണ്ടിംഗ് പ്രിസിഷൻ ഉപയോഗിക്കുന്നു, കാര്യക്ഷമത കാരണങ്ങളാൽ ഈ മൂല്യം ക്രമീകരിക്കാൻ അനുവദിക്കുന്നില്ല. ഞങ്ങളുടെ ജനറേറ്റ് ചെയ്‌ത CSS-ന്റെ തുടർ പ്രോസസ്സിംഗ് സമയത്ത് ഞങ്ങൾ ഈ കൃത്യത കുറയ്ക്കില്ല, ഉദാഹരണത്തിന്, മിനിഫിക്കേഷൻ സമയത്ത്, നിങ്ങൾ അങ്ങനെ ചെയ്യാൻ തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, ബ്രൗസർ റൗണ്ടിംഗിലെ പ്രശ്നങ്ങൾ തടയാൻ കുറഞ്ഞത് 6 കൃത്യത നിലനിർത്താൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.

ഓട്ടോപ്രിഫിക്സർ

ബിൽഡ് സമയത്ത് ചില CSS പ്രോപ്പർട്ടികളിലേക്ക് വെണ്ടർ പ്രിഫിക്‌സുകൾ സ്വയമേവ ചേർക്കുന്നതിന് ബൂട്ട്‌സ്‌ട്രാപ്പ് Autoprefixer (ഞങ്ങളുടെ ബിൽഡ് പ്രോസസ്സിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്നു) ഉപയോഗിക്കുന്നു. അങ്ങനെ ചെയ്യുന്നത്, v3-ൽ കാണുന്നതുപോലുള്ള വെണ്ടർ മിക്‌സിനുകളുടെ ആവശ്യം ഇല്ലാതാക്കിക്കൊണ്ട് ഞങ്ങളുടെ CSS-ന്റെ പ്രധാന ഭാഗങ്ങൾ ഒറ്റത്തവണ എഴുതാൻ അനുവദിക്കുന്നതിലൂടെ ഞങ്ങളുടെ സമയവും കോഡും ലാഭിക്കുന്നു.

Autoprefixer വഴി പിന്തുണയ്‌ക്കുന്ന ബ്രൗസറുകളുടെ ലിസ്റ്റ് ഞങ്ങളുടെ GitHub ശേഖരണത്തിനുള്ളിൽ ഒരു പ്രത്യേക ഫയലിൽ ഞങ്ങൾ പരിപാലിക്കുന്നു. വിശദാംശങ്ങൾക്ക് .browserslistrc കാണുക.

ആർടിഎൽസിഎസ്എസ്

കംപൈൽ ചെയ്‌ത CSS പ്രോസസ്സ് ചെയ്യുന്നതിനും അവയെ RTL-ലേക്ക് പരിവർത്തനം ചെയ്യുന്നതിനും ബൂട്ട്‌സ്‌ട്രാപ്പ് RTLCSS ഉപയോഗിക്കുന്നു - അടിസ്ഥാനപരമായി തിരശ്ചീന ദിശാബോധമുള്ള പ്രോപ്പർട്ടികൾ (ഉദാ. padding-left) അവയുടെ വിപരീതമായി മാറ്റിസ്ഥാപിക്കുന്നു. RTLCSS നിയന്ത്രണവും മൂല്യ നിർദ്ദേശങ്ങളും ഉപയോഗിച്ച് ഞങ്ങളുടെ CSS ഒറ്റത്തവണ എഴുതാനും ചെറിയ മാറ്റങ്ങൾ വരുത്താനും ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു .

പ്രാദേശിക ഡോക്യുമെന്റേഷൻ

ഞങ്ങളുടെ ഡോക്യുമെന്റേഷൻ പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കുന്നതിന് ഹ്യൂഗോയുടെ ഉപയോഗം ആവശ്യമാണ്, അത് hugo-bin npm പാക്കേജ് വഴി ഇൻസ്റ്റാൾ ചെയ്യപ്പെടും. ഹ്യൂഗോ ഞങ്ങൾക്ക് പ്രദാനം ചെയ്യുന്ന ജ്വലിക്കുന്ന വേഗതയേറിയതും വിപുലീകരിക്കാവുന്നതുമായ ഒരു സ്റ്റാറ്റിക് സൈറ്റ് ജനറേറ്ററാണ്: അടിസ്ഥാനപരമായവ ഉൾപ്പെടുന്നു, മാർക്ക്ഡൗൺ അടിസ്ഥാനമാക്കിയുള്ള ഫയലുകൾ, ടെംപ്ലേറ്റുകൾ എന്നിവയും അതിലേറെയും. ഇത് എങ്ങനെ ആരംഭിക്കാമെന്നത് ഇതാ:

  1. എല്ലാ ഡിപൻഡൻസികളും ഇൻസ്റ്റാൾ ചെയ്യാൻ മുകളിലുള്ള ടൂളിംഗ് സെറ്റപ്പിലൂടെ പ്രവർത്തിപ്പിക്കുക .
  2. റൂട്ട് /bootstrapഡയറക്ടറിയിൽ npm run docs-serveനിന്ന്, കമാൻഡ് ലൈനിൽ പ്രവർത്തിപ്പിക്കുക.
  3. നിങ്ങളുടെ ബ്രൗസറിൽ തുറക്കുക http://localhost:9001/, voilà.

അതിന്റെ ഡോക്യുമെന്റേഷൻ വായിച്ചുകൊണ്ട് ഹ്യൂഗോ ഉപയോഗിക്കുന്നതിനെക്കുറിച്ച് കൂടുതലറിയുക .

ട്രബിൾഷൂട്ടിംഗ്

ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിൽ നിങ്ങൾക്ക് പ്രശ്നങ്ങൾ നേരിടുകയാണെങ്കിൽ, മുമ്പത്തെ എല്ലാ ഡിപൻഡൻസി പതിപ്പുകളും (ആഗോളവും പ്രാദേശികവും) അൺഇൻസ്റ്റാൾ ചെയ്യുക. തുടർന്ന്, വീണ്ടും പ്രവർത്തിപ്പിക്കുക npm install.