Gdzie dodać pliki css przy użyciu obiegu pracy Yeomana

Question

Mam ustawienie kątowe za pomocą Yeoman. Pod moim main.html (widok załadowany na index.html), dodałem odwołanie do pliku css w moim folderze style.

I otoczył go komentarzach kompilacji tak, że może być odebrany przez grunt przy jednoczesnej minimalizacji:

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

Jednak, kiedy zbudować używając grunt (z podstawowej konfiguracji Yeoman grunt), nie wydaje aby utworzyć plik calendar.css. Podejrzewam, że może tak być dlatego, że plik main.html znajduje się w views/main.html.

Z mojego pliku grunt:

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' 
    //  ] 
    // } 
    // } 
}, 

To nie wygląda na w katalogu widoki. Podejrzewam, że używam przepływu pracy niepoprawnie.

Jak dołączyć plik CSS, który jest specyficzny dla widoku? Co ponadto oznaczają komentarze w bloku cssmin? Dzięki!

Answer 1

Mam odpowiedź!

Wymagana jest nieco większa konfiguracja w Gruntfile.js, ponieważ używasz niestandardowego przepływu pracy. (Zignoruj, jeśli już to zrobiłeś).

Najpierw należy zaktualizować zadanie kopiowania, aby skopiować katalog app/views do dist/views. Łatwo to naprawić:

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

Fajnie fajne. Teraz, useminPrepare, który jest uruchamiany przed skopiowaniem twoich plików, musi również wiedzieć o katalogu widoków.

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

Woot woot! To jest to!

Daj mi znać, jeśli utkniesz w dowolnym miejscu!