編譯Boostrap的css和js文件（涉及Nodejs、Less、Grunt）

2024-04-27 15:06:49

字體：大中小

來源：轉載

供稿：網友

前言

這段時間一直在看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/npmnpm install -g grunt-cli

3、安裝Boostrap依賴的擴展包在命令行（cmd）輸入以下命令

d:cd D:/bootstrap-3.3.7npm 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 深度研究時才有用。