Xử lý đường dẫn hình ảnh trong các tệp css khi được xử lý bởi gulp

Question

Trước đây trong các ứng dụng MVC của tôi, tôi đã sử dụng .NET để tối ưu hóa (ghép, rút ​​gọn, vv) các tệp CSS của tôi. Tôi đã phải sử dụng tùy chỉnh chuyển đổi lớp học để xử lý các đường dẫn trong CSS của tôi như:

.brand { 
    background-image: url("../images/logo.png"); 
} 

hoặc thậm chí:

.brand { 
    background-image: url("/Content/images/logo.png"); 
} 

Tôi đã thêm ngụm cho dự án gần đây nhất của tôi để kiểm tra front-end và Tôi nghĩ tôi cũng sẽ sử dụng nó để tự động tối ưu hóa các tệp CSS và JS của mình. Đây là nhiệm vụ của tôi ngụm để xử lý các file CSS:

var gulp = require('gulp'); 
var concat = require('gulp-concat'); 
var cssmin = require('gulp-minify-css'); 
var rename = require("gulp-rename"); 
var less = require('gulp-less'); 
var uglify = require('gulp-uglify'); 

gulp.task('styles', function() { 
    return gulp.src('./Content/custom/site.less') 
     .pipe(less()) 
     .pipe(gulp.dest('./dist/css')) 
     .pipe(cssmin()) 
     .pipe(rename({ 
      suffix: '.min' 
     })) 
     .pipe(gulp.dest('./dist/css')); 
}); 

Các tập tin CSS được giảm bớt, uglified vv thành công, nhưng các liên kết đến hình ảnh, ví dụ, là không chính xác. Đường dẫn tương đối của khóa học bây giờ tham khảo một cái gì đó như http://localhost/site-folder/dist/css/Content/images/logo. Đường dẫn ban đầu giống như /Content/images/logo.png kết thúc là http://localhost/Content/images/logo.png, nhưng rất tiếc, chúng không tính đến các thư mục tên miền mà trang web của tôi có.

Bất kỳ ý tưởng nào?

Cảm ơn trước

Answer 1

Thông thường những gì tôi cuối cùng làm là tạo ra một /dest, /public hoặc /build thư mục đó là tách rời khỏi nguồn của tôi. Bằng cách đó trong các tập tin tiền xử lý của tôi, tôi chỉ có thể nói images/img.png và không bao giờ lo lắng về đường dẫn chính xác bởi vì tôi biết gulp sẽ được bán phá giá hình ảnh trong thư mục xây dựng luôn.

Tôi cũng thích kiểu này, vì nó buộc tôi phải suy nghĩ cẩn thận về những tệp tôi sẽ hiển thị cho người dùng và có thể định cấu hình máy chủ web của tôi để chỉ phân phát tĩnh từ đó (tránh đi qua đường dẫn, v.v. : nếu bạn sử dụng Express, hãy xem express.static()]). Một lợi ích khác cho điều này là bạn có thể có một nhiệm vụ gulp riêng biệt để nén hình ảnh hoặc tạo các sprites rất tốt cho hiệu suất. Mặc dù bạn không cần thiết lập nâng cao như thế này, tôi khuyên bạn nên duyệt gulp-starter https://github.com/vigetlabs/gulp-starter (tìm hiểu cụ thể cách chúng thực hiện các bước nén và đường ống Sass của họ).

Nếu giải pháp đó không phù hợp với dự án của bạn, bạn có thể nhận được đường dẫn từ quy trình của mình. Trong Node, điều này thật dễ dàng với __dirname hoặc path.cwd() ... nhưng tôi nghĩ đó có thể là một ý tưởng tồi tệ hơn.

Answer 2

Cách đơn giản nhất là sử dụng gulp-replace trong một đường ống cho css của bạn và thay thế url hiện tại của bạn bằng địa chỉ hình ảnh mới. (Tôi cũng đã thêm gulp-load-plugins để giảm require() sưng lên.

này giả định bạn đang di chuyển những hình ảnh cũng như trong một nhiệm vụ riêng biệt.

var gulp = require('gulp'), 
    plugins = require('gulp-load-plugins'); // replaces all your requires 

var yourDirectory = "/Content/images/"; 

gulp.task('styles', function() { 
    return gulp.src('./Content/custom/site.less') 
     .pipe(plugins.less()) 
     .pipe(gulp.dest('./dist/css')) 
     .pipe(plugins.replace('url("../images/', 'url("' + yourDirectory) 
     .pipe(plugins.cssmin()) 
     .pipe(plugins.rename({ 
      suffix: '.min' 
     })) 
     .pipe(gulp.dest('./dist/css')); 
});