css sprite合并

今天node.js发布了v4.0.0，兴高采烈地升了级，跑koa的时候再也不用node --harmony了，真是nice啊。

下午同事提了个css sprite的需求，要求写的时候是引用小图，发布的时候用工具合成大图，减少合并的工作量。fis3能做这个，果断用起。

• npm install fis3 -g

• fis3 release -d ./dist

duang!!!有警告，csssprite这个模块不支持最新版的node.js。

没关系，换个版本继续搞起，然后就ok了。

对比生成的图片和样式文件，图片合并了，样式文件也替换了，挺nice的。

我天真地以为事情到这就完了，过了一会发现项目跑不起来，文件引用变成了绝对路径。

对比文件发现fis3把background:url(../images)都替换成了background:url(/images)，就是fis团队说的三种语言中的资源定位。

但是我要的只是雪碧图的功能啊，fis那一整套的解决方案我不需要，把路径都给替换了还怎么玩。

翻了fis3的api，没发现有去掉这个替换功能的，扒了源码也没发现有相关配置项。

想自己用gulp写个，把这功能抄过来。仔细看了源码，发现这模块深度依赖fis，还针对图片位置做了性能优化，好麻烦。

折腾了一番，决定对这流程再包装一次。

还是用fis3来生成雪碧图，完了gulp跑一遍，把css路径给改回来，顺便把css和雪碧图文件挪个位置，再把fis3生成的目录删了。

代码大致像这个样子：

gulp.task('sprite',function(){
    return shell.task('fis3 release -d ./dist')();
});

gulp.task('replace',function(){
    return gulp.src(['./dist/css/**/*'])
        .pipe(through.obj(function(file,enc,cb){                
            replaceImageUrl();
            this.push(file);
            cb();            
        }))
        .pipe(gulp.dest('./css/'))
});


gulp.task('default',function(){    
    return sequence(
        'sprite',
        'replace',
        'clean'
    )();
})

折腾了一下午，记录一下。