Windows7 x64 系統下安裝 Nodejs 並在 WebStorm 9.0.1 下搭建編譯 LESS 環境

一、 打開Nodejs官網http://www.nodejs.org/，點「DOWNLOADS」,點64-bit下載「node-v0.10.33-x64.msi」。

 

二、 下載好後，雙擊「node-v0.10.33-x64.msi」，按照默認選項安裝Nodejs，默認安裝路徑爲：C:\Program Files\nodejs。

 

三、 「開始」-->cmd,打開cmd程序，輸入「node -v」,出現」 v0.10.33」; 輸入「npm -v」,出現」 1.4.28」,說明Nodejs和npm都已安裝成功。

 

 

四、「開始」-->cmd,打開cmd程序，輸入「cd C:\Program Files\nodejs」,進入nodejs安裝目錄。輸入npm install less -g 回車，安裝less組件。稍等片刻，完成後，你會發現C:\Users\wind\AppData\Roaming\npm\node_modules 目錄下有less組件。

 

 

 

至此Windows7 x64系統下安裝Nodejs及配置less組件已基本完成，接下來咱們配置WebStorm 9.0.1，使其能將less文件編譯成css文件。

 

五、開啓JetBrains WebStorm 9.0.1程序，打開「SuperDesigns」項目，該項目中含有「default.less」文件。

 

 

六、File-->Settings,打開設置選項。找到「External Tools」擴展工具設置項，點開右側的「+」，在Name欄輸入「LESS」，「Tool settings」分別輸入以下：

Program: C:\Program Files\nodejs\ node.exe

Parameters: C:\Users\wind\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css

Working directiry: C:\Program Files\nodejs

確認輸入無誤後點右下的「OK」按鈕。而後再點Settings 版右下的「Apply」按鈕應用。

 

 

七、在Settings 面板頂端輸入「key」,找到快捷鍵設置項「Keymap」，在右側找到「External Tools」點開，點選「LESS」並單擊右鍵，選擇「Add Keyboard Shortcut」,在出現其面板的「First Stroke」處同時按下「Alt+B」鍵，這樣就將「Alt+B」設置爲將less文件編譯成css文件的快捷鍵。固然你能夠根據本身的實際狀況設置成其它的快捷鍵。確認好後點Settings 面板右下的「OK」按鈕。

 

 

 

 

八、回到打開的default.less文件，按下「Alt+B」快捷鍵，看看「default.css」是否是生成了！

 

 

至此已成功將less文件編譯成css文件。