起因

在最近的一次项目中，使用Ember作为前端框架的构建。在实际使用过程中，往往需要雪碧图的支持，作为技术选型，考虑了几种：

• Compass

  因为之前项目中就有引入SASS模块作为css的预处理器，第一个想法就是引入compass进行作为雪碧图的支持，并且还可以拓展SASS的模块，但是考虑到目前项目的依赖已经比较大了，NodeJS各个模块加起来也都上百M了。而且引入Compass需要对应的去安装及设置Ruby环境。
  因为项目组内目前操作系统有Window和Linux，需要考虑到window的同志们对于Ruby环境的安装问题，并且在安装后还需要对应的了解Gem等，依赖太过于复杂。

• sprity

  某日瞎找，正好找到Nodejs下也有对象的雪碧图生成工具，没错，就是上面的sprity.
  功能正好符合项目的预期，只需要在规划的路径内，对应的放置图片源文件，即可自动的生成雪碧图，和对应的CSS样式表。特别的，sprity还可以根据需要，做特定DPI的雪碧图，这在移动开发下，应该挺有用的。具体请查看官网

sprity在window下兼容问题解决

sprity千好万好，但是在window下安装也是个蛋疼的问题。以下是window下兼容问题的处理。sprity所使用的图片引擎有以下几种

• sprity-lwip

• sprity-canvas

• sprity-gm

  在window下sprity-lwip死活安装不成功，只得查找其他的替代方案

  sprity-canvas在window下安装需要gpy,python,visual studio的支持，依赖情况更严重了，果断放弃。

  sprity-gm 这个是目前找到的在window下比较容易使用的一种方案

  sprity-gm依赖于GraphicsMagick或ImageMagick.

  GraphicsMagick这个比较难安装，略过。
  ImageMagick 这个是sprity-gm所使用的一个图像引擎，只需要在下载对应的应用程序，注：只需要安装dll版本，安装完成后，指定sprity使用引擎gm

  var platform = os.platform();    var options = {      src:'./sprity/**/*.{png,jpg}',      style:'./sprity.css',      out:'./public/assets/sprity-dist/',      orientation:'binary-tree',      margin:0,      cssPath:'./',      split: true    };    if(/win/.test(platform)){      options.engine = 'gm';      options['gm-use-imagemagick'] = true;    }

  需要注意的是sprity-gm的源码中存在一个小问题，已经有人提了一个pull-request，但是作者好像不再维护这个库了。。。。

具体改法见 ：