Come correggere gli URL delle immagini durante l'elaborazione dei file css con Gulp?

Question

Questo è un compito Gulp che ho impostato. Concatena, minimizza e cancella un mucchio di file CSS.

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

});

Il problema è che ci sono URL img hardcoded nei file sorgente (presenti in css/) così quando elaborare questi file e poi uscita in una sottodirectory (css/dist/), gli URL sono rotti e le immagini non vengono visualizzate sul sito (404 restituiti).

Come posso fare in modo che Gulp riscriva gli img URL nel file di output per risolvere questo problema?

Answer 1

È possibile utilizzare un plugin come gulp-sostituire (https://www.npmjs.com/package/gulp-replace) per sostituire le stringhe arbitrarie in ogni file, che dovrebbe fare il trucco nel tuo caso;)