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

Posted 轻码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp编译css文件时,静态资源路径错误怎么办?相关的知识,希望对你有一定的参考价值。


现象

在使用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文件里的相对路径全部批量替换成绝对路径,即可解决此问题gulp编译css文件时,静态资源路径错误怎么办?。建议在以后写样式的时候,可以使用less或者sass来声明一个全局的域名变量,把静态资源都写成绝对,而不要写成相对,这样可以避免在gulp或者webpack打包的时候,造成静态资源访问404的问题gulp编译css文件时,静态资源路径错误怎么办?

安装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;


以上是关于gulp编译css文件时,静态资源路径错误怎么办?的主要内容,如果未能解决你的问题,请参考以下文章

Gulp:静态资源(css,js)版本控制

Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

gulp管理静态资源缓存

gulp静态资源构建压缩版本号添加

gulp.js 去除输出文件的相对路径

springmvc引入js,css等静态文件路径问题!!!