在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…】能够添加更多的宏值