建構工具(Build Tools)
學習如何使用 Bootstrap 內建的 npm 腳本建立我們的文件、編譯原始程式碼、運行測試和更多。
工具設定
Boostrap 的建構系統採用 NPM 腳本 。 我們的 package.json 包含了方便框架工作的方法，包括編譯程式碼、運行測試和更多工作。
要使用我們的建構系統並在本地運行我們的文件，你需要一份 Boostrap 原始檔案的副本和 Node.js。遵循以下步驟，然後準備開始：
- 下載和安裝 Node.js, 我們採用 Node.js 管理我們的從屬附件。
- 接著 下載 Bootstrap 的原始碼 或者拷貝 Bootstrap 的資料庫。
- 瀏覽至
/bootstrap根目錄跟執行npm install從我們本地的 package.json. 依賴清單中安裝。
當完成時, 你將能夠執行從命令列所提供的各種指令。
使用 NPM 腳本
我們的 package.json 為了開發專案包含了大量任務。 執行 npm run 在終端機看到所有的 NPM 腳本。
主要的任務包括:
| 任務 | 描述 |
|---|---|
npm start
|
編譯 CSS 跟 JavaScript, 建立頁面, 跟啟動本地伺服器。 |
npm run dist
|
在編譯的檔案上建立 /dist 根目錄。 Sass, Autoprefixer, 和 terser.
|
npm test
|
執行 npm run dist 之後在本地進行測試
|
npm run docs-serve
|
在本地建立和運行文件 |
Sass
Bootstrap uses Dart Sass for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you’re compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now deprecated.
Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don’t lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
自動增加前輟詞
Bootstrap 採用 (我們的建構過程中包含的) Autoprefixer 以便自動在建構時向某些 CSS 屬性增加前輟詞。
自動增加前輟詞可讓我們每次編寫 CSS 時，無需採用第三版中用的那些 Sass mixins，這樣可以節省我們的時間。
我們在 GitHub 版本庫中的一份獨立檔案中保存了通過 Autoprefixer 支援的瀏覽器清單。預知明細，請參見 .browserslistrc。
RTLCSS
Bootstrap 使用 RTLCSS 處理已編譯的 CSS 並將其轉換為 RTL – 基本上取代了水平方向和他們相反的屬性 (例如. padding-left)。 它只允許我們單次編輯 CSS 並使用 RTLCSS control 和 value 指令進行細微調整。
本地檔
在本地運行我們的檔需要採用 Hugo，透過 npm 套件來安裝 hugo-bin。 Hugo 是一種快速和提供我們相當的可擴展性靜態站點生產器: 基本包含, 基於 Markdown 的檔案，模板，還有更多。 這是開始的方法:
- 透過執行 tooling setup 安裝以上所有的從屬附件。
- 從
/bootstrap的根目錄中，在命令列中執行npm run docs-serve。 - 在瀏覽器中打開
http://localhost:9001/, 然後大功告成。 閱讀這個 documentation 學習更多有關於 Hugo 的使用。
故障排解
若安裝附件遇到問題，先解除安裝所有先前的版本（包含全域及區域)。 然後，再次運行 npm install。