背景图像路径不工作在css文件使用gulp js

Question

我正在做一个项目，我正在连接所有的文件，用gulp缩小和重命名。

当我在主css文件中写入图像路径作为背景图像时，它在缩小的文件中不起作用。实际上，我无法设置图像路径，因为它是在另一个目录中的我的缩小文件中编译的。

My File路由流

    assets -->
          --css
             --main.css
          --img
    dist -->
           --css
            --all-styles-min.css
   gulpfile.js

我在assets/img文件夹中放置了一个图像文件，并在main.css中调用该文件

My gulp.js

return gulp.src([
      'assets/css/animate.min.css',
       'assets/css/bootstrap.css',
        'assets/css/vendor/bootstrap-select.min.css',
        'assets/css/vendor/bootstrap-datepicker3.min.css',
         'assets/css/vendor/jquery.timepicker.css',
         'assets/css/default.css',
          'assets/css/main.css',
          'assets/css/responsive.css',
       ])
        .pipe(concat('all_styles.css'))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(autoprefixer({
         browsers: ['last 2 versions'],
         cascade: false
       }))
       .pipe(rename('all_styles.min.css'))
       .pipe(gulp.dest('dist/css'))
});

和main.css

.black-bg{
    background:url('../img/black-multiply-bg.png') 0 0 repeat;
}

我看到这个控制台错误的图像文件没有找到

http://localhost/projects/P-09-sakha/html/dist/css/assets/img/black-multiply-bg.png 404 (Not Found)

源代码显示dist文件夹。我也检查了gulp-css-url-adjuster，但仍然无法使其工作

Answer 1

我只使用过Grunt，遗憾的是没有使用过Gulp。但既然我过去确实遇到过类似的事情，我就告诉你我是怎么做的。

我使用replace功能应用正则表达式替换"错误"的url为正确的。

在我的情况下:replace: [{files: 'index.html', regex: /../dist/css/g, replacement: 'css'}]，替换所有../dist/css为index.html文件中的css。例如，<link href="../dist/css/style.css" />将变成<link href="css/style.css" />。

我相信Gulp也有类似的功能

Answer 2

我今天在另一个项目中解决了css-url-adjuster的问题。

我发现编码的格式对我来说是不正确的。所以我分享希望有人能从中找到帮助。

为此，我使用了4个Gulp插件。1. gulp-clean-css2. gulp-cssmin3.gulp-rename4. gulp-css-url-adjuster

，代码是:

gulp.task('css', function(){
return gulp.src([
 '../html/assets/css/main.css',
  ])
/**
 *
 * Note
 * To Use minify and fixing the image path, you have
 * to use both gulp-clean-css & gulp-cssmin & gulp-css-url-adjuster
 * and the format must follow the below code
 * else you will get error
 */
.pipe(concat('apps.css'))
.pipe(gulp.dest('../html/assets/css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(urlAdjuster({
       prepend: '../img/',
      }))
.pipe(cssmin())
.pipe(rename({suffix:'.min'})) 
.pipe(gulp.dest('../html/assets/css'))
});