gulp编译css文件时,静态资源路径错误怎样办?

作者 : 开心源码 本文共1706个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共176人阅读

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;}

处理


需要的插件文档在这里: 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/apply_img_addimg@2x.png) no-repeat #f3f3f3;
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » gulp编译css文件时,静态资源路径错误怎样办?

发表回复