Hier können Sie CSS-Dateien mit dem Yeoman-Workflow hinzufügen

Question

Ich habe eine eckige Einstellung mit Yeoman. Unter meiner main.html (eine auf index.html geladene Ansicht) habe ich eine referenzierte CSS-Datei in meinem Styles-Ordner hinzugefügt.

ich umgeben mit den Build-Kommentare, so dass es durch Grunzen aufgenommen werden kann bei gleichzeitiger Minimierung:

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

Allerdings, wenn ich mit Grunzen (mit dem Grund Yeoman Grunzen Konfiguration) bauen, es scheint nicht um die Datei calendar.css zu erstellen. Ich vermute, dass dies daran liegt, dass die Datei main.html in views/main.html liegt.

Aus meiner Grunzen-Datei:

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

Es sieht nicht innerhalb der Ansichten Verzeichnis. Ich vermute, dass ich den Workflow falsch verwende.

Wie enthält man eine CSS-Datei, die für eine Ansicht spezifisch ist? Was bedeuten die Kommentare in cssmin block? Danke!

Answer 1

Ich habe die Antwort!

In Gruntfile.js ist ein bisschen mehr Konfiguration erforderlich, da Sie einen benutzerdefinierten Workflow verwenden. (Ignoriere, wenn du dies bereits getan hast).

Zuerst muss die Kopieraufgabe aktualisiert werden, um das Verzeichnis app/views in dist/views zu kopieren. Das ist eine einfache Lösung:

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

Cool cool. Jetzt muss useminPrepare, das vor dem Kopieren Ihrer Daten ausgeführt wird, auch über das Sichtenverzeichnis informiert werden.

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

Woot woot! Das ist es!

Lassen Sie mich wissen, wenn Sie irgendwo stecken bleiben!