如何在通过处理更改css文件位置后更改相对urls

Question

对于典型的web项目，我们可以使用gulp/webpack将js/css打包(压缩)到dest dir。但是，background-image图像不需要引起问题的compressing.So :图像和css之间的相对路径被更改，如果我对background-image:url(images/header_title.jpg)这样的background-image:url(images/header_title.jpg)使用相对路径，则会得到404。

其他网站是怎么处理这个问题的？感谢您的任何建议！

Answer 1

看看css-url-调节器或css-rebase-urls。例如，它们都会改变。

background-image: url('coolImage.jpg'); 

你所指定的事物，如：

background-image: url('/image_directory/coolImage.jpg?version=1');

从吞咽-css-url-调整器的文档。

你只需告诉插件你想要的新的相对urls。

gulp.task('default', function () {
  return gulp.src('style.css')
    .pipe(urlAdjuster({
       replace:  ['/old/path','/new/path],
    }))
   .pipe(gulp.dest('modifiedStyle.css'));
});