gulp编译css文件时，静态资源路径错误怎么办？

Posted 2021-04-08 轻码

现象

在使用gulp进行编译css文件时，编译后的css文件引用的静态资源路径出现了莫名其妙的变化，全部出现了404找不到文件，在本地是好的，但是编译完就出问题了。

// 之前.icon { width: 100%; height: 126px; position: absolute; left: 0; top: 0; background: url('./../image/[e-mail]') no-repeat #F3F3F3; background-size: 64px 64px; background-position: center;}

// 之后.icon { width: 100%; height: 126px; position: absolute; left: 0; top: 0; background: url('../../wap/image/[e-mail]') no-repeat #F3F3F3; background-size: 64px 64px; background-position: center;}

解决

需要的插件文档在这里：https://github.com/imqianduan/gulp-css-path。

可以通过这个插件，把css文件里的相对路径全部批量替换成绝对路径，即可解决此问题。建议在以后写样式的时候，可以使用less或者sass来声明一个全局的域名变量，把静态资源都写成绝对，而不要写成相对，这样可以避免在gulp或者webpack打包的时候，造成静态资源访问404的问题。

安装gulp-css-path

npm install gulp-css-path --save-dev

配置gulp任务

 // 获取 gulpvar gulp = require('gulp'), // 转换路径 cssUrlToAbsolute = require('gulp-css-path'), // 清空文件夹 clean = require('gulp-clean'), // 压缩css cleanCss = require('gulp-clean-css'), // 更改版本号 rev = require('gulp-rev'), // 更改提示 notify = require('gulp-notify'), runSequence = require('run-sequence'); //清空目录gulp.task('clean', function (cb) { return gulp.src(['public/']) .pipe(clean());}); //压缩css 生产环境gulp.task('styleBuild', function () { return gulp.src(['./src/**/css/*.css', './src/**/**/css/*.css']) // root：你本地项目的根目录 // cdnpat：绝对路径的域名 .pipe(cssUrlToAbsolute({ root: './src', cdnpath: '//test.baidu.com/assets' })) .pipe(cleanCss()) // 添加hash后缀 .pipe(rev()) .pipe(gulp.dest('public')) // 生成文件映射 .pipe(rev.manifest({ path: './public/assets.json', merge: true })) // 将映射文件导出到脚本所在目录 .pipe(gulp.dest('./')) .pipe(notify({ message: 'css task complete! so fast! so NB!'  }));}); gulp.task('build', ['clean'], function () { runSequence(['styleBuild'])});

执行gulp build来执行任务

gulp build

build完成后

background:url(//test.baidu.com/assets/pc/index/image/[e-mail]) no-repeat #f3f3f3;