How to fix image url when processing css files using Gulp?

Question

This is the Gulp task that I configured. It combines, minimizes 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 the source files have hardcoded img URLs (present in css/ ), so when I process these files and then output them to a subdirectory ( css/dist/ ), the URLs are broken and the images are not displayed on the site (404 returned).

How can I do gulp to rewrite img urls to output file to fix this problem?

Answer 1

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