号外号外，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的图片【新】
- 提供将所有图片合并成一张（同时指定maxSize可自动切分），并将所有css文件合并为一个文件的功能【新】（2013/9/10）
最新版本支持限制合并后的图片大小啦。比如限制合并后的图片最大60KB，则可以把原本合并成一张100KB的图拆成两张。这样老大检查的时候就不会抓住你问：嗯？为什么这张图超过了60KB了？检讨检讨！……哈哈，所以这绝对是个延年益寿的新功能 ^_^。
more
使用方法
在命令行输入以下命令即可安装 / 更新：
npm install ispriter配置文件也进行了更新，参数更加清晰了：
{
"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 输出的图片格式
"combine": false//optional 为true时将所有图片合并为一张, 同时所有css文件合并为一个文件
}
}
大部分参数都可以省略，最简单的配置只有两项：
{
"input": "./../test/css/", // input cssRoot
"output": "./../test/sprite_output/css/" // output cssRoot
}
【重要】新的配置参数跟旧有的不兼容，需要进行修改。不过 config.example.json 的注释已经很清晰了，就不再细说了。
之后的调用方式就跟以前一样了，可以新建 NodeJs 文件调用：
var spriter = require('ispriter');
var configFile = '../src/config.example.json';
spriter.merge(configFile);
或者集成到你的编译脚本，一句命令行调用搞定：
node -e "require('ispriter').merge('../src/config.example.json')"运行环境搭建
由于 iSpriter 使用了 node-canvas，而 node-canvas 依赖了 Cairo 图形库，对初学者来说，安装 Cairo 和 node-canvas是挺痛苦的。
不过人生就是贵在折腾啦，经亲身体验，在三大平台都能正确的安装上并使用 canvas 了。另外，node-canvas 的wiki也给出了安装方法，详见这里。
其中：ubuntu / os x 的安装是简单的不能再简单的了，完全可以写个 shell 自动安装啊有木有；windows 的安装步骤有点多，但也是能装上并跑起来的（有些机器编译 canvas 还是出错，原因不明）。
安装好 canvas ，其他问题都不在话下了，尽情的使用 iSpriter 提高你的工作效率吧～～
---------------- 2013-8-15 update ------------------------
感谢 node-pngjs 的作者，现在ispriter把node-canvas替换成了跟平台无关的node-pngjs，再也不用费劲心机的安装node-canvas啦！
鼓掌，哗啦啦O(∩_∩)O哈哈~
---------------- 2013-9-10 update ------------------------
新功能！提供了将所有图片合并为一张，同时所有css文件合并为一个文件的选项，只要在配置中把combine设置为true即可。^_^
本想安装试一试 ，看了下，貌似要装不少东西 ，有点小复杂
@mxria 你现在可以使用不依赖node-canvas的ispriter了, npm install ispriter即可
效果看起来很好
npm install ispriter 之前要先npm install pngjs 好东西啊.绝对赞!<br>要是能有个node - webkit 桌面版的就完美了配置文件直接点选几个就好了 点下就不需要在cmd里输入东西直接完成 多美好的事情.
还有CSSOM的模块.问下有没有可能合并后的图片链接地址用定位的类似于.a,.b,.c{background: url(./img/sprite_main_1.png) }<br>然后.a里只需要写定位信息就好了 .<br>现在的做法每个地方都写全地址感觉不太简洁.
@huugle 嗯, 这个GUI版我考虑下,不知道有没有时间弄呢,要不你可以来贡献贡献代码,哈哈
@huugle 这个功能下个版本会加上
按文档提示运行了，提示了ALL done：time use 23ms。<br>但是文件没有任何反应啊！！
output.cssDist 是否不支持指定文件名,<br> 比如 : 'cssDist':'./style/exam_out.css',
在生产的css文件里多余很多 no-repeat, <br>代码:<br>.f1 {background: -47px -47px no-repeat;}<br>.f2 {background: -47px 0 no-repeat;}<br>.f3 {background: 0 -47px no-repeat;}<br>.f4 {background: 0 0 no-repeat;}
另外能否增加一个选项, 让所有被合并的图标 水平或 垂直排列
@jc 这个设计到合并算法的调整, packing算法算出来的宽高其实是最优的, 如果要水平或者垂直排列的话, 算法是很简单, 但是太长或太宽的图片在浏览器解码的时候消耗很多的内存, 个人觉得不值得. <br>其他算法的支持后续会支持的, 但是目前还没计划
@jc 默认添加 no-repeat, 当时是考虑到如果有些没有写上with和height, ispriter是可以用图片宽高作为样式的宽高进行处理的.<br>不过考虑到大部分都是指定了宽高的, no-repeat 这个值可以不加, 我下个版本把它去掉, 谢谢你的建议
@jc output.cssDist 不支持指定文件名, 只能填写目录, 文件名由ispriter自动生成.<br>这么设计是考虑到, input是可以输入一批css文件的, 所以也会输出一堆css结果.<br>不过如果指定了 combine: true, output.cssDist 支持文件名也是可以的, 就看有没有这个必要
@change 你好, 能不能发一下你的config.json是怎么写的, 以及对应的项目目录结构? <br>如果方便的话, 可以邮件联系 atlas[at]<a href='http://imatlas.com' rel='nofollow noopener'>imatlas.com</a>
@iAzrael 首先感谢耐心回复. <br>1.另外经过测试发现, 设置margin后,合并4个图标生成的精灵图, 在最右和最下多出来一部分margin是无用的.<br>2.既然是多行多列的精灵图, 能否设置水平margin, 和垂直margin.
@jc 分开设置margin是可以实现的, margin的优化我记录下了, 谢谢你的建议.<br>另外如果有什么新的建议, 可以在github上提个issue <a href='https://github.com/iazrael/ispriter/issues' rel='nofollow noopener'>https://github.com/iazrael/...</a><br>因为github有邮件通知, 博客这里我不是太常关注<br>如果可以, 你也可以来贡献下代码, 呵呵
pngjs 确实 解决了大问题