in English

ကိရိယာများတည်ဆောက်ပါ။

ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများကိုတည်ဆောက်ရန်၊ အရင်းအမြစ်ကုဒ်စုစည်းမှု၊ စမ်းသပ်မှုများလုပ်ဆောင်ရန်နှင့် အခြားအရာများပြုလုပ်ရန်အတွက် Bootstrap ၏ထည့်သွင်းထားသော npm script များကိုအသုံးပြုနည်းကို လေ့လာပါ။

Tooling စနစ်ထည့်သွင်းခြင်း။

Bootstrap သည် ၎င်း၏တည်ဆောက်မှုစနစ်အတွက် npm script များကို အသုံးပြုသည်။ ကျွန်ုပ်တို့၏ package.json တွင် ကုဒ်စုစည်းမှု၊ လုပ်ဆောင်နေသည့် စမ်းသပ်မှုများနှင့် အခြားအရာများအပါအဝင် framework နှင့် အလုပ်လုပ်ရန်အတွက် အဆင်ပြေသောနည်းလမ်းများ ပါဝင်သည်။

ကျွန်ုပ်တို့၏တည်ဆောက်မှုစနစ်ကိုအသုံးပြုပြီး ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများကို စက်တွင်းတွင်လည်ပတ်ရန်အတွက်၊ သင်သည် Bootstrap ၏အရင်းအမြစ်ဖိုင်များနှင့် Node ၏မိတ္တူတစ်ခုလိုအပ်ပါသည်။ ဤအဆင့်များကို လိုက်နာပြီး လှုပ်ရန် အသင့်ဖြစ်သင့်သည်-

  1. ကျွန်ုပ်တို့၏ မှီခိုမှုကိုစီမံခန့်ခွဲရန် ကျွန်ုပ်တို့အသုံးပြုသည့် Node.js ကို ဒေါင်းလုဒ်လုပ်ပြီး ထည့်သွင်း ပါ။
  2. Bootstrap ၏ရင်းမြစ်များကို ဒေါင်းလုဒ်လုပ်၍ ဖြစ်စေ သို့မဟုတ် Bootstrap ၏ သိုလှောင်မှုကို ဖြတ် နိုင်သည်။
  3. root /bootstrapdirectory သို့သွား၍ package.jsonnpm install တွင်ဖော်ပြထားသောကျွန်ုပ်တို့၏ဒေသခံမှီခိုမှုကိုထည့်သွင်းရန် run ပါ ။

ပြီးသွားသောအခါ၊ သင်သည် command line မှပေးသော အမျိုးမျိုးသော command များကို run နိုင်မည်ဖြစ်သည်။

npm script များကိုအသုံးပြုခြင်း။

ကျွန်ုပ်တို့၏ package.json တွင် အောက်ပါ command များနှင့် လုပ်ဆောင်စရာများ ပါဝင်သည်-

တာဝန် ဖော်ပြချက်
npm run dist npm run dist/dist/စုစည်းထားသောဖိုင်များဖြင့် လမ်းညွှန် ကို ဖန်တီးသည် ။ Sass ၊ Autoprefixer နှင့် terser ကို အသုံးပြုသည် ။
npm test ပြေးပြီးနောက် စက်တွင်း စမ်းသပ်မှုများကို လုပ်ဆောင်သည်။npm run dist
npm run docs-serve စာရွက်စာတမ်းကို စက်တွင်း၌ တည်ဆောက်ပြီး လုပ်ဆောင်သည်။

npm runnpm script အားလုံးကိုကြည့်ရန် run ပါ။

ကျွန်ုပ်တို့၏ starter ပရောဂျက်ဖြင့် npm မှတစ်ဆင့် Bootstrap ဖြင့် စတင်လိုက်ပါ။ သင့်ကိုယ်ပိုင် npm ပရောဂျက်တွင် Bootstrap တည်ဆောက်ပုံနှင့် စိတ်ကြိုက်ပြင်ဆင်နည်းကို ကြည့်ရှုရန် twbs/bootstrap-npm-starter template သိုလှောင်ရာသို့ သွား ပါ ။ Sass compiler၊ Autoprefixer၊ Stylelint၊ PurgeCSS နှင့် Bootstrap အိုင်ကွန်များ ပါဝင်သည်။

ဆူး

Bootstrap v4 သည် ကျွန်ုပ်တို့၏ Sass အရင်းအမြစ်ဖိုင်များကို CSS ဖိုင်များ (ကျွန်ုပ်တို့၏ တည်ဆောက်မှုလုပ်ငန်းစဉ်တွင် ပါ၀င်သည်) တွင် ကျွန်ုပ်တို့၏ Sass အရင်းအမြစ်ဖိုင်များကို စုစည်းရန်အတွက် Node Sass ကို အသုံးပြုသည်။ သင်၏ကိုယ်ပိုင်ပိုင်ဆိုင်မှုပိုက်လိုင်းကိုအသုံးပြု၍ Sass ကိုစုစည်းသောအခါတွင်တူညီသောထုတ်လုပ်ထားသော CSS နှင့်အဆုံးသတ်ရန်အတွက်၊ သင်သည် Node Sass ၏အနည်းဆုံးအင်္ဂါရပ်များကိုပံ့ပိုးပေးသည့် Sass compiler ကိုအသုံးပြုရန်လိုအပ်ပါသည်။ 2020 ခုနှစ်၊ အောက်တိုဘာလ 26 ရက်နေ့မှစ၍ Node Sass အပါအဝင် ၎င်း၏အပေါ်တွင်တည်ဆောက်ထားသော LibSass နှင့် ပက်ကေ့ခ်ျများကို ရပ်ဆိုင်းထားသောကြောင့် သတိပြုရန် အရေးကြီးပါသည် ။

