鍍金池/ 教程/ HTML/ 編譯 CSS 和 JavaScript 文件
警告框
標簽頁
代碼
輪播
進度條
輔助類
按鈕組
社區(qū)
標簽
導(dǎo)航
響應(yīng)式工具
禁止響應(yīng)式布局
工具提示
概覽
媒體對象
概覽
具有響應(yīng)式特性的嵌入內(nèi)容
Well
折疊
下載
對第三方組件的支持
Glyphicons 字體圖標
編譯 CSS 和 JavaScript 文件
徽章
柵格系統(tǒng)
瀏覽器和設(shè)備的支持情況
輸入框組
表格
滾動監(jiān)聽
下拉菜單
排版
巨幕
按鈕
頁頭
使用 Sass
包含的內(nèi)容
縮略圖
模態(tài)框
基本模板
面版
圖片
路徑導(dǎo)航
分頁
導(dǎo)航條
警告框
過渡效果
從 v2.x 版本升級到 v3.x 版本
工具
可訪問性
彈出框
按鈕式下拉菜單
表單
列表組
按鈕
使用 Less
下拉菜單

編譯 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 作為編譯系統(tǒng),并且對外提供了一些方便的方法用于編譯整個框架。下面講解的就是如何編譯源碼、運行測試用例等內(nèi)容。

安裝 Grunt

安裝 Grunt 前,你需要首先下載并安裝 node.js (npm 已經(jīng)包含在內(nèi))。npm 是 node packaged modules 的簡稱,它的作用是基于 node.js 管理擴展包之間的依賴關(guān)系。

然后在命令行中輸入以下命令: 在全局環(huán)境中安裝 grunt-clinpm install -g grunt-cli。 進入 /bootstrap/ 根目錄,然后執(zhí)行 npm install 命令。npm 將讀取 package.json 文件并自動安裝此文件中列出的所有被依賴的擴展包。 上述步驟完成后,你就可以運行 Bootstrap 所提供的各個 Grunt 命令了。

可用的 Grunt 命令

grunt dist (僅編譯 CSS 和 JavaScript 文件)

重新生成 /dist/ 目錄,并將編譯壓縮后的 CSS 和 JavaScript 文件放入這個目錄中。作為一名 Bootstrap 用戶,大部分情況下你只需要執(zhí)行這一個命令。

grunt watch (監(jiān)測文件的改變,并運行指定的 Grunt 任務(wù))

監(jiān)測 Less 源碼文件的改變,并自動重新將其編譯為 CSS 文件。

grunt test (運行測試用例)

在 PhantomJS 環(huán)境中運行 JSHint 和 QUnit 自動化測試用例。

grunt docs (編譯并測試文檔中的資源文件)

編譯并測試 CSS、JavaScript 和其他資源文件。在本地環(huán)境下通過 jekyll serve 運行 Bootstrap 文檔時需要用到這些資源文件。

grunt (重新構(gòu)建所有內(nèi)容并運行測試用例)

編譯并壓縮 CSS 和 JavaScript 文件、構(gòu)建文檔站點、對文檔做 HTML5 校驗、重新生成定制工具所需的資源文件等,都需要 Jekyll 工具。這些只有在你對 Bootstrap 深度研究時才有用。

除錯

如果你在安裝依賴包或者運行 Grunt 命令時遇到了問題,請首先刪除 npm 自動生成的 /node_modules/ 目錄,然后,再次運行 npm install命令。

上一篇:排版下一篇:過渡效果