Nơi để thêm tệp css bằng quy trình làm việc Yeoman

Question

Tôi có thiết lập góc sử dụng Yeoman. Theo số main.html (chế độ xem được tải lên index.html), tôi đã thêm một tệp css được tham chiếu trong thư mục kiểu của tôi.

tôi bao quanh nó với việc xây dựng ý kiến ​​để nó có thể được nhặt bởi grunt trong khi giảm thiểu:

<!-- build:css({.tmp,app}) styles/calendar.css --> 
<link rel="stylesheet" href="styles/fullcalendar.css" /> 
<!-- endbuild --> 

Tuy nhiên, khi tôi xây dựng sử dụng grunt (với cấu hình yeoman grunt cơ bản), nó dường như không để tạo tệp calendar.css. Tôi nghi ngờ rằng điều này có thể là do tệp main.html nằm trong chế độ xem/main.html.

Từ tập tin grunt của tôi:

usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    dirs: ['<%= yeoman.dist %>'] 
    } 
}, 

...

cssmin: { 
    // By default, your `index.html` <!-- Usemin Block --> will take care of 
    // minification. This option is pre-configured if you do not wish to use 
    // Usemin blocks. 
    // dist: { 
    // files: { 
    //  '<%= yeoman.dist %>/styles/main.css': [ 
    //  '.tmp/styles/{,*/}*.css', 
    //  '<%= yeoman.app %>/styles/{,*/}*.css' 
    //  ] 
    // } 
    // } 
}, 

Nó không nhìn vào trong thư mục xem. Tôi nghi ngờ rằng tôi đang sử dụng quy trình làm việc không chính xác.

Làm cách nào để bao gồm tệp css dành riêng cho chế độ xem? Ngoài ra, các nhận xét trong khối cssmin có nghĩa là gì? Cảm ơn!

Answer 1

Tôi đã có câu trả lời!

Cấu hình một chút được yêu cầu trong Gruntfile.js, vì bạn đang sử dụng quy trình làm việc tùy chỉnh. (Bỏ qua nếu bạn đã làm điều này).

Trước tiên, tác vụ sao chép cần được cập nhật để sao chép thư mục app/views của bạn vào dist/views. Đó là một sửa chữa đủ dễ dàng:

copy: { 
    dist: { 
     files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
       '*.{ico,png,txt}', 
       '.htaccess', 
       'images/{,*/}*.{webp,gif}', 
       'styles/fonts/*', 
       'views/*' 
      ] 
     }] 
    }, 
    // ... 
} 

Mát lạnh. Bây giờ, useminPrepare, chạy trước khi nội dung của bạn được sao chép, cũng cần biết về thư mục lượt xem.

useminPrepare: { 
    options: { 
     dest: '<%= yeoman.dist %>' 
    }, 
    html: [ 
     '<%= yeoman.app %>/index.html', 
     '<%= yeoman.app %>/views/*.html' 
    ] 
}, 

Woot woot! Đó là nó!

Hãy cho tôi biết nếu bạn gặp khó khăn ở bất cứ đâu!