【腾讯项目】Gulp插件系列—图片相对路径转绝对路径插件

1、插件名称：gulp-css-url-to-absolute

2、使用方法：

1）SVN更新server目录下的package.json并执行：

tnpm install

2）在gulpfile.js中加入如下代码：

var cssUrlToAbsolute = require('@tencent/gulp-css-url-to-absolute');

gulp.task('cssUrlToAbsolute', ['copy'], function () {
    console.log('cssUrlToAbsolute task start');
    return gulp.src([destPath + '/static/css/*.css'])
        .pipe(cssUrlToAbsolute({
            domain: 'gxh.vip.qq.com',
            path: '/club/zb/index/static/css/'
        }))
        .pipe(gulp.dest(destPath + '/static/css'));
});

核心代码：

.pipe(cssUrlToAbsolute({
    domain: 'gxh.vip.qq.com',
    path: '/club/zb/index/static/css/'
}))

domain表示绝对路径的域名，可以带http或https，也可以不带，不带默认//

若domain不填，默认域名为gxh.vip.qq.com

path参数必填，一般填css的对应的路径即可，因为img的路径一般是根据css路径而来的。

该插件也会检测图片有没有加上max_age，没有则自动加上。以下是构建对比：

构建前：

构建后：

3）注意事项

修改gulpfile.js时，需要注意一下任务的顺序

具体代码可参考：

gulpfile.js2.9kB