首頁 > web前端 > html教學 > css sprite合并_html/css_WEB-ITnose

css sprite合并_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:37:12
原創
1160 人瀏覽過

今天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'    )();})
登入後複製

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板