结合YUI Compressor在WebStrom添加Watcher实现编辑js（css）文件时自动压缩（包括自定义监听范围Scope）

前言

之前的文章已经介绍了在WebStrom添加Watcher处理Less和Scss文件，可见Webstorm这方面功能还是很强大的。这篇文章将介绍如何结合YUI Compressor添加Watcher自动压缩js文件（同样适用于css）。

开始动手

1、安装JDK，这项工作太基础了，这里就不赘述了，安装成功后，在命令行（cmd）里可以查看版本信息。

2、下载yuicompressor-2.4.8.jar（链接：http://pan.baidu.com/s/1nvi8WDr 密码：cmw9）
放到d盘根目录，即路径为d:\yuicompressor-2.4.8.jar，先用简单的命令测试好使不。

//源test.js文件，在d盘根据目录
function say(){
    alert('hello world!');
}

下面是命令（经笔者测试，-o 后的文件路径不能是带有盘符的绝对路径，只能是相对路径，相对于当前目录的，下面命令的d:就是定位到d盘根目录为当前目录）

d:
java -jar "D:\yuicompressor-2.4.8.jar" "test.js" -o "test.min.js"

如果java环境和jar都没问题，则在d盘根目录下会生成一个test.min.js压缩后的文件。

//压缩后的test.min.js文件，在d盘根据目录
function say(){alert("hello world!")};

3、打开Webstorm，新建工程，工程新建两个文件夹，src(源文件)和dist(存放压缩后的文件)，将test.js放到src里，或者新建一个js文件，随便写点代码。

4、添加watcher，【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【YUI Compressor JS】打开New Watcher配置界面(css文件选【YUI Compressor CSS】)，先进行简单的修改实现基本功能，按照下图框中的参数值进行配置。配置完成后点击【OK】-【OK】回到test.js的编辑界面。

在test.js里添加新的fucntion，Ctrl+s 保存。在dist文件上右键-【同步(Synchronize)’dist’】,dist文件夹里出现了test.min.js文件，但同时问题也出现了，刚才配置的是监听所有Project Files，因此将test.min.js继续压缩生成了test.min.min.js。如下图（笔者在配置过程甚至出现了死循环，新建出几十个min.js，当时迅速关掉了Watcher,【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】,取消勾选，【OK】保存）。

5、设置监听的范围。上一步设置Watcher时Scope值选择为“Project Files”，监听工程下所有文件，可以改成“Open Files”,即只监听当前打开文件。通过下面的设置，可以只监听某个文件或者某个文件夹，比如“src”文件夹，也可定义排除监听的规则。【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【Edit】,打开Edit Watcher界面。

点击Scope后的【…】-【+】，选择【Local】，在弹出的界面输入一个Scope容易理解的名称，比如“exclude.min.js”,点击【OK】

输入Pattern的值:!file:*.min.js
即 不监听以min.js结尾的文件。
也可以设置监听某具文件夹或者文件，在树形列表里，选择“src”文件夹，点击【Include】,点击【OK】保存，就会监听src下所有的js文件，如果选择具体文件，则监听某个文件。
点击【Exclude】则可以排除一些项。
点击【OK】-【OK】-【OK】回到test.js编辑界面，删除”dist”文件夹下所有文件，再次修改test.js，Ctrl+s后，同步dist,发现里面只生成了一个js文件，则说明配置成功。