in English

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

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

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

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

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

  1. ഞങ്ങളുടെ ഡിപൻഡൻസികൾ മാനേജ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന Node.js ഡൗൺലോഡ് ചെയ്ത് ഇൻസ്റ്റാൾ ചെയ്യുക.
  2. ഒന്നുകിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിടങ്ങൾ ഡൗൺലോഡ് ചെയ്യുക അല്ലെങ്കിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ശേഖരം ഫോർക്ക് ചെയ്യുക .
  3. /bootstrapറൂട്ട് ഡയറക്‌ടറിയിലേക്ക് നാവിഗേറ്റ് ചെയ്‌ത് പാക്കേജ്. json-npm 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 വഴി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ആരംഭിക്കുക! നിങ്ങളുടെ സ്വന്തം npm പ്രോജക്റ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് എങ്ങനെ നിർമ്മിക്കാമെന്നും ഇഷ്ടാനുസൃതമാക്കാമെന്നും കാണുന്നതിന് twbs/bootstrap-npm-starter ടെംപ്ലേറ്റ് ശേഖരത്തിലേക്ക് പോകുക . Sass compiler, Autoprefixer, Stylelint, PurgeCSS, Bootstrap ഐക്കണുകൾ എന്നിവ ഉൾപ്പെടുന്നു.

സാസ്

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

നിങ്ങൾക്ക് പുതിയ Sass ഫീച്ചറുകളോ പുതിയ CSS സ്റ്റാൻഡേർഡുകളുമായുള്ള അനുയോജ്യതയോ ആവശ്യമാണെങ്കിൽ, Dart Sass ഇപ്പോൾ Sass-ന്റെ പ്രാഥമിക നിർവ്വഹണമാണ് കൂടാതെ Node Sass-മായി പൂർണ്ണമായി പൊരുത്തപ്പെടുന്ന ഒരു JavaScript API-യെ പിന്തുണയ്ക്കുന്നു (Dart Sass-ന്റെ GitHub പേജിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന ചില ഒഴിവാക്കലുകളോടെ ).

ബ്രൗസർ റൗണ്ടിംഗിലെ പ്രശ്നങ്ങൾ തടയാൻ ഞങ്ങൾ Sass റൗണ്ടിംഗ് പ്രിസിഷൻ 6 ആയി വർദ്ധിപ്പിക്കുന്നു (സ്ഥിരമായി, നോഡ് സാസിൽ ഇത് 5 ആണ്). നിങ്ങൾ Dart Sass ഉപയോഗിക്കുകയാണെങ്കിൽ, ഇത് നിങ്ങൾ ക്രമീകരിക്കേണ്ട ഒന്നായിരിക്കില്ല, കാരണം ആ കംപൈലർ 10-ന്റെ റൗണ്ടിംഗ് പ്രിസിഷൻ ഉപയോഗിക്കുന്നു, കാര്യക്ഷമത കാരണങ്ങളാൽ ഇത് ക്രമീകരിക്കാൻ അനുവദിക്കുന്നില്ല.

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

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

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

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

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

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

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

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

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