Wie behebt man Bild-URLs bei der Verarbeitung von CSS-Dateien mit Gulp?

Question

Dies ist eine Gulp Aufgabe, die ich eingerichtet habe. Es verkettet, minimiert und erweitert eine Reihe von CSS-Dateien.

gulp.task ('Prozess-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/')); 

});

Das Problem ist, dass es hart codierte img URLs in den Quelldateien (in css/) so, wenn ich diese Dateien zu verarbeiten, und dann geben sie in einem Unterverzeichnis (css/dist/) werden die URLs gebrochen und Bilder nicht angezeigt werden auf der Website (404 zurückgegeben).

Wie kann ich Gulp die img urls in der Ausgabedatei umschreiben, um dieses Problem zu beheben?

Answer 1

Sie ein Plugin verwenden können, wie schluck-ersetzen (https://www.npmjs.com/package/gulp-replace) beliebige Zeichenketten in jeder gewünschten Dateien zu ersetzen, sollte es den Trick in Ihrem Fall tun;)