前言
這段時間一直在看Bootstrap,隨着逐漸加深免不了進行Boostrap的css和js文件的編譯了。涉及的技術並不難，只是電腦環境不一樣，偶爾會碰見一兩個小坑，現在將過程記錄下來。
開始動手
以下假設已經安裝好了Nodejs，安裝路徑爲D:\Program Files\nodejs\。如果沒有安裝，建議查看另外一篇博文《安裝Nodejs、npm、Less（支持生成壓縮後的css）》
1、下載源碼
http://v3.bootcss.com/getting-started/#download ，下載後解壓到某個文件夾下
如 D:\bootstrap-3.3.7
2、安裝Grunt
在命令行（cmd）輸入以下命令
d:
cd D:\Program Files\nodejs\node_modules\npm
npm install -g grunt-cli3、安裝Boostrap依賴的擴展包
在命令行（cmd）輸入以下命令
d:
cd D:\bootstrap-3.3.7
npm install筆者進行到這一步時提示下載phantomjs-1.9.8-windows.zip失敗，解決方法很簡單，手動從網上下載該文件(鏈接：http://pan.baidu.com/s/1slm41el 密碼：iepl)，放到錯誤提示裏提到的目錄下（筆者電腦裏是C:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip），刪除D:\bootstrap-3.3.7\node_modules文件夾，重新執行npm -install。
4、至此，就可以執行Grunt的命令來編譯了，官方提供以下命令
| 命令 | 說明 |
|---|---|
| grunt dist | （僅編譯 CSS 和 JavaScript 文件） 重新生成 /dist/ 目錄，並將編譯壓縮後的 CSS 和 JavaScript 文件放入這個目錄中。 |
| grunt watch | （監測文件的改變，並運行指定的 Grunt 任務）， 監測 Less 源碼文件的改變，並自動重新將其編譯爲 CSS 文件。只生成未壓縮的文件。 |
| grunt test | （運行測試用例） 在 PhantomJS 環境中運行 JSHint 和 QUnit 自動化測試用例。 |
| grunt docs | （編譯並測試文檔中的資源文件） 編譯並測試 CSS、JavaScript 和其他資源文件。在本地環境下通過 bundle exec jekyll serve 運行 Bootstrap 文檔時需要用到這些資源文件。 |
| grunt | （重新構建所有內容並運行測試用例） 編譯並壓縮 CSS 和 JavaScript 文件、構建文檔站點、對文檔做 HTML5 校驗、重新生成定製工具所需的資源文件等，都需要 Jekyll 工具。這些只有在你對 Bootstrap 深度研究時纔有用。 |
上述命令中，筆者用的最多的是第1個和第2個，筆者採用WebStorm來編輯Bootstrap源碼的，WebStorm自帶Watcher功能自動將less編譯成css,不過筆者建議在編輯Bootstrap源碼時停用該功能，採用Grunt watch功能代替。