構建工具
了解如何使用 Bootstrap 包含的 npm 腳本來構建我們的文檔、編譯源代碼、運行測試等。
Bootstrap 將NPM 腳本用於其構建系統。我們的package.json包含使用框架的便捷方法,包括編譯代碼、運行測試等。
要使用我們的構建系統並在本地運行我們的文檔,您需要一份 Bootstrap 源文件和 Node.js 的副本。按照這些步驟,你應該準備好搖滾:
- 下載並安裝 Node.js,我們用它來管理我們的依賴項。
- 導航到根
/bootstrap
目錄並運行以安裝我們在package.jsonnpm install
中列出的本地依賴項。 - 安裝 Ruby,安裝Bundler,
gem install bundler
最後運行bundle install
。這將安裝所有 Ruby 依賴項,例如 Jekyll 和插件。- Windows 用戶:閱讀本指南,讓 Jekyll 順利啟動並運行。
完成後,您將能夠運行命令行提供的各種命令。
我們的package.json包含以下命令和任務:
任務 | 描述 |
---|---|
npm run dist |
npm run dist 創建/dist 包含編譯文件的目錄。使用Sass、Autoprefixer和UglifyJS。 |
npm test |
與npm run dist plus 相同,它在本地運行測試 |
npm run docs |
為文檔構建和檢查 CSS 和 JavaScript。然後,您可以通過在本地運行文檔npm run docs-serve 。 |
運行npm run
以查看所有 npm 腳本。
Bootstrap 使用Autoprefixer(包含在我們的構建過程中)在構建時自動將供應商前綴添加到某些 CSS 屬性。這樣做可以讓我們一次性編寫 CSS 的關鍵部分,同時消除對 v3 中的供應商 mixin 的需求,從而節省了我們的時間和代碼。
我們在 GitHub 存儲庫中的單獨文件中維護通過 Autoprefixer 支持的瀏覽器列表。有關詳細信息,請參閱/package.json。
在本地運行我們的文檔需要使用 Jekyll,這是一個相當靈活的靜態站點生成器,它為我們提供:基本包含、基於 Markdown 的文件、模板等。以下是如何開始:
- 運行上面的工具設置以安裝 Jekyll(站點構建器)和其他 Ruby 依賴項
bundle install
。 - 從根
/bootstrap
目錄,npm run docs-serve
在命令行中運行。 http://localhost:9001
在瀏覽器中打開,瞧。
通過閱讀 Jekyll 的文檔了解更多關於使用 Jekyll 的信息。
如果您在安裝依賴項時遇到問題,請卸載所有以前的依賴項版本(全局和本地)。然後,重新運行npm install
。