在WebStorm裏配置watcher實現編輯less文件時自動生成.map和壓縮後的.css文件

1.操做前肯定成功安裝less，檢測方法，在命令行（cmd）,輸入lessc -v，看到以下相似內容，則說明安裝過了。 
 
若是須要生成壓縮後的css的文件，則須要經過如下命令安裝插件

npm install less-plugin-clean-css

【注：】可能遇到的問題

解決方案：在E:\Program Files\nodejs\node_modules\npm進行安裝

 

2.打開WebStrom，隨便新建一個工程，在工程名上右鍵，【新建】-【Stylesheet】,輸入文件名，Kind值選擇Less File,【肯定】，會自動提示是否將less加入watcher，點擊【Add watcher】
 
 
打開New Watcher配置界面，若是沒有提示，也能夠經過【文件(File)】-【設置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Less】打開New Watcher配置界面。 
 
3.此時，若是直接點擊【肯定】，則當咱們修改less文件時，會自動生成相應的css文件，固然咱們爲了讓其功能更強大，生成壓縮後的css和相應的map文件，就須要修改

Arguments和Output paths to refresh兩個參數（注意Program值是自動獲取的，每一個人電腦環境不一樣，路徑相似）。按照下面的表中值進行配置，完成相應的功能。 
修改前

參數名	參數值(下面no以前是兩個「-」)
Arguments	–no-color $FileName$
Output paths to refresh	$FileNameWithoutExtension$.css

修改後（不啓用css壓縮）

參數名	參數值(下面no和source以前是兩個「-」)
Arguments	–no-color $FileName$ $FileNameWithoutExtension$.css –source-map=$FileNameWithoutExtension$.css.map
Output paths to refresh	留空

修改後（啓用css壓縮，須要給less安裝插件less-plugin-clean-css，詳見《安裝Nodejs、npm、Less（支持生成壓縮後的css）》）

參數名	參數值(下面no、clean和source以前是兩個「-」)
Arguments	–no-color $FileName$ $FileNameWithoutExtension$.min.css –clean-css –source-map=$FileNameWithoutExtension$.min.css.map
Output paths to refresh	留空

修改後點擊【肯定】保存，回到less文件編輯界面，隨意輸入css代碼，當即會生成css和map文件。 
 
Arguments裏還可添加其餘參數實現更多的功能，點擊後面的【Insert maro…】能夠添加更多的宏值