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

webstorm內建less，不過要編譯的話需要nodejs環境。 首先去node的首頁下載對應版本的nodejs然後安裝，下載地址：http://nodejs.org/ 安裝完之後開啟命令提示字元（win+r）,分別輸入node -v以及npm -v如果返回版本號碼說明你安裝成功了。 接下來就可以安裝less了，命令提示字元npm進入npm管理器，然後npm install less開始下載less，預設安裝目錄在使用者名稱\node_modules這裡面。 到這裡less安裝完畢了，接下來配置webstorm。 開啟webstorm的file->settings ->External Tools，點擊左上方的“加號”標誌add，進入對話方塊
program裡設定的是lessc的路徑，這裡的目錄可以參考截圖中紅框中的目錄，他會預設編譯到根目錄。例如：/Users/xx/node_modules/less/bin/lessc 如果你想順便壓縮編譯後的css，除了在Arguments中寫入--plugin=less-plugin-clean-css外還要安裝壓縮外掛程式：sudo 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/中搞定
然後你可以為這個編譯器指定一個快速鍵，我使用的是ALT + B 之後開啟一個.less尾碼名的檔案，快速鍵編譯，如果webstorm底部狀態控制器顯示 Process finished with exit code 0 ，那麼恭喜你，大功告成。