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