【更新】iSpriter – 智能合并CSS精灵图

号外号外,iSpriter更新啦!

什么?你不知道iSpriter是什么?那你太out啦,必须先看看这个文章了。简单的一句话介绍:基于NodeJs的开源CSS精灵图合并工具,不用改变原有的 css 编写方式,就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github(https://github.com/iazrael/ispriter),欢迎各位同学来一起完善。

由于最初写的时候不怎么注意代码自量,写得比较搓。在应用在几个项目之后,修复了一些 bug,发现再加新功能比较困难。最近终于下决心重构了下,并在重构的基础上增加了一些新特性。

目前 iSpriter 的特性有:

  1. 智能提取background的url和position等信息
  2. 智能判断使用了background-position(暂时只支持使用px为单位)定位的图片并重新定位
  3. 兼容已经合并了的图片, 并重新定位
  4. 多个css文件合并时,排除并重用已经合并的图片
  5. 智能设置被合并图片的宽高
  6. 支持设定合并后图片的最大大小【新】
  7. 支持设置合并后的图片间距【新】
  8. 跳过background-position是right、center、bottom的图片【新】
  9. 跳过显式的设置平铺方式为repreat的图片【新】
  10. 跳过设置了background-size的图片【新】
  11. 提供将所有图片合并成一张(同时指定maxSize可自动切分),并将所有css文件合并为一个文件的功能【新】(2013/9/10)

最新版本支持限制合并后的图片大小啦。比如限制合并后的图片最大60KB,则可以把原本合并成一张100KB的图拆成两张。这样老大检查的时候就不会抓住你问:嗯?为什么这张图超过了60KB了?检讨检讨!……哈哈,所以这绝对是个延年益寿的新功能 ^_^。

使用方法

在命令行输入以下命令即可安装 /  更新:

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即可。^_^

22 条评论
  1. leeluolee 回复

    pngjs 确实 解决了大问题

  2. jc 回复

    另外能否增加一个选项, 让所有被合并的图标 水平或 垂直排列

    • iAzrael 回复

      这个设计到合并算法的调整, packing算法算出来的宽高其实是最优的, 如果要水平或者垂直排列的话, 算法是很简单, 但是太长或太宽的图片在浏览器解码的时候消耗很多的内存, 个人觉得不值得.
      其他算法的支持后续会支持的, 但是目前还没计划

      • jc 回复

        首先感谢耐心回复.
        1.另外经过测试发现, 设置margin后,合并4个图标生成的精灵图, 在最右和最下多出来一部分margin是无用的.
        2.既然是多行多列的精灵图, 能否设置水平margin, 和垂直margin.

        • iAzrael 回复

          分开设置margin是可以实现的, margin的优化我记录下了, 谢谢你的建议.
          另外如果有什么新的建议, 可以在github上提个issue https://github.com/iazrael/ispriter/issues
          因为github有邮件通知, 博客这里我不是太常关注
          如果可以, 你也可以来贡献下代码, 呵呵

  3. jc 回复

    在生产的css文件里多余很多 no-repeat,
    代码:
    .f1 {background: -47px -47px no-repeat;}
    .f2 {background: -47px 0 no-repeat;}
    .f3 {background: 0 -47px no-repeat;}
    .f4 {background: 0 0 no-repeat;}

    • iAzrael 回复

      默认添加 no-repeat, 当时是考虑到如果有些没有写上with和height, ispriter是可以用图片宽高作为样式的宽高进行处理的.
      不过考虑到大部分都是指定了宽高的, no-repeat 这个值可以不加, 我下个版本把它去掉, 谢谢你的建议

发表评论

请输入您的名字,邮箱帐号和评论,您的邮箱帐号会被保密,不会公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>