သင်သည် အသစ်သော Sass အင်္ဂါရပ်များ သို့မဟုတ် အသစ်သော CSS စံနှုန်းများနှင့် လိုက်ဖက်မှုရှိရန် လိုအပ်ပါက၊ Dart Sass သည် ယခုအခါ Sass ၏ အဓိက အကောင်အထည်ဖော်မှုဖြစ်ပြီး Node Sass နှင့် အပြည့်အဝသဟဇာတဖြစ်သော JavaScript API ကို ပံ့ပိုးပေးသည် (ခြွင်းချက်အနည်းငယ်ဖြင့် Dart Sass ၏ GitHub စာမျက်နှာတွင် ဖော်ပြထားသော ခြွင်းချက်အနည်းငယ်ပါ )။

ဘရောက်ဆာ လှည့်ခြင်းဆိုင်ရာ ပြဿနာများကို ကာကွယ်ရန် ကျွန်ုပ်တို့သည် Sass ကို 6 (ပုံမှန်အားဖြင့်၊ ၎င်းသည် Node Sass တွင် 5 ဖြစ်သည်) သို့ တိုးမြှင့်ထားသည်။ Dart Sass ကို သင်အသုံးပြုပါက ၎င်းသည် ချိန်ညှိရန် လိုအပ်သည့်အရာမဟုတ်ပေ။

အလိုအလျောက် ညွှန်းပေးသည်။

Bootstrap သည် တည်ဆောက်ချိန်၌ အချို့သော CSS ဂုဏ်သတ္တိများသို့ ရောင်းချသူ၏ရှေ့ဆက်များကို အလိုအလျောက်ထည့်သွင်း ရန်အတွက် Autoprefixer (ကျွန်ုပ်တို့၏တည်ဆောက်မှုလုပ်ငန်းစဉ်တွင် ပါဝင်သော) ကိုအသုံးပြုသည်။ ထိုသို့လုပ်ဆောင်ခြင်းဖြင့် v3 တွင်တွေ့ရသော v3 တွင်တွေ့ရသော ရောင်းချသူ mixins လိုအပ်မှုကို ဖယ်ရှားစေပြီး ကျွန်ုပ်တို့၏ CSS ၏ အဓိကအစိတ်အပိုင်းများကို တစ်ကြိမ်တည်းရေးသားခွင့်ပြုခြင်းဖြင့် ကျွန်ုပ်တို့၏အချိန်နှင့် ကုဒ်ကို သက်သာစေပါသည်။

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ GitHub သိုလှောင်မှုအတွင်းရှိ သီးခြားဖိုင်တစ်ခုတွင် Autoprefixer မှတစ်ဆင့် ပံ့ပိုးပေးသည့် ဘရောက်ဆာများစာရင်းကို ထိန်းသိမ်းထားသည်။ အသေးစိတ် အတွက် .browserslistrc ကို ကြည့်ပါ ။

ဒေသဆိုင်ရာစာရွက်စာတမ်း

ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများကို စက်တွင်းတွင်လုပ်ဆောင်ခြင်းသည် hugo-bin npm ပက်ကေ့ခ်ျမှတစ်ဆင့် ထည့်သွင်းထားသည့် Hugo ကိုအသုံးပြုရန်လိုအပ်ပါသည်။ Hugo သည် ကျွန်ုပ်တို့အား ပံ့ပိုးပေးသော အလွန်လျင်မြန်ပြီး တိုးချဲ့နိုင်သော အငြိမ်ဆိုက်ဂျင်နရေတာတစ်ခုဖြစ်သည်- အခြေခံပါဝင်သည်၊ Markdown-based ဖိုင်များ၊ နမူနာများနှင့် အခြားအရာများပါဝင်သည်။ ဤတွင် ၎င်းကို စတင်ရန် နည်းလမ်းမှာ-

  1. မှီခိုမှုအားလုံးကို ထည့်သွင်းရန် အထက်တွင် ကိရိယာတန်ဆာပလာ စနစ် ထည့်သွင်းမှု မှတစ်ဆင့် လုပ်ဆောင်ပါ။
  2. root directory မှ command line တွင် /bootstraprun ပါ။npm run docs-serve
  3. http://localhost:9001/သင်၏ browser တွင် ဖွင့် ပါ၊ နှင့်voilà။

၎င်း၏ စာရွက်စာတမ်းများ ကိုဖတ်ခြင်းဖြင့် Hugo ကိုအသုံးပြုခြင်းအကြောင်းပိုမိုလေ့လာပါ ။

ပြသာနာရှာဖွေရှင်းပေးခြင်း

မှီခိုမှုထည့်သွင်းခြင်းတွင် ပြဿနာများကြုံတွေ့ပါက ယခင်မှီခိုမှုဗားရှင်းများ (ကမ္ဘာလုံးဆိုင်ရာနှင့် ဒေသတွင်း) အားလုံးကို ဖြုတ်လိုက်ပါ။ ပြီးရင် ပြန် run လိုက်ပါ npm install။