号外号外,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了?检讨检讨!……哈哈,所以这绝对是个延年益寿的新功能 ^_^。

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

Comments
Write a Comment
  • mxria reply

    本想安装试一试 ,看了下,貌似要装不少东西 ,有点小复杂

  • iAzrael reply

    @mxria 你现在可以使用不依赖node-canvas的ispriter了, npm install ispriter即可

  • 浏览器排行 reply

    效果看起来很好

  • huugle reply

    npm install ispriter 之前要先npm install pngjs 好东西啊.绝对赞!<br>要是能有个node - webkit 桌面版的就完美了配置文件直接点选几个就好了 点下就不需要在cmd里输入东西直接完成 多美好的事情.

  • huugle reply

    还有CSSOM的模块.问下有没有可能合并后的图片链接地址用定位的类似于.a,.b,.c{background: url(./img/sprite_main_1.png) }<br>然后.a里只需要写定位信息就好了 .<br>现在的做法每个地方都写全地址感觉不太简洁.

  • iAzrael reply

    @huugle 嗯, 这个GUI版我考虑下,不知道有没有时间弄呢,要不你可以来贡献贡献代码,哈哈

  • iAzrael reply

    @huugle 这个功能下个版本会加上

  • change reply

    按文档提示运行了,提示了ALL done:time use 23ms。<br>但是文件没有任何反应啊!!

  • jc reply

    output.cssDist 是否不支持指定文件名,<br> 比如 : 'cssDist':'./style/exam_out.css',

  • jc reply

    在生产的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 reply

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

  • iAzrael reply

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

  • iAzrael reply

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

  • iAzrael reply

    @jc output.cssDist 不支持指定文件名, 只能填写目录, 文件名由ispriter自动生成.<br>这么设计是考虑到, input是可以输入一批css文件的, 所以也会输出一堆css结果.<br>不过如果指定了 combine: true, output.cssDist 支持文件名也是可以的, 就看有没有这个必要

  • iAzrael reply

    @change 你好, 能不能发一下你的config.json是怎么写的, 以及对应的项目目录结构? <br>如果方便的话, 可以邮件联系 atlas[at]<a href='http://imatlas.com' rel='nofollow noopener'>imatlas.com</a>

  • jc reply

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

  • iAzrael reply

    @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>如果可以, 你也可以来贡献下代码, 呵呵

  • leeluolee reply

    pngjs 确实 解决了大问题

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