I am working on a project where I am concatenating all files, minifying and renaming by gulp.

When I write an image path as a background image in my main css file it is not working in the minified file. Actually I am unable to set the image path as it is getting compiled in my minified file which is in another directory.

My File route flow

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

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

   gulpfile.js

I have put an image file inside the assets/img folder and am calling that file inside my 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'))
});

and in my main.css

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

I am seeing this console error for image file not found

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

The source is showing the dist folder. I have also checked with gulp-css-url-adjuster but still am unable to make it work.

I only got some experience with Grunt, not Gulp unfortunately. But since I did run into something similar in the past, I'll tell you what I did.

I used the replace functionality to apply a regex replacing the "wrong" urls for the right ones.

In my case: replace: [{files: 'index.html', regex: /\.\.\/dist\/css/g, replacement: 'css'}], replacing all ../dist/css for css in the index.html file. For example, <link href="../dist/css/style.css" /> will become <link href="css/style.css" />.

I'm sure Gulp has something similar.

more