How to fix image urls when processing css files with Gulp?

Question

This is a Gulp task that I've set up. It concatenates, minifies andrenames a bunch of css files.

gulp.task('process-css', function() {

var files = [
    'themes/rubbish_taxi/css/bootstrap.css',
    'themes/rubbish_taxi/css/custom.css',
    'themes/rubbish_taxi/css/responsive.css',
    'themes/rubbish_taxi/css/jquery.fancybox.css'
];

return gulp.src(files)
    .pipe(sourcemaps.init())
    .pipe(concat("main.css"))
    .pipe(minifyCSS())
    .pipe(rename(function(path) {
        path.basename += ".min";
    }))
    .pipe(sourcemaps.write('sourcemaps/'))
    .pipe(gulp.dest('themes/my_theme/css/dist/'));

});

The problem is that there are hard-coded img urls in the source files (present in css/) so when I process these files and then output them in a subdirectory (css/dist/), the urls are broken and images do not display on the site (404 returned).

How can I make Gulp rewrite the img urls in the output file in order to fix this issue?

Answer 1

You can use a plugin such as gulp-replace (https://www.npmjs.com/package/gulp-replace) to replace arbitrary strings in any given files, it should do the trick in your case ;)