背景图像路径在使用 gulp js 的 css 文件中不起作用答案

【问题标题】：Background image path not working in css file using gulp js背景图像路径在使用 gulp js 的 css 文件中不起作用
【发布时间】：2016-07-02 13:34:10
【问题描述】：

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

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

我的文件路由流程

    assets -->
          --css
             --main.css
          --img

    dist -->
           --css
            --all-styles-min.css

   gulpfile.js

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

我的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，但仍然无法正常工作。

【问题讨论】：

您可能需要添加配置 gulp-css-url-adjuster 的方式以获得更好的反馈

标签： javascript css gulp gulp-concat

【解决方案1】：

我只对 Grunt 有一些经验，不幸的是没有 Gulp。但既然我过去确实遇到过类似的事情，我会告诉你我做了什么。

我使用replace 功能应用正则表达式替换正确的“错误”网址。

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

我确信 Gulp 也有类似的东西。

【讨论】：

他提到的 gulp-css-url-adjuster 插件实际上似乎是完美的解决方案（它可以满足您的要求）。可能没有正确配置。
是的，我无法配置。实际上我被困在前面：'/image_directory/'，我正在将我的图像目录写为'assets/img'，但它仍然无法正常工作。我真的很困惑，谁能帮我解决一下。提前致谢

【解决方案2】：

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

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

为此，我使用了 4 个 Gulp 插件。 1. gulp-clean-css 2.gulp-cssmin 3. gulp-重命名 4. 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'))
});

【讨论】：