Cách sửa lỗi hình ảnh khi xử lý tệp css với Gulp?

Question

Đây là nhiệm vụ của Gulp mà tôi đã thiết lập. Nó kết nối, rút ​​gọn và lưu trữ một loạt các tệp css.

gulp.task ('quá trình 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/')); 

});

Vấn đề là có url img mã hóa cứng trong các tập tin nguồn (hiện diện trong css/) vì vậy khi tôi xử lý các tập tin và sau đó xuất chúng trong một thư mục con (css/dist/), các url được chia và hình ảnh không hiển thị trên trang web (404 trở lại).

Làm cách nào để Gulp viết lại url img trong tệp đầu ra để khắc phục sự cố này?

Answer 1

Bạn có thể sử dụng một plugin như ngụm-thay thế (https://www.npmjs.com/package/gulp-replace) để thay thế chuỗi tùy ý trong bất kỳ tập tin nào đó, nó sẽ làm các trick trong trường hợp của bạn;)