NodeJs智能合并CSS精灵图工具iSpriter | Tencent AlloyTea...

一、引子

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

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

二、所谓智能

回到主题，智能合并CSS精灵图，何谓智能？对我来说是以下三点：

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

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

三、特色功能

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

所支持的css写法如下：

1. 普通的css写法：

   双击选中源代码

   1 2 3

   div{     background: url(../images/tips_icons.png) ; }

   ====>

   双击选中源代码

   1 2 3

   div{     background: url(../images/sprite_1.png) -48px -48px; }

2. 文艺的css写法：

   双击选中源代码

   1 2 3

   div{     background: url(../images/tips_icons.png) -42px 0; }

   ====>

   双击选中源代码

   1 2 3

   div{    background: url(../images/sprite_1.png) -48px -48px; }

3. 二逼的css写法：

   双击选中源代码

   1 2 3 4

   div{    background-image: url(../images/tips_icons.png);    background-position: -42px 0; }

   ====>

   双击选中源代码

   1 2 3

   div{    background: url(../images/sprite_1.png) -48px -48px; }

4. 二逼est的css写法：

   双击选中源代码

   1 2 3 4 5 6 7 8

   div{     background-image: url(../images/tips_icons.png);     background-color: #fff;     background-position: 0 -40px;     background-repeat: no-repeat;     background-origin: border-box;     background-clip: content-box; }

   ====>

   双击选中源代码

   1 2 3

   div{     background: #fff url(../images/sprite_1.png) -48px -48px no-repeat border-box content-box; }

四、实现原理

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

双击选中源代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

var main = function(){     var //...     configFile = process.argv[2];     //1.读取配置文件     config = readConfig(configFile);     //2.读取所有css文件， readFiles方法已经把不合规定的文件过滤了     cssFileNameList = readFiles(config.cssRoot);     //...     for(var i = 0, fileName; fileName = cssFileNameList[i]; i++) {         cssContent = readFile(config.cssRoot + fileName);         //3.用cssom.parse把cssText转换成js对象         styleSheet = parseCssToStyleSheet(cssContent);         //4.把需要合并的图片url和cssRule收集起来         imageList = collectCSSRulesAndImages(styleSheet);         //...         //5.读取图片文件以及其大小         readImages(imageList);         //6.使用bin-packing算法计算图片的位置         positionResult = positionImages(imageList);         //...         //7.输出合并后的图片 sprite，并修改cssRule的background属性         drawImageAndPositionBackground(config.cssOutput, spriteName, canvasWidth, canvasHeight, imageList);         //...         //8.到最后了，输出修改后的css文件         writeFile(newFileName, styleSheet);     }; }

省略了些无关紧要的abc，主要步骤就是上面的8步了（天龙八部～～哈哈）。

五、使用方法

1. 把源代码拷下来（需要先安装CSSOM和node-canvas）：

   双击选中源代码

   1	git clone <A onclick="javascript:pageTracker._trackPageview('/outgoing/github.com/iazrael/ispriter.git');" href="https://github.com/iazrael/ispriter.git">https://github.com/iazrael/ispriter.git</A>

2. 拷贝src下面的内容到项目目录，最好能改个名字如：spriter；
3. 把spriter下的config.example.json拷贝出来，改成config.json，并修改里面的配置；
4. 在项目目录运行：

   双击选中源代码

   1	node ./spriter/spriter.js config.json

5. 嗯，可以执行后续的编译脚本了，就这么简单～

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

双击选中源代码

1 2 3 4 5 6 7 8 9

{     "cssRoot": "./../test/css/",//需要合并图片的css所在目录     "format": "png",//要合并的图片格式，可以这样写："png,jpg"     "algorithm": "growingpacker",//图片排列算法，目前只有这个一个...     "cssOutput": "./../test/output/css/",//css文件的输出目录     "imageOutput": "../images/",//图片的输出目录，相对于cssOutput     "outputPrefix": "sprite_",//合并后图片的名字前缀，其余字段用自增方式     "outputFormat": "png"//合并后的图片格式 }

如何？基本不用怎么改吧，啦啦啦～

六、不足与后续优化

总的来说，基本上没什么大问题，只是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./#/ispriter）

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

双击选中源代码

1	npm install ispriter

使用方法：

双击选中源代码

1 2	var spriter=require('ispriter'); spriter.merge(configFileName);