结合YUI Compressor在WebStrom添加Watcher实现编辑js文件时自动压缩(包括自定义监听范围Scope)
来源:互联网 发布:ipowerl软件下载 编辑:程序博客网 时间:2024/06/11 02:22
前言
之前的文章已经介绍了在WebStrom添加Watcher处理Less和Scss文件,可见Webstorm这方面功能还是很强大的。这篇文章将介绍如何结合YUI Compressor添加Watcher自动压缩js文件。
开始动手
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配置界面,先进行简单的修改实现基本功能,按照下图框中的参数值进行配置。配置完成后点击【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文件,则说明配置成功。
- 结合YUI Compressor在WebStrom添加Watcher实现编辑js文件时自动压缩(包括自定义监听范围Scope)
- 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
- WebStorm使用之.JS文件自动压缩YUI Compressor配置
- phpstorm 结合 YUI Compressor 实现自动压缩文件
- js压缩 --- YUI Compressor
- Yahoo.Yui.Compressor 压缩js文件
- 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
- YUI compressor js,css压缩
- 使用YUI Compressor压缩JS和CSS文件
- 在WebStorm里配置watcher实现编辑less文件时自动生成.css文件
- 使用YUI Compressor压缩CSS/JS
- 使用YUI Compressor压缩CSS/JS
- 使用YUI Compressor压缩CSS/JS
- 使用YUI Compressor 压缩js和css
- 使用YUI Compressor压缩CSS/JS
- Js Css 文件压缩工具YUI Compressor
- 使用YUI Compressor for .Net自动压缩JavaScript和CSS文件
- 自制批处理使用Yui Compressor压缩并打包js或css文件
- 洛谷 1029——最大公约数和最小公倍数问题(简单的数学问题)
- 了解软考中《系统架构设计师》相关的信息
- (模拟信号/数字信号)分别以(模拟信号/数字信号)中传输方式
- 【Unity】【翻译搬运】使用WheelColliders做出稳定真实的车
- P1868 饥饿的奶牛
- 结合YUI Compressor在WebStrom添加Watcher实现编辑js文件时自动压缩(包括自定义监听范围Scope)
- 自定义控件之滑动解锁、圆中嵌字
- Java编程:组合、继承和代理的区别
- 架构师米洛:不懂技术的人不要对懂技术的人说这很容易实现
- 纸牌博弈(DP)
- BZOJ 2733 线段树的合并 并查集
- javascript重点-数据类型
- 您的时钟快了
- 139. Word Break -Medium