CONCATENATE/di chuyển file CSS với Gulp

Question

Tôi đang tìm kiếm một chuỗi plugin để sử dụng với Gulp cung cấp:

• hỗ trợ bản đồ nguồn
ít
• việc rút gọn
• nối URL
• thay thế (rebase) để giải quyết di dời/concat

I cu rrently có bốn đầu tiên, nhưng tôi không thể tìm thấy một sự kết hợp của plugins hiện tại mà sẽ cho tôi cuối cùng (URL rebasing) cũng có. Tôi đã không tìm thấy bất kỳ plugin rebasing URL nào phát ra sourcemaps. Chỉ cần rõ ràng, vấn đề của tôi là khi tôi biên dịch nhiều tệp CSS nhỏ từ thư mục phát triển dự án của mình và xuất chúng vào một thư mục chung, việc di chuyển từ kết nối sẽ phá vỡ các URL tương đối, chẳng hạn như các hình nền.

CHỈNH SỬA:

Có vẻ như chuỗi công cụ tôi hiện đang sử dụng đã được thiết kế để giải quyết vấn đề này. Vì vậy, đó là bề ngoài câu trả lời. Tuy nhiên, điều đó đặt ra một câu hỏi khác, cách cú pháp được yêu cầu phải làm việc.

Câu hỏi đó về mặt lý thuyết có nhiều bản sao ngoài kia:

• clean-css #152: Rebasing functionality very frustrating
• clean-css #195: root option on Windows
• clean-css #263: How to get relativeTo option working with CSS files in different paths
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin rebasing a relative URI?

Thật không may là không có câu trả lời thực sự giải thích cú pháp, họ chỉ chứng minh voodoo; vì vậy tôi không biết tại sao những điều sau đây không hoạt động. Nếu tôi có thể giải quyết nó, tôi sẽ quay lại đây và gắn cờ điều này được chấp nhận để cho biết chuỗi công cụ này thực sự làm những gì tôi cần.

Các tập tin nguồn:

/assets 
    /site 
     styleInput1.less "url(../site/logo.png)" 
     logo.png 
     background.png 
    /application 
     styleInput2.less "url(../site/background.png)" 

Nhiệm vụ ngụm:

gulp.task(filename, function() { 
    return gulp.src(files) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(minifyCss({ relativeTo: './compiled' })) 
     .pipe(concat(filename)) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./compiled')); 
}); 

Sản lượng, với các URL bị hỏng. Lưu ý nhiều lỗi. Mặc dù CSS được nâng lên một mức thư mục liên quan đến các nội dung cần thiết, một thư mục cha bổ sung đã được thêm (!). Ngoài ra, một trong các URL đã thay đổi tên thư mục tài sản (!).Rất lạ:

/compiled 
    styleOutput1.css "url(../../compiled/logo.png)" 
    styleOutput2.css "url(../../site/background.png)" 

lời xin lỗi của tôi cho tiếp tục voodoo, nhưng ở đây là tôi ống làm việc ngụm:

.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' })) 

Và kết quả chính xác:

/compiled 
    styleOutput1.css "url(../assets/site/logo.png)" 
    styleOutput2.css "url(../assets/site/background.png)" 

Answer 1

Cá nhân tôi sử dụng ngụm -minify-css và chỉ định thuộc tính relativeTo.

gulp.task('css', function() { 
    gulp.src('./assets/css/main.css') 
// Here I specify the relative path to my files 
     .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true})) 
     .pipe(autoprefixer({ 
     browsers: ['last 2 versions'], 
     cascade: false 
     })) 
     .pipe(gulp.dest('./assets/css/dist/')) 
     .pipe(notify({ 
      "title": "Should I Go?", 
      "subtitle": "Gulp Process", 
      "message": '<%= file.relative %> was successfully minified!', 
      "sound": "Pop", 
      "onLast": true 
     })); 
    }); 

Nếu điều đó không làm việc cho bạn, họ có rất nhiều thông số khác để rebase URL: https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

Đáng chú ý là:

• rebase - thiết lập là false để bỏ qua URL rebasing
• relativeTo - con đường để giải quyết quy tắc @import tương đối và URL
• restructuring - bộ t o sai để vô hiệu hóa chuyển dịch cơ cấu ở cao cấp tối ưu hóa
• root - con đường để giải quyết quy tắc @import tuyệt đối và tương đối rebase URL