号外号外,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('ispriter'); var configFile = '../src/config.example.json'; spriter.merge(configFile); |
或者集成到你的编译脚本,一句命令行调用搞定:
1 |
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 哈哈~
清新女前端男按这里,前端编码规范之CSS-舒哒宁的2B铅笔 2016 年 10 月 14 日
[…] 推荐文章:NodeJs 智能合并 CSS 精灵图工具 iSpriter […]
前端CSS规范(二) | 风流三月1 2015 年 9 月 7 日
[…] 推荐文章:NodeJs 智能合并 CSS 精灵图工具 iSpriter […]
前端编码规范之CSS | 小样儿(ShowYounger) 2014 年 5 月 23 日
[…] 推荐文章:NodeJs 智能合并 CSS 精灵图工具 iSpriter […]
Wonder_FUN 2014 年 5 月 5 日
该工具能对伪类属性的 css 操作吗
NodeJs智能合并CSS精灵图工具iSpriter | 腾讯Web前端 AlloyTeam 团队 Blog | 愿景: 成为业界卓越的Web团队! 2014 年 2 月 11 日
[…] BTW:isptriter 已经更新啦,请转向这里继续了解:【更新】iSpriter – 智能合并 CSS 精灵图。 […]
NodeJs智能合并CSS精灵图工具iSpriter « Web攻城狮–努力做好前端的小三 2014 年 1 月 22 日
[…] 参考:http://www.alloyteam.com/2012/09/update-ispriter-smart-merging-css-sprite/https://github.com/iazrael/ispriter/ […]
网站设计之CSS精灵图 | multiprocess 2013 年 11 月 10 日
[…] 4.TX Web 前端 Alloy 团队基于 Node.js 开发的 iSpriter —— 智能合并 CSS 精灵图,可能是因为没用过 NodeJS,部署看起来挺麻烦的。地址:http://www.alloyteam.com/2012/09/update-ispriter-smart-merging-css-sprite/ […]
刘德华 2013 年 7 月 30 日
这里的 canvas 到底是什么啊? 画图型的软件吗? html5 的标签吗? 救解答啊。。。
AlloyTeam 2013 年 8 月 30 日
这里的 canvas 是指 node-canvas, node 下面的图形库, 新版的 ispriter 已经把 canvas 移除了, 换了轻量的图形库, 现在不用安装 node-canvas 了
huugle 2012 年 11 月 27 日
希望能整理个 canvas 的安装过程。。。相当复杂。。。
AlloyTeam 2013 年 8 月 30 日
请用下新版的, 已经把 canvas 移除了, 换了轻量的图形库
遥遥 2012 年 11 月 15 日
是不是还要单独装一下 node-canvas 才能运行
AlloyTeam 2013 年 8 月 30 日
新版的 ispriter 已经把 canvas 移除了, 换了轻量的图形库, 现在不用安装 node-canvas 了
alex 2012 年 11 月 5 日
node.js:201
throw e; // process.nextTick error, or ‘error’ event on first tick
^
Error: Cannot find module ‘../build/default/canvas’
at Function._resolveFilename (module.js:332:11)
at Function._load (module.js:279:25)
at Module.require (module.js:354:17)
at require (module.js:370:17)
at Object. (/home/jackie/node_modules/canvas/lib/bindings.js:7:20)
at Module._compile (module.js:441:26)
at Object..js (module.js:459:10)
at Module.load (module.js:348:32)
at Function._load (module.js:308:12)
at Module.require (module.js:354:17)
遇到这样的错误,不知道怎么解决,我猜是缺少这个文件夹,因为里面确实没有(../build/default/canvas)
AlloyTeam 2013 年 8 月 30 日
这是安装 node-canvas 失败了, 新版的 ispriter 已经把 canvas 移除了, 换了轻量的图形库, 现在不用安装 node-canvas 了
遥遥 2012 年 10 月 29 日
有没有针对图片进行压缩?
azrael 2012 年 10 月 30 日
合并之后, 会去掉图片的多余信息, 跟那些压缩 png 的工具的效果差不多了
独孤逸辰 2012 年 10 月 24 日
http://cairographics.org/打不开啊
shayne 2012 年 10 月 8 日
如果能把 js,css 的压缩和 auto sprite 整合在一起就更完美了
azrael 2012 年 10 月 14 日
嗯, 加上也 ok, 但是可能每个人喜欢用的压缩工具都不同, 比较难统一, 所以这里只实现合并图片的功能, 如果要压缩图片, 可以在合并完成之后调用 google compiler 或者 yui 的, 根据个人喜好就行了
frank 2012 年 9 月 30 日
唉,安装 canvas 失败……
azrael 2012 年 9 月 30 日
window 吗,要把它给出的东西都装上才行
元彦 2012 年 9 月 30 日
顶小龙,消灭零回复