号外号外，iSpriter 更新啦！
什么？你不知道 iSpriter 是什么？那你太 out 啦，必须先看看这个文章了。简单的一句话介绍：基于 NodeJs 的开源 CSS 精灵图合并工具，不用改变原有的 css 编写方式，就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github（https://github.com/iazrael/ispriter），欢迎各位同学来一起完善。
由于最初写的时候不怎么注意代码自量，写得比较搓。在应用在几个项目之后，修复了一些 bug，发现再加新功能比较困难。最近终于下决心重构了下，并在重构的基础上增加了一些新特性。
目前 iSpriter 的特性有：
- 智能提取 background 的 url 和 position 等信息
- 智能判断使用了 background-position（暂时只支持使用 px 为单位）定位的图片并重新定位
- 兼容已经合并了的图片, 并重新定位
- 多个 css 文件合并时，排除并重用已经合并的图片
- 智能设置被合并图片的宽高
- 支持设定合并后图片的最大大小【新】
- 支持设置合并后的图片间距【新】
- 跳过 background-position 是 right、center、bottom 的图片【新】
- 跳过显式的设置平铺方式为 repreat 的图片【新】
- 跳过设置了 background-size 的图片【新】
最新版本支持限制合并后的图片大小啦。比如限制合并后的图片最大 60KB，则可以把原本合并成一张 100KB 的图拆成两张。这样老大检查的时候就不会抓住你问：嗯？为什么这张图超过了 60KB 了？检讨检讨！……哈哈，所以这绝对是个延年益寿的新功能 ^_^。
使用方法
在命令行输入以下命令即可安装 / 更新：
|
1 |
npm install ispriter |
配置文件也进行了更新，参数更加清晰了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "algorithm": "growingpacker",//optional 目前只有 growingpacker "input": { "cssRoot": "./../test/css/", //required "imageRoot": "",//optional 默认 cssRoot "format": "png"//optional }, "output": { "cssRoot": "./../test/sprite_output/css/",//required "imageRoot": "../images/",//optional 相对于 cssRoot 的路径, 默认 "./image/", 最终会变成合并后的的图片路径写在css文件中 "maxSize": 60,//optional 图片容量的最大大小, 单位 KB, 默认 0 "margin": 5,//optional 合成之后, 图片间的空隙, 默认 0 "prefix": "sprite_",//optional "format": "png"//optional 输出的图片格式 } } |
大部分参数都可以省略，最简单的配置只有两项：
|
1 2 3 4 |
{ "input": "./../test/css/", // input cssRoot "output": "./../test/sprite_output/css/" // output cssRoot } |
【重要】新的配置参数跟旧有的不兼容，需要进行修改。不过 config.example.json 的注释已经很清晰了，就不再细说了。
之后的调用方式就跟以前一样了，可以新建 NodeJs 文件调用：
|
1 2 3 |
var spriter = require( |