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。简单的可以这样写,如果麻烦点的,可以自己封装个函数。