在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

缺乏、安全感 2021-09-11 06:36 335阅读 0赞

# 前言 #

WebStorm是一款非常优秀的Web前端IDE工具，本文主要介绍，如何在其Watcher中进行配置，实现编辑less文件时自动生成.map和压缩后的.css文件。笔者WebStorm版本为2016.1.1。

# 开始动手 #

1.操作前确定成功安装less，检测方法，在命令行（cmd）,输入lessc -v，看到如下类似内容，则说明安装过了。  
![这里写图片描述][SouthEast]  
如果需要生成压缩后的css的文件，则需要通过以下命令安装插件，详见[《安装Nodejs、npm、Less（支持生成压缩后的css）》][Nodejs_npm_Less_css]

npm install less-plugin-clean-css

2.打开WebStrom，随便新建一个工程，在工程名上右键，【新建】-【Stylesheet】,输入文件名，Kind值选择Less File,【确定】，会自动提示是否将less加入watcher，点击【Add watcher】,  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
打开New Watcher配置界面，如果没有提示，也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Less】打开New Watcher配置界面。  
![这里写图片描述][SouthEast 3]  
3.此时，如果直接点击【确定】，则当我们修改less文件时，会自动生成相应的css文件，当然我们为了让其功能更强大，生成压缩后的css和相应的map文件，就需要修改Arguments和Output paths to refresh两个参数（注意Program值是自动获取的，每个人电脑环境不同，路径类似）。按照下面的表中值进行配置，完成相应的功能。  
**修改前**

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数值(下面no之前是两个“-”)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Arguments</td> 
   <td>–no-color $FileName$</td> 
  </tr> 
  <tr> 
   <td>Output paths to refresh</td> 
   <td>$FileNameWithoutExtension$.css</td> 
  </tr> 
 </tbody> 
</table>

**修改后（不启用css压缩）**

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数值(下面no和source之前是两个“-”)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Arguments</td> 
   <td>–no-color $FileName$ $FileNameWithoutExtension$.css –source-map=$FileNameWithoutExtension$.css.map</td> 
  </tr> 
  <tr> 
   <td>Output paths to refresh</td> 
   <td>留空</td> 
  </tr> 
 </tbody> 
</table>

**修改后（启用css压缩，需要给less安装插件less-plugin-clean-css，详见[《安装Nodejs、npm、Less（支持生成压缩后的css）》][Nodejs_npm_Less_css]）**

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>参数值(下面no、clean和source之前是两个“-”)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Arguments</td> 
   <td>–no-color $FileName$ $FileNameWithoutExtension$.min.css –clean-css –source-map=$FileNameWithoutExtension$.min.css.map</td> 
  </tr> 
  <tr> 
   <td>Output paths to refresh</td> 
   <td>留空</td> 
  </tr> 
 </tbody> 
</table>

修改后点击【确定】保存，回到less文件编辑界面，随意输入css代码，立即会生成css和map文件。  
![这里写图片描述][SouthEast 4]  
Arguments里还可添加其他参数实现更多的功能，点击后面的【Insert maro…】可以添加更多的宏值。

[SouthEast]: /images/20210809/83f0658a6f9f44cdbbcee5d79f5998cb.png
[Nodejs_npm_Less_css]: http://blog.csdn.net/lhtzbj12/article/details/54882499
[SouthEast 1]: /images/20210809/e945b9053ecf470784259da5c1487042.png
[SouthEast 2]: /images/20210809/5a4ce6f96a3542058ae4cfb6534c7265.png
[SouthEast 3]: /images/20210809/7d5c26718c7b4573aef619fca12529a0.png
[SouthEast 4]: /images/20210809/afbe3d837af14bb3af256ddc1cfd9963.png