csssprite合并_html/css_WEB-ITnose

下午同事提了个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'    )();})

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