20200408074832_gDT1eqkd.png

现象

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

// 之前
.icon {
    width: 100%;
    height: 126px;
    position: absolute;
    left: 0;
    top: 0;
    background: url('./../image/apply_img_addimg@2x.png') 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/apply_img_addimg@2x.png') 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任务

    // 获取 gulp
var 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/apply_img_addimg@2x.png) no-repeat #f3f3f3;