gulp编译css文件时，静态资源路径错误怎么办？
现象
在使用gulp进行编译css文件时，编译后的css文件引用的静态资源路径出现了莫名其妙的变化，全部出现了404找不到文件，在本地是好的，但是编译完就出问题了。
之前{width: 100%;height: 126px;: absolute;left: 0;top: 0;background: url('./../image/[email protected]') no-repeat #F3F3F3;: 64px 64px;: center;}
之后{width: 100%;height: 126px;: absolute;left: 0;top: 0;background: url('../../wap/image/[email protected]') no-repeat #F3F3F3;: 64px 64px;: center;}
解决
需要的插件文档在这里：https://github.com/imqianduan/gulp-css-path。
可以通过这个插件，把css文件里的相对路径全部批量替换成绝对路径，即可解决此问题。建议在以后写样式的时候，可以使用less或者sass来声明一个全局的域名变量，把静态资源都写成绝对，而不要写成相对，这样可以避免在gulp或者webpack打包的时候，造成静态资源访问404的问题
。
npm install gulp-css-path --save-dev// 获取 gulpvar gulp = require('gulp'),// 转换路径cssUrlToAbsolute = require('gulp-css-path'),// 清空文件夹clean = require('gulp-clean'),// 压缩csscleanCss = 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 buildbuild完成后
background:url(//test.baidu.com/assets/pc/index/image/[email protected]) no-repeat #f3f3f3;