一、引子

根据雅虎的网站优化准则,合并页面用到的图片,可以减少加载时发起的http请求数目,可以加速页面加载。具体能提速多少,本人没测试过,也就不好说了。

话说这排手上的项目里用到的图片都怎么合并,并不是不想合并,而是一个个图片去拼实在是太累了啊。另外桂总做的autosprite又还没成型,未能支持旧有项目;自己做的AutoSprites也是一个烂摊子——java写脚本功能的代码真不是一般的痛苦啊;至于炜哥的GoPng在线合图工具,说实话,这类需要人工定位图片的工具,我着实不喜欢。还是那句话,我可是个程序员呐,这种机械化无趣的工作就该交给电脑来完成,不然电脑是拿来干嘛的?

二、所谓智能

回到主题,智能合并CSS精灵图,何谓智能?对我来说是以下三点:

  1. 已有的项目基本不用修改即可使用该工具;
  2. 新项目还是能怎么爽怎么写,使用注释标注神马的一边去;
  3. 图片定位,css文件修改神马的都不用管。

嗯,综上所述,加上项目发布了,该优化性能了,今天花了一天把AutoSprites的烂摊子收拾了下,用NodeJs整了个iSpriter,有点出乎我的预料的快……是不是反证了java的开发效率慢?

三、特色功能

目前基本实现了原有项目不用修改的需求,css写法、图片定位、css文件修改都不用care,写好配置文件之后就可以一劳永逸。

所支持的css写法如下:

  1. 普通的css写法:

    ====>
  2. 文艺的css写法:

    ====>
  3. 二逼的css写法:

    ====>
  4. 二逼est的css写法:

    ====>

四、实现原理

该脚本使用了使用nodejs实现,依赖 CSSOMnode-canvas 两个模块,排列图片的算法选用了 bin-packing 算法,后续支持选择其他算法。具体实现代码就不展示了,请移步到github(https://github.com/iazrael/ispriter)查看。这里看下主要的执行步骤,代码写的比较块,方法名都是随便想了个差不多意思的,反正能运行就行了,对不对?哈哈^_^

省略了些无关紧要的abc,主要步骤就是上面的8步了(天龙八部~~哈哈)。

五、使用方法

  1. 把源代码拷下来(需要先安装CSSOMnode-canvas):
  2. 拷贝src下面的内容到项目目录,最好能改个名字如:spriter;
  3. 把spriter下的config.example.json拷贝出来,改成config.json,并修改里面的配置;
  4. 在项目目录运行:
  5. 嗯,可以执行后续的编译脚本了,就这么简单~

可能这里改的比较多一点的就是config.json了,其实里面也没几个参数:

如何?基本不用怎么改吧,啦啦啦~

六、不足与后续优化

总的来说,基本上没什么大问题,只是nodejs的环境在windows下比较难搞,主要就是node-canvas的安装。cssom是纯js实现的,因此可以放到项目目录;node-canvas就得想想办法了。或许搞个Web在线版的法子不错。

另外参数的配置可能还不够灵活,主要是自己用,没相应的需求难免有遗漏。还有参数名字也得斟酌下,免得歧义。

哦,漏了几点:

  1. 图片大小是自增的,不支持设置;
  2. 不支持使用了background-repeat:repeat-x or repeat-y的图片分类合并;
  3. 这个年代还有下载源代码来执行这么二逼的事,要想法子打个包一步就位;

这么一写,貌似还缺点还不少,呃,汗- -||。不过在够用的基础上,后面有时间在优化啦~~

欢迎踊跃提bug~~

—————- 2012-6-17 update ————————

已经把所有依赖都打包到项目中,并已发到npm(http://search.npmjs.org/#/ispriter

可以直接用下面的命令安装啦。

使用方法:

BTW:isptriter已经更新啦,请转向这里继续了解:【更新】iSpriter – 智能合并CSS精灵图

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/06/nodejs-smart-merging-css-wizard-tool-intelligentspriter/

  1. Pingback: 【更新】iSpriter – 智能合并CSS精灵图 | Tencent AlloyTeam

  2. 有些重构喜欢一个class写背景图,另一个class写坐标,2个class在一张样式表里没明显的联系,这样识别不了。
    建议可以在运行时去检测,即基于浏览器脚本。