構建工具
了解如何使用 Bootstrap 包含的 npm 腳本來構建我們的文檔、編譯源代碼、運行測試等。
工具設置
Bootstrap為其構建系統使用npm 腳本。我們的package.json包含使用框架的便捷方法,包括編譯代碼、運行測試等。
要使用我們的構建系統並在本地運行我們的文檔,您需要一份 Bootstrap 源文件和 Node.js 的副本。按照這些步驟,你應該準備好搖滾:
- 下載並安裝 Node.js,我們用它來管理我們的依賴項。
- 下載 Bootstrap 的源代碼或fork Bootstrap 的存儲庫。
- 導航到根
/bootstrap
目錄並運行以安裝我們在package.jsonnpm install
中列出的本地依賴項。
完成後,您將能夠運行命令行提供的各種命令。
使用 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 |
在本地構建和運行文檔。 |
薩斯
Bootstrap 使用Dart Sass將我們的 Sass 源文件編譯為 CSS 文件(包含在我們的構建過程中),如果您使用自己的資產管道編譯 Sass,我們建議您這樣做。我們之前在 Bootstrap v4 中使用了 Node Sass,但是現在不推薦使用LibSass 和基於它構建的包,包括 Node Sass 。
Dart Sass 使用 10 的捨入精度,出於效率原因,不允許調整此值。在我們生成的 CSS 的進一步處理過程中,我們不會降低此精度,例如在縮小期間,但如果您選擇這樣做,我們建議保持至少 6 的精度,以防止瀏覽器舍入問題。
自動前綴
Bootstrap 使用Autoprefixer(包含在我們的構建過程中)在構建時自動將供應商前綴添加到某些 CSS 屬性。這樣做可以讓我們一次性編寫 CSS 的關鍵部分,同時消除對 v3 中的供應商 mixin 的需求,從而節省了我們的時間和代碼。
我們在 GitHub 存儲庫中的單獨文件中維護通過 Autoprefixer 支持的瀏覽器列表。有關詳細信息,請參閱.browserslistrc。
RTLCSS
Bootstrap 使用RTLCSS處理編譯後的 CSS 並將它們轉換為 RTL - 基本上將水平方向感知屬性(例如padding-left
)替換為相反的屬性。它允許我們只編寫一次 CSS,並使用 RTLCSS控制和值指令進行微調。
本地文檔
在本地運行我們的文檔需要使用通過hugo-bin npm 包安裝的Hugo。Hugo 是一個非常快速且可擴展的靜態站點生成器,它為我們提供:基本包含、基於 Markdown 的文件、模板等。以下是如何開始:
- 運行上面的工具設置以安裝所有依賴項。
- 從根
/bootstrap
目錄,npm run docs-serve
在命令行中運行。 http://localhost:9001/
在瀏覽器中打開,瞧。
通過閱讀其文檔了解更多關於使用 Hugo 的信息。
故障排除
如果您在安裝依賴項時遇到問題,請卸載所有以前的依賴項版本(全局和本地)。然後,重新運行npm install
。