今天成功的透過 Node.js 把 LESS 編譯成功，這邊就來做個紀錄。
最近在接觸 Bootstrap 的過程中了解到要會 Bootstrap 除了要懂 RWD 的 Grid System 之外，還要會用 LESS 才算對 Bootstrap 有基本的認識。
官方文件說明 Bootstrap 的 CSS 是用 LESS 寫的，而 LESS 產生的 CSS 文件又要用 Node.js 去編譯，因此要會用 LESS 還非碰 Node.js 不可。
想當初在上孝弘老師 Node.js 的課的時候都在放空，開始感到後悔了...
第一步：當然是先到 Node.js 官方網站去下載並安裝 Node.js。(http://nodejs.org/)
第二步：安裝完成後開啟命令列，透過 npm 去安裝 LESS ，可參考 LESS 官網的 Getting Start (http://lesscss.org/)
$ npm install -g less
第三步：將準備好的 LESS 檔案透過 Node.js 編譯，有幾個特別的地方要注意
1. 基本的編譯方式是可參考 LESS 的說明
可透過命令列輸入
$ lessc styles.less
即可看到 LESS 編譯成功後的 CSS 程式碼，但是此程式碼只會出現在命令列視窗內。
若要存成 CSS 文字檔則要透過以下指令
$ lessc styles.less > styles.css
這樣就會將編譯後的檔案存成檔名叫 styles.css 的 CSS 檔案，此即可拿來使用。
要注意的事情是，上面步驟是要在放入 less 檔案的資料夾內輸入指令。若將自訂的 styles.less 檔案放在 c:\test 資料夾內
則先要透過命令列 c:\> cd test 進入 test 資料夾，再操作上述步驟。
2. 多 less 檔案一起編譯
看 Bootstrap 從 GitHub 下載下來的原始檔案可以發現，Bootstrap 提供的 less 檔案分為許多不同名稱的.less 檔案方便做管理與編輯。
那麼要怎麼同時一起編譯這麼多的 .less 檔案？
重複的透過命令列輸入
$ lessc a.less > a.css
$ lessc b.less > b.css
$ lessc c.less > c.css
以此類推...
應該不會有人真的想這樣做吧！>
看到 Bootstrap 的官方文件提供的 CSS 檔案只有一個，頂多多了個 mini 檔，這麼多份 .less 文件要怎麼弄成一個 css，這就是重點啦！
關鍵可以參考 Bootstrap 的 bootstrap.less 文件的內文。
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset
@import "normalize.less";
@import "print.less";
...
可以看到此份文件內只有 @import "xxxxx.less";
意思是說把相關要被編譯的 .less 文件透過 @import 全部整理在此，我們只要透過 Node.js 去編譯這份文件，LESS 就會根據此份文件去找到需要的文件編譯並且彙整成為一份 CSS 檔案。
所以~就是這麼簡單，以 Bootstrap 為例，我們只要在最後命令列上打以下指令
$ lessc bootstrap.less > bootstrap.css
即可產生一個 bootstrap.css 的 CSS 檔案
是不是很簡單啊！
瞭解上述操作以後，就可以隨心所欲的手動編輯所需要的 LESS 檔案嚕！
不過這樣還是很麻煩，看到 Boostrap 的文件編譯都是透過 Grunt 來代替剛剛我上述的過程，有空再研究一下要怎麼使用 Grunt (http://gruntjs.com/)
有興趣的人再一起研究研究吧~
By Kevin Hsiao 2014/06/18
留言列表
