Membangun alat
Pelajari cara menggunakan skrip npm Bootstrap yang disertakan untuk membuat dokumentasi kami, mengkompilasi kode sumber, menjalankan pengujian, dan banyak lagi.
Pengaturan perkakas
Bootstrap menggunakan skrip npm untuk sistem build-nya. Package.json kami menyertakan metode mudah untuk bekerja dengan framework, termasuk mengkompilasi kode, menjalankan tes, dan banyak lagi.
Untuk menggunakan sistem build kami dan menjalankan dokumentasi kami secara lokal, Anda memerlukan salinan file sumber Bootstrap dan Node.js. Ikuti langkah-langkah ini dan Anda harus siap untuk bergoyang:
- Unduh dan instal Node.js , yang kami gunakan untuk mengelola dependensi kami.
- Unduh sumber Bootstrap atau garpu repositori Bootstrap .
- Arahkan ke
/bootstrapdirektori root dan jalankannpm installuntuk menginstal dependensi lokal kami yang terdaftar di package.json .
Setelah selesai, Anda akan dapat menjalankan berbagai perintah yang disediakan dari baris perintah.
Menggunakan skrip npm
Package.json kami mencakup banyak tugas untuk mengembangkan proyek. Jalankan npm rununtuk melihat semua skrip npm di terminal Anda. Tugas utama meliputi:
| Tugas | Keterangan |
|---|---|
npm start |
Mengkompilasi CSS dan JavaScript, membuat dokumentasi, dan memulai server lokal. |
npm run dist |
Membuat dist/direktori dengan file yang dikompilasi. Membutuhkan Sass , Autoprefixer , dan terser . |
npm test |
Menjalankan tes secara lokal setelah dijalankannpm run dist |
npm run docs-serve |
Membangun dan menjalankan dokumentasi secara lokal. |
Kelancangan
Bootstrap menggunakan Dart Sass untuk mengkompilasi file sumber Sass kami ke dalam file CSS (termasuk dalam proses pembuatan kami), dan kami menyarankan Anda melakukan hal yang sama jika Anda mengompilasi Sass menggunakan saluran aset Anda sendiri. Kami sebelumnya menggunakan Node Sass untuk Bootstrap v4, tetapi LibSass dan paket yang dibangun di atasnya, termasuk Node Sass, sekarang tidak digunakan lagi .
Dart Sass menggunakan presisi pembulatan 10 dan untuk alasan efisiensi tidak memungkinkan penyesuaian nilai ini. Kami tidak menurunkan presisi ini selama pemrosesan lebih lanjut dari CSS yang kami buat, seperti selama minifikasi, tetapi jika Anda memilih untuk melakukannya, sebaiknya pertahankan presisi minimal 6 untuk mencegah masalah dengan pembulatan browser.
Autoprefixer
Bootstrap menggunakan Autoprefixer (termasuk dalam proses pembuatan kami) untuk secara otomatis menambahkan awalan vendor ke beberapa properti CSS pada waktu pembuatan. Melakukannya menghemat waktu dan kode kami dengan memungkinkan kami untuk menulis bagian-bagian penting dari CSS kami satu kali sambil menghilangkan kebutuhan untuk mixin vendor seperti yang ditemukan di v3.
Kami menyimpan daftar browser yang didukung melalui Autoprefixer dalam file terpisah di dalam repositori GitHub kami. Lihat .browserslistrc untuk detailnya.
RTLCSS
Bootstrap menggunakan RTLCSS untuk memproses CSS yang dikompilasi dan mengubahnya menjadi RTL – pada dasarnya mengganti properti yang sadar arah horizontal (mis. padding-left) dengan kebalikannya. Ini memungkinkan kita hanya menulis CSS kita satu kali dan membuat tweak kecil menggunakan kontrol RTLCSS dan arahan nilai .
Dokumentasi lokal
Menjalankan dokumentasi kami secara lokal memerlukan penggunaan Hugo, yang diinstal melalui paket hugo-bin npm. Hugo adalah generator situs statis yang sangat cepat dan dapat diperluas yang menyediakan: penyertaan dasar, file berbasis penurunan harga, templat, dan banyak lagi. Berikut cara memulainya:
- Jalankan melalui pengaturan perkakas di atas untuk menginstal semua dependensi.
- Dari direktori root
/bootstrap, jalankannpm run docs-servedi baris perintah. - Buka
http://localhost:9001/di browser Anda, dan voila.
Pelajari lebih lanjut tentang menggunakan Hugo dengan membaca dokumentasinya .
Penyelesaian masalah
Jika Anda mengalami masalah dengan menginstal dependensi, hapus instalan semua versi dependensi sebelumnya (global dan lokal). Kemudian, jalankan kembali npm install.