Mbangun alat
Sinau carane nggunakake skrip npm sing kalebu Bootstrap kanggo mbangun dokumentasi, ngumpulake kode sumber, tes mbukak, lan liya-liyane.
Persiyapan perkakas
Bootstrap nggunakake skrip npm kanggo sistem mbangun. Package.json kita kalebu cara sing trep kanggo nggarap kerangka, kalebu kode kompilasi, tes sing mlaku, lan liya-liyane.
Kanggo nggunakake sistem mbangun lan mbukak dokumentasi lokal, sampeyan butuh salinan file sumber Bootstrap lan Node. Tindakake langkah iki lan sampeyan kudu siap kanggo rock:
- Ngundhuh lan nginstal Node.js , sing digunakake kanggo ngatur dependensi kita.
- Ngundhuh sumber Bootstrap utawa garpu gudang Bootstrap .
/bootstrap
Navigasi menyang direktori root lan mbukaknpm install
kanggo nginstal dependensi lokal sing kadhaptar ing package.json .
Yen wis rampung, sampeyan bakal bisa mbukak macem-macem printah sing kasedhiya saka baris printah.
Nggunakake skrip npm
package.json kita kalebu printah lan tugas ing ngisor iki:
tugas | Katrangan |
---|---|
npm run dist |
npm run dist nggawe /dist/ direktori karo file kompilasi. Migunakake Sass , Autoprefixer , lan terser . |
npm test |
Nglakokake tes sacara lokal sawise mlakunpm run dist |
npm run docs-serve |
Mbangun lan mbukak dokumentasi lokal. |
Mbukak npm run
kanggo ndeleng kabeh skrip npm.
Sass
Bootstrap v4 nggunakake Node Sass kanggo ngumpulake file sumber Sass menyang file CSS (kalebu ing proses mbangun). Supaya bisa nggawe CSS sing padha nalika nyusun Sass nggunakake pipa aset sampeyan dhewe, sampeyan kudu nggunakake kompiler Sass sing ndhukung paling ora fitur sing ditindakake Node Sass. Iki penting kanggo dicathet amarga wiwit tanggal 26 Oktober 2020, LibSass lan paket sing dibangun ing ndhuwure - kalebu Node Sass - ora digunakake .
Yen sampeyan mbutuhake fitur Sass sing luwih anyar utawa kompatibilitas karo standar CSS sing luwih anyar, Dart Sass saiki dadi implementasi utama Sass lan ndhukung API JavaScript sing kompatibel karo Node Sass (kanthi sawetara pangecualian sing kadhaptar ing kaca GitHub Dart Sass ).
Kita nambah presisi pembulatan Sass dadi 6 (kanthi standar, iku 5 ing Node Sass) kanggo nyegah masalah karo pembulatan browser. Yen sampeyan nggunakake Dart Sass iki bakal ora soko sampeyan kudu nyetel, minangka compiler sing nggunakake tliti babak 10 lan kanggo alasan efficiency ora ngidini kanggo diatur.
Autoprefixer
Bootstrap nggunakake Autoprefixer (kalebu ing proses mbangun kita) kanggo nambahake awalan vendor kanthi otomatis menyang sawetara properti CSS nalika mbangun. Mengkono ngirit wektu lan kode kanthi ngidini kita nulis bagean-bagean penting saka CSS kita siji-sijine nalika ngilangi kabutuhan mixin vendor kaya sing ditemokake ing v3.
Kita njaga dhaptar browser sing didhukung liwat Autoprefixer ing file sing kapisah ing repositori GitHub. Waca .browserslistrc kanggo rincian.
Dokumentasi lokal
Nglakokake dokumentasi kita sacara lokal mbutuhake panggunaan Hugo, sing bakal diinstal liwat paket npm hugo-bin . Hugo minangka generator situs statis sing cepet banget lan cukup extensible sing nyedhiyakake: dhasar kalebu, file basis Markdown, template, lan liya-liyane. Mangkene carane miwiti:
- Bukak persiyapan perkakas ing ndhuwur kanggo nginstal kabeh dependensi.
/bootstrap
Saka direktori root , mbukaknpm run docs-serve
ing baris printah.- Bukak
http://localhost:9001/
ing browser sampeyan, lan voilà.
Sinau luwih lengkap babagan nggunakake Hugo kanthi maca dokumentasi .
Ngatasi masalah
Yen sampeyan nemoni masalah nalika nginstal dependensi, instal kabeh versi dependensi sadurunge (global lan lokal). Banjur, mbukak maneh npm install
.