前端压缩工具Yabo——鸭脖

嗯,介绍一下大猫老湿最近的作品——鸭脖(Yabo)

鸭脖主要用于自动合并压缩样式文件并自动为外部资源如图片等添加时间戳——时间戳是把双刃剑,设定文件的客户端缓存但不小心也会让客户端页面乱掉~~

主要功能:

  • 无需单独的合并列表文件,直接读取 CSS 里的 @import 文件合并
  • 合并后自动调用 YUI Compressor 进行压缩,filename.source.css 进去 出来 filename.css || filename.css 进去 出来 filename.min.css
  • 给图片加时间戳, 包含关键词 Yabo_img_timestamp_off 来关闭此功能
  • 给文件结尾加时间戳

安装

  1. 下载 Yabo
  2. 编辑器里配置外部工具,这里用 Intellij IDEA 举例,当然同样适用于 PHPStorm 和其他支持传参的编辑器

例如 Settings > External Tools

"Program":"wscript", "Parameters":"E:\Dropbox\Code\Yabo\JScript\Yabo.js $FilePath$", "Working directory":"$FileDir$"

要改的就是 Yabo.js 的路径,

$FilePath$ $FileDir$ 都是编辑器自动生成

对应 E:\source\source.css E:\source

使用

在需要压缩的 CSS 文件内右键选择 Yabo.js

就会在同目录下生成当前文件.min.css

运行环境

目前是 JScript 写的,只能运行在 windows 下

JAR版

JAR 需要 JAVA 环境支持,请确保已经安装好JDK,在命令行中可以正常运行 java -version

参数说明:

  • -h –help 显示帮助
  • -f –file CSS文件,允许绝对路径或JAR包的相对路径。压缩后以 文件名.min.css 保存

在命令行中运行,例:

java -jar yabo-1.0.jar style.css  

IDEA中的配置

"Program":"$JDKPath$\bin\java.exe", "Parameters":"-jar yabo-1.0.jar -f $FilePath$", "Working directory":"E:\dropbox\code\Yabo\javabuild"

目前 jar 版与 JScript 在细节处理上还有一些差别,以后会保持一致。

具体我不多说了,不懂的可以查看图文教程演示