Cách ghi lại url của hình ảnh trong các tệp CSS của nhà cung cấp bằng cách sử dụng Grunt

Question

Tôi đang cố di chuyển các phụ thuộc giao diện người dùng ra khỏi hệ thống kiểm soát phiên bản. Một sự kết hợp của Bower.io và Grunt sẽ có thể làm được điều này.

Tuy nhiên, sự cố xảy ra là tôi chưa thể giải quyết bằng cách gộp nhiều thư viện của nhà cung cấp. Ví dụ giả sử tôi có cấu trúc thư mục sau nơi thành phần thư mục là thư mục mà Bower.io tiết kiệm phụ thuộc vào:

├── assets 
└── components 
    ├── bootstrap 
    │   ├── img 
    │   │   └── glyhs.gif 
    │   └── less 
    │    └── bootstrap.css 
    └── jquery-ui 
     ├── css 
     │   └── style.css 
     └── images 
      ├── next.gif 
      └── prev.gif 

Bây giờ giả sử tôi muốn bó cả của jQuery style.css và Bootstrap' bootstrap.css. Tôi sẽ lưu tệp được nhóm này trong nội dung/bundled.css.

Tuy nhiên trong tệp này, tham chiếu đến hình ảnh gốc (../images/next.gif và ../img/glyhs.gif) không đúng. Chúng sẽ phải được viết lại để làm việc (như vậy ../images/next.gif => ../components/jquery-ui/images/next.gif). Tôi tin rằng (d) việc viết lại các URL này là thứ mà Grunt có thể làm. Nhưng tôi dường như không thể làm việc này bằng cách sử dụng tác vụ cssmin/less/copy. Ví dụ thiết lập Grunt sau (chỉ di chuyển 1 tập tin) không làm việc:

module.exports = function (grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     less: { 
      options: { 
       compile: false, 
       relativeUrls: true 
      }, 
      bootstrap: { 
       src: 'components/bootstrap/less/bootstrap.less', 
       dest: 'assets/bootstrap.css' 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-less'); 
    grunt.registerTask('dist-css', ['less']); 
}; 

Hoặc:

• Tôi đã định cấu hình Grunt hoặc làm điều gì đó sai?

• Hoặc là luồng công việc tôi mô tả đơn giản là không đúng và tôi nên sử dụng một mã khác thay thế.

Cảm ơn!

Answer 1

Chỉ để tham khảo: hiện có sẵn giải pháp. Tôi đã đăng cùng một vấn đề này với plugin grunt CleanCss, và họ đã chấp nhận nó và xuất bản hành vi này trong bản phát hành 1.1 mới của họ.

Bạn có thể tìm thấy những vấn đề trên GitHub theo dõi ở đây: https://github.com/GoalSmashers/clean-css/issues/129

Thư viện này làm cho nó có thể sử dụng một trong hai viết lại tuyệt đối (từ một thư mục gốc) hoặc thay đổi đường dẫn hình ảnh tương đối dựa trên một thư mục đầu ra mới. Tìm chỉ thị --root hoặc --ouput.

Cảm ơn lời khuyên và trả lời mọi người!

Answer 2

Bạn sẽ muốn thực hiện một số tìm kiếm/thay thế trên tệp dist css của bạn để tạo đường dẫn tương đối chính xác. Có một số plugin grunt có thể làm điều này cho bạn, cá nhân tôi thích grunt-replace. Thiết lập tài sản nén phi của bạn với các biến và sau đó tạo ra một css quận với các URL tạo động .. Vì vậy:

body { 
    background:url(@@IMG_PATH/background.jpg); 
} 

trở thành này trong quận:

body { 
    background:url(path/to/background.jpg); 
} 

Hope this helps.

Answer 3

Có thể bạn cần xem xét gói grunt này https://github.com/Ideame/grunt-css-urls. Gói này có vẻ nhằm giải quyết chính xác vấn đề của bạn.

Chỉnh sửa: sau khi xem plugin này Tôi không thích ý tưởng viết lại đánh dấu của mình để làm cho quy trình xây dựng của tôi mượt mà hơn. Vì vậy, tôi đã kết thúc viết chức năng nhỏ của riêng tôi mà viết lại cho tôi.

Tôi sử dụng plugin concat của grunt để nhóm các tệp css của tôi. Điều tốt về plugin này là nó hỗ trợ chức năng xử lý tệp trước khi ghép nối.Bây giờ gruntfile của tôi trông như thế này:

grunt.initConfig({ 
concat: { 
    options: { 
    separator: '\n', 
    process: function (src, filepath) { 
     var cssPatt = new RegExp('app(\/.*\/).*\.css$'); 

     //filter out everithing except css files 
     var file = cssPatt.exec(filepath); 

     if (file) { 
      var urlPatt = /url\(\'(.*)\'\)/g; 

     console.log('In file: ' + filepath); 

     //replace every url(...) with its absolute path 
     return src.replace(urlPatt, function (match, p1) { 
      console.log(' * ' + match + ' -> ' + 'url(\'' + file[1] + p1 + '\')'); 
      return 'url(\'' + file[1] + p1 + '\')'; 
     }); 
     } 

     return src; 
    } 
    }, 
}