in English

මෙවලම් සාදන්න

අපගේ ලේඛන ගොඩනැගීමට, මූලාශ්‍ර කේතය සම්පාදනය කිරීමට, පරීක්ෂණ ධාවනය කිරීමට සහ තවත් බොහෝ දේ සඳහා Bootstrap හි ඇතුළත් npm ස්ක්‍රිප්ට් භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

මෙවලම් සැකසීම

Bootstrap එහි ගොඩනැගීමේ පද්ධතිය සඳහා npm ස්ක්‍රිප්ට් භාවිතා කරයි. කේතය සම්පාදනය කිරීම, ධාවන පරීක්ෂණ සහ තවත් දේ ඇතුළුව රාමුව සමඟ වැඩ කිරීමට පහසු ක්‍රම අපගේ package.json හි ඇතුළත් වේ.

අපගේ ගොඩනැගීමේ පද්ධතිය භාවිතා කිරීමට සහ අපගේ ලේඛන දේශීයව ධාවනය කිරීමට, ඔබට Bootstrap හි මූලාශ්‍ර ගොනු සහ Node පිටපතක් අවශ්‍ය වේ. මෙම පියවර අනුගමනය කරන්න, ඔබ රොක් කිරීමට සූදානම් විය යුතුය:

  1. අපගේ පරායත්තතා කළමනාකරණය කිරීමට අපි භාවිතා කරන Node.js බාගත කර ස්ථාපනය කරන්න .
  2. Bootstrap හි මූලාශ්‍ර බාගන්න හෝ fork Bootstrap හි ගබඩාව .
  3. මූල /bootstrapනාමාවලිය වෙත සංචාලනය කර pack.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 compiler, Autoprefixer, Stylelint, PurgeCSS, සහ Bootstrap Icons ඇතුළත් වේ.

සාස්

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 දක්වා වැඩි කරන්නෙමු (පෙරනිමියෙන්, එය Node Sass හි 5 වේ). ඔබ Dart Sass භාවිතා කරන්නේ නම්, එම සම්පාදකය 10 ක වටකුරු නිරවද්‍යතාවයක් භාවිතා කරන අතර කාර්යක්‍ෂම හේතූන් මත එය සකස් කිරීමට ඉඩ නොදේ.

ස්වයං උපසර්ගය

Bootstrap විසින් Autoprefixer භාවිතා කරයි (අපගේ ගොඩනැගීමේ ක්‍රියාවලියට ඇතුළත් කර ඇත) ස්වයංක්‍රීයව සමහර CSS ගුණාංග වලට විකුණුම් උපසර්ග එක් කිරීමට. එසේ කිරීමෙන් අපගේ CSS හි ප්‍රධාන කොටස් එක් වරක් ලිවීමට ඉඩ දීමෙන් අපට කාලය සහ කේත ඉතිරි කර ගත හැකි අතර v3 හි ඇති වැනි විකුණුම්කරුවන්ගේ මිශ්‍රණයේ අවශ්‍යතාවය ඉවත් කරයි.

අපි අපගේ GitHub ගබඩාව තුළ Autoprefixer හරහා සහය දක්වන බ්‍රව්සර් ලැයිස්තුව වෙනම ගොනුවක පවත්වාගෙන යන්නෙමු. විස්තර සඳහා .browserslistrc බලන්න .

දේශීය ලියකියවිලි

අපගේ ප්‍රලේඛනය දේශීයව ක්‍රියාත්මක කිරීම සඳහා Hugo -bin npm පැකේජය හරහා ස්ථාපනය කරන Hugo භාවිතය අවශ්‍ය වේ . හියුගෝ යනු අපට සපයන ඉතා වේගවත් සහ තරමක් විස්තීරණ ස්ථිතික අඩවි උත්පාදක යන්ත්‍රයකි: මූලික ඇතුළත්, Markdown මත පදනම් වූ ගොනු, සැකිලි සහ තවත් දේ. එය ආරම්භ කරන්නේ කෙසේද යන්න මෙන්න:

  1. සියලු පරායත්තතා ස්ථාපනය කිරීමට ඉහත මෙවලම් සැකසුම හරහා ධාවනය කරන්න .
  2. මූල /bootstrapනාමාවලියෙන්, npm run docs-serveවිධාන රේඛාවේ ධාවනය කරන්න.
  3. ඔබගේ බ්‍රවුසරයේ විවෘත http://localhost:9001/කරන්න, සහ voilà.

එහි ලියකියවිලි කියවීමෙන් හියුගෝ භාවිතා කිරීම ගැන තව දැනගන්න .

දෝෂගවේෂණය

පරායත්තතා ස්ථාපනය කිරීමේදී ඔබට ගැටළු ඇති වුවහොත්, පෙර පැවති සියලු පරායත්ත අනුවාද (ගෝලීය සහ දේශීය) අස්ථාපනය කරන්න. ඉන්පසු, නැවත ධාවනය කරන්න npm install.