in English

Ngawangun parabot

Diajar kumaha ngagunakeun skrip npm kalebet Bootstrap pikeun ngawangun dokuméntasi kami, nyusun kode sumber, ngajalankeun tés, sareng seueur deui.

Setélan pakakas

Bootstrap nganggo skrip npm pikeun sistem ngawangunna. package.json kami ngawengku métode merenah pikeun gawé bareng kerangka, kaasup kode compiling, ngajalankeun tés, sareng nu sanesna.

Pikeun nganggo sistem ngawangun kami sareng ngajalankeun dokuméntasi kami sacara lokal, anjeun peryogi salinan file sumber Bootstrap sareng Node. Turutan léngkah-léngkah ieu sareng anjeun kedah siap ngagulung:

  1. Ngundeur tur masang Node.js , nu urang pake pikeun ngatur kagumantungan urang.
  2. Boh unduh sumber Bootstrap atanapi garpu gudang Bootstrap .
  3. /bootstrapNapigasi ka diréktori root tur ngajalankeun npm installmasang dependensi lokal urang didaptarkeun di package.json .

Nalika réngsé, anjeun bakal tiasa ngajalankeun rupa-rupa paréntah anu disayogikeun tina garis paréntah.

Ngagunakeun skrip npm

package.json kami kalebet paréntah sareng tugas di handap ieu:

Tugas Katerangan
npm run dist npm run distnyiptakeun /dist/diréktori sareng file anu disusun. Nganggo Sass , Autoprefixer , sareng terser .
npm test Ngajalankeun tés sacara lokal saatos ngajalankeunnpm run dist
npm run docs-serve Ngawangun sareng ngajalankeun dokuméntasi sacara lokal.

Jalankeun npm runpikeun ningali sadaya skrip npm.

Mimitian ku Bootstrap via npm sareng proyék starter kami! Sirah kana repositori template twbs/bootstrap-npm-starter pikeun ningali kumaha ngawangun sareng ngaropea Bootstrap dina proyék npm anjeun nyalira. Ngawengku kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, sareng Ikon Bootstrap.

Sass

Bootstrap v4 nganggo Node Sass pikeun nyusun file sumber Sass kami kana file CSS (kaasup dina prosés ngawangun kami). Dina raraga mungkas nepi ka CSS dihasilkeun sarua nalika compile Sass maké pipa asset sorangan, anjeun bakal kudu make compiler Sass nu ngarojong sahenteuna fitur nu Node Sass teu. Ieu penting pikeun dicatet sabab saprak Oktober 26, 2020, LibSass sareng bungkusan anu diwangun di luhurna-kaasup Node Sass- deprecated .

Upami anjeun meryogikeun fitur Sass anu langkung énggal atanapi kasaluyuan sareng standar CSS anu langkung énggal, Dart Sass ayeuna mangrupikeun palaksanaan utama Sass sareng ngadukung API JavaScript anu sapinuhna cocog sareng Node Sass (kalawan sababaraha pengecualian anu didaptarkeun dina halaman GitHub Dart Sass ).

Kami ningkatkeun precision rounding Sass ka 6 (sacara standar, éta 5 dina Node Sass) pikeun nyegah masalah sareng rounding browser. Upami anjeun nganggo Dart Sass ieu moal janten hal anu anjeun kedah saluyukeun, sabab kompiler éta ngagunakeun precision rounding 10 sareng alesan efisiensi henteu ngamungkinkeun pikeun disaluyukeun.

Autoprefixer

Bootstrap ngagunakeun Autoprefixer (kaasup dina prosés ngawangun kami) pikeun otomatis nambahkeun awalan vendor kana sababaraha sipat CSS dina waktu ngawangun. Ngalakukeun kitu ngahemat waktos sareng kode kami ku ngamungkinkeun urang nyerat bagian konci CSS kami sakaligus bari ngaleungitkeun kabutuhan mixin vendor sapertos anu aya dina v3.

Kami ngajaga daptar browser anu dirojong ku Autoprefixer dina file anu misah dina gudang GitHub kami. Tempo .browserslistrc pikeun detil.

Dokuméntasi lokal

Ngajalankeun dokuméntasi kami sacara lokal ngabutuhkeun panggunaan Hugo, anu dipasang ku pakét npm hugo-bin . Hugo mangrupakeun generator situs statik blazingly gancang sarta cukup extensible nu nyadiakeun kami: dasar ngawengku, file basis Markdown, template, sarta leuwih. Ieu kumaha carana ngamimitian:

  1. Jalankeun setelan alat di luhur pikeun masang sadaya katergantungan.
  2. /bootstrapTina diréktori akar , jalankeun npm run docs-servedina garis paréntah.
  3. Buka http://localhost:9001/dina panyungsi anjeun, sarta voilà.

Diajar langkung seueur ngeunaan ngagunakeun Hugo ku maca dokuméntasina .

Pamérésan masalah

Upami anjeun ngalaman masalah sareng masang dependensi, cabut sadaya versi kagumantungan saméméhna (global sareng lokal). Lajeng, ngajalankeun deui npm install.