NodeJs sprity在window下使用的问题整理

槑深度

起因

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

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

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所使用的一个图像引擎,只需要在http://www.imagemagick.org/script/binary...下载对应的应用程序,注:只需要安装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,但是作者好像不再维护这个库了。。。。

具体改法见 : https://github.com/sprity/sprity-gm/pull...
改完sprity-gm的源码后,就可以愉快的跨平台雪碧图生成了。。。

阅读 1.9k

槑深度
各种杂技

没深度的人.

337 声望
3 粉丝
0 条评论

没深度的人.

337 声望
3 粉丝
宣传栏