webstorm下搭建編譯less環境 以及設置壓縮css

webstorm自帶less，不過要編譯的話須要nodejs環境。

1. 首先去node的主頁下載對應版本的nodejs而後安裝，下載地址：http://nodejs.org/
2. 安裝完以後打開命令提示符（win+r）,分別輸入node -v以及npm -v若是返回版本號說明你安裝成功了。
3. 接下來就能夠安裝less了，命令提示符npm進入npm管理器，而後npm -g install less開始下載less，默認安裝目錄在用戶名\node_modules這裏面。複製紅框中的路徑

4.  

5. 到這裏less安裝完畢了，接下來配置webstorm。
6. 打開webstorm的file->settings ->External Tools，點擊左上角的「加號」標誌add，進入對話框

7.  

8. program裏設置的是lessc的路徑，這裏的目錄能夠參考截圖中紅框中的目錄，他會默認編譯到根目錄。例如：/Users/xx/node_modules/less/bin/lessc
9. 若是你想順便壓縮編譯後的css，除了在Arguments中寫入--plugin=less-plugin-clean-css外還要安裝壓縮插件：npm install -g less-plugin-clean-css，這裏要注意我安裝的路徑，若是最後less-plugin-clean-css的路徑和上邊的/Users/xx/node_modules/less不一個路徑的話也跑步起來，這樣怎麼解決呢，能夠直接將clean-css路徑中的less-plugin-clean-css文件夾copy到/Users/xx/node_modules/中搞定
10. 而後你能夠爲這個編譯器指定一個快捷鍵，我使用的是ALT + B ，（注意：這一步能夠省略，由於直接保存就編譯了）
12. 以後打開一個.less後綴名的文件，快捷鍵編譯，若是webstorm底部狀態控制器顯示 Process finished with exit code 0 ，那麼恭喜你，大功告成！