in English

Membangun alat

Pelajari cara menggunakan skrip npm Bootstrap yang disertakan untuk membuat dokumentasi kami, mengkompilasi kode sumber, menjalankan tes, 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:

  1. Unduh dan instal Node.js , yang kami gunakan untuk mengelola dependensi kami.
  2. Unduh sumber Bootstrap atau garpu repositori Bootstrap .
  3. Arahkan ke /bootstrapdirektori root dan jalankan npm 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 menyertakan perintah dan tugas berikut:

Tugas Keterangan
npm run dist npm run distmembuat /dist/direktori dengan file yang dikompilasi. Menggunakan Sass , Autoprefixer , dan terser .
npm test Menjalankan tes secara lokal setelah dijalankannpm run dist
npm run docs-serve Membangun dan menjalankan dokumentasi secara lokal.

Jalankan npm rununtuk melihat semua skrip npm.

Mulailah dengan Bootstrap melalui npm dengan proyek awal kami! Buka repositori template twbs /bootstrap-npm-starter untuk melihat cara membuat dan menyesuaikan Bootstrap di proyek npm Anda sendiri. Termasuk kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, dan Ikon Bootstrap.

Kelancangan

Bootstrap v4 menggunakan Node Sass untuk mengkompilasi file sumber Sass kami ke dalam file CSS (termasuk dalam proses pembuatan kami). Untuk mendapatkan CSS yang sama saat mengompilasi Sass menggunakan saluran aset Anda sendiri, Anda harus menggunakan kompiler Sass yang mendukung setidaknya fitur yang dilakukan Node Sass. Ini penting untuk diperhatikan karena mulai 26 Oktober 2020, LibSass dan paket yang dibangun di atasnya—termasuk Node Sass—tidak digunakan lagi .

Jika Anda memerlukan fitur Sass yang lebih baru atau kompatibilitas dengan standar CSS yang lebih baru, Dart Sass sekarang menjadi implementasi utama Sass dan mendukung JavaScript API yang sepenuhnya kompatibel dengan Node Sass (dengan beberapa pengecualian yang tercantum di halaman GitHub Dart Sass ).

Kami meningkatkan presisi pembulatan Sass menjadi 6 (secara default, 5 di Node Sass) untuk mencegah masalah dengan pembulatan browser. Jika Anda menggunakan Dart Sass, ini tidak akan menjadi sesuatu yang perlu Anda sesuaikan, karena kompiler tersebut menggunakan presisi pembulatan 10 dan untuk alasan efisiensi tidak mengizinkannya untuk disesuaikan.

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.

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:

  1. Jalankan melalui pengaturan perkakas di atas untuk menginstal semua dependensi.
  2. Dari direktori root /bootstrap, jalankan npm run docs-servedi baris perintah.
  3. 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.