gulp自动化构建替换css中图片引用路径

gulp自动化构建替换css中图片引用路径

问题描述

gulp 自动化构建中有一些场景：图片在 src 目录下，开发环境，css 中图片引用为 src 目录（建议新项目迁移到 src 外的静态资源 static 目录下，老项目不好迁移的继续往下看），生产环境，打包完成需要把 css 中图片的引用目录变为 dist。总不能手动替换吧，提供一个 gulp 插件，自动化搞起

解决方案

核心代码如下：

const tap = require("gulp-tap");
// CSS压缩
gulp.task("uglifyCss", async cb => {
    await gulp.src("src/**/*.css")
		.pipe(tap( file => {file.contents = Buffer.from(file.contents.toString().replace(/\/src\//g, '/dist/'))})) // 替换售后模块中图片的引用路径
        .pipe(uglifycss({
            "maxLineLen": 80,
            "uglyComments": true
        }))
        .pipe(gulp.dest("./dist/"))
});

主要是利用 gulp-tap 插件，插件 tap 方法里面会有 file 参数，为 css 文件的 buffer，需要通过 toString() 转为正常字符串，然后用转换完成的字符串替换需要替换的路径值，之后再重新转换为 buffer 值，赋值给 file.contents。简单的可以这样写，如果麻烦点的，可以自己封装个函数。