grunt thay thế tất cả các file dưới vào file css

Question

tôi sử dụng grunt để chuyển đổi tất cả các file dưới của tôi vào các file css, sử dụng này:

less: { 
    development: { 
    files: { 
     "css/*.css": "less/*.less" 
    } 
    } 
} 

này làm việc trên phiên bản 0.3.0, nhưng bây giờ mà tôi đã nâng cấp lên v0 .4.0 nó không hoạt động nữa.

Mã sau (không sử dụng * ở đích) hoạt động trên cả hai phiên bản, do đó vấn đề là với dấu sao trên tệp đích.

less: { 
    development: { 
    files: { 
     "css/test.css": "less/*.less" 
    } 
    } 
} 

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

Answer 1

Đây không phải là lỗi. Grunt không còn hỗ trợ globbing trong dest bằng cách sử dụng cấu hình đó. Tuy nhiên, bạn có thể sử dụng định dạng "file mảng", như thế này:

files: [ 
    { 
    expand: true, 
    cwd: 'src', 
    src: ['*.less'], 
    dest: 'assets/css/', 
    ext: '.css' 
    } 
] 

Ngoài ra, nếu bạn sử dụng một thư viện như Bootstrap và bạn muốn xây dựng mỗi tập tin LESS (thành phần) thành một tập tin CSS cá nhân riêng biệt, nó không phải là rất dễ dàng để thực hiện "ra khỏi hộp". Lý do là mỗi tệp LESS sẽ cần có các tuyên bố @import riêng cho variables.less và mixins.less (và một số khác như forms.less và navbar.less, vì chúng được tham chiếu trong các tệp khác).

Để thực hiện điều này thực sự dễ dàng, hãy thử plugin Grunt, assemble-less (từ chối trách nhiệm: Tôi là một trong những người duy trì dự án và tôi cũng thuộc nhóm lõi cho less.js). lắp ráp-ít hơn là một ngã ba của grunt-contrib-ít hơn bởi Tyler Kellen, nhưng nó cho biết thêm một số tính năng thử nghiệm sẽ thực hiện những gì bạn cần (nếu bạn muốn ổn định, xin vui lòng dính với grunt-contrib-ít hơn). Ví dụ:

// Project configuration. 
grunt.initConfig({ 

    less: { 
    // Compile all targeted LESS files individually 
    components: { 
     options: { 
     imports: { 
      // Use the new "reference" directive, e.g. 
      // @import (reference) "variables.less"; 
      reference: [ 
      "bootstrap/mixins.less", 
      "bootstrap/variables.less" 
      ] 
     } 
     }, 
     files: [ 
     { 
      expand: true, 
      cwd: 'bootstrap/less', 
      // Compile each LESS component excluding "bootstrap.less", 
      // "mixins.less" and "variables.less" 
      src: ['*.less', '!{boot,var,mix}*.less'], 
      dest: 'assets/css/', 
      ext: '.css' 
     } 
     ] 
    } 
    } 
    ... 
} 

Các tính năng cơ bản imports prepends các quy định @import báo cáo lên các tập tin nguồn. Tùy chọn reference cho phép bạn "tham chiếu" các tệp ít khác trong khi chỉ xuất các kiểu được tham chiếu cụ thể qua mixin hoặc :extend. Bạn có thể cần phải tham khảo một vài tệp khác hơn được hiển thị ở đây, vì Bootstrap tham chiếu chéo kiểu từ các thành phần khác, như forms.less, buttons.less, v.v. (xem the Gruntfile in assemble-less để biết ví dụ.)

Vì vậy, sau khi chạy các nhiệm vụ assemble-less với cấu hình trong ví dụ trên, thư mục assets/css sẽ có:

• alerts.css
• badges.css
• breadcrumbs.css
• button-groups.css
• buttons.css
• carousel.css
• close.css
• code.css
• component-animations.css
• dropdowns.css
• forms.css
• glyphicons.css
• grid.css
• input-groups.css
• jumbotron.css
• labels.css
• list-group.css
• media.css
• modals.css
• navbar.css
• navs.css
• normalize.css
• pager.css
• pagination.css
• panels.css
• popovers.css
• print.css
• progress-bars.css
• responsive-utilities.css
• scaffolding.css
• tables.css
• theme.css
• thumbnails.css
• tooltip.css
• type.css
• utilities.css
• wells.css

Có những tính năng khác mà sẽ giúp bạn với điều này, nhưng tính năng imports là siêu mạnh mẽ vì nó cho phép bạn để thêm chỉ thị trực tiếp vào Gruntfile.