20200408074832_gDT1eqkd.png
現(xiàn)象
在使用gulp進(jìn)行編譯css文件時(shí)弓叛，編譯后的css文件引用的靜態(tài)資源路徑出現(xiàn)了莫名其妙的變化彰居，全部出現(xiàn)了404找不到文件，在本地是好的撰筷，但是編譯完就出問(wèn)題了陈惰。
// 之前
.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
可以通過(guò)這個(gè)插件，把css文件里的相對(duì)路徑全部批量替換成絕對(duì)路徑毕籽，即可解決此問(wèn)題抬闯。建議在以后寫(xiě)樣式的時(shí)候，可以使用less或者sass來(lái)聲明一個(gè)全局的域名變量关筒，把靜態(tài)資源都寫(xiě)成絕對(duì)溶握，而不要寫(xiě)成相對(duì)，這樣可以避免在gulp或者webpack打包的時(shí)候蒸播，造成靜態(tài)資源訪問(wèn)404的問(wèn)題睡榆。
安裝gulp-css-path
npm install gulp-css-path --save-dev
配置gulp任務(wù)
// 獲取 gulp
var gulp = require('gulp'),
// 轉(zhuǎn)換路徑
cssUrlToAbsolute = require('gulp-css-path'),
// 清空文件夾
clean = require('gulp-clean'),
// 壓縮css
cleanCss = require('gulp-clean-css'),
// 更改版本號(hào)
rev = require('gulp-rev'),
// 更改提示
notify = require('gulp-notify'),
runSequence = require('run-sequence');
//清空目錄
gulp.task('clean', function (cb) {
return gulp.src(['public/'])
.pipe(clean());
});
//壓縮css 生產(chǎn)環(huán)境
gulp.task('styleBuild', function () {
return gulp.src(['./src/**/css/*.css', './src/**/**/css/*.css'])
// root：你本地項(xiàng)目的根目錄
// cdnpat：絕對(duì)路徑的域名
.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
}))
// 將映射文件導(dǎo)出到腳本所在目錄
.pipe(gulp.dest('./'))
.pipe(notify({ message: 'css task complete! so fast! so NB!'
}));
});
gulp.task('build', ['clean'], function () {
runSequence(['styleBuild'])
});
執(zhí)行g(shù)ulp build來(lái)執(zhí)行任務(wù)
gulp build
執(zhí)行build成功后
background:url(//test.baidu.com/assets/pc/index/image/apply_img_addimg@2x.png) no-repeat #f3f3f3;
