Grunt, kopiere HTML-Dateien in den Ordner scripts auf Build

Question

Ich benutze den Winkelgenerator in Yeoman. In gruntfile.js wird jede HTML-Datei in /app/views auf dist/views kopiert. Aber ich möchte meine Direktivenvorlagen im selben Ordner wie die Direktive selbst behalten.

Beispiel:

/app/scripts/widgets/mywidget.directive.js 
/app/scripts/widgets/mywidget.tmpl.html 

Als ich das Projekt erstellen, ich möchte, dass die HTML-Datei, wie oben in der gleichen Ordnerstruktur enden.

Dies sollte wahrscheinlich im Abschnitt Kopieren in gruntfile.js erfolgen.

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

Ich habe versucht, dies in der src Array hinzuzufügen:

'<%= yeoman.dist %>/scripts/{,*/}*.tmpl.html' 

nicht funktioniert hat. Irgendwelche Ideen?

Answer 1

Sie können alle .tmpl.html von app/scripts/* nach dist/scripts/* verschieben Verwenden von Code-Änderungen an der Gruntfile wie unten.

files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
      '*.{ico,png,txt}', 
      '*.html', 
      'views/{,*/}*.html' 
      ] 
     }, { 
      // This block handles copying the .tmpl.html from app/scripts to dist/scripts 
      expand: true, 
      cwd: '<%= yeoman.app %>/scripts', 
      dest: '<%= yeoman.dist %>/scripts', 
      src: '{,*/}*.tmpl.html' 
     } 
     ... 

Sie werden das neue Verzeichnis der usemin Block als auch hinzufügen zu wollen, die filerev Updates in Ihre Vorlagen, um sicherzustellen,

usemin: { 
     html: ['<%= yeoman.dist %>/{,*/}*.html', 
      '<%= yeoman.dist %>/scripts/{,*/}*.html'], 
     ... 

könnten Sie auch das Verzeichnis hinzufügen möchten htmlmin minify

htmlmin: { 
    dist: { 
    ... 
    files: [ 
     { 
     expand: true, 
     cwd: '<%= yeoman.dist %>', 
     src: ['*.html', 'views/{,*/}*.html', 'scripts/{,*/}*.html'], 
     dest: '<%= yeoman.dist %>' 
     } 
    ] 
    } 

AKTUALISIERT Diese Skripte nun in HTML reflektieren bewegen jede .tmpl.html von app/scripts/*/ bis . Wenn Ihre Ordnerstruktur mehr als eine Ebene tief in Skripten ist, ändern Sie {,*/}*.html zu **/*.html

Answer 2

Es ist das normale Verhalten, dass alle Dateien nach dem Build in den Ordner dist kopiert werden, da dies der Standard-Build-Output-Ordner ist.
was Sie tun können, ist Config wie folgt zu ändern:

copy: { 
     main: { 
      files: [{ 
       src: ['img/**'], 
       dest: 'dist/img/', 
       filter: 'isFile', 
       expand: true, 
       flatten: true 
      }, { 
       src: ['pdf/**'], 
       dest: 'dist/pdf/', 
       filter: 'isFile', 
       expand: true, 
       flatten: true 
      },{ 
       src: ['error/**'], 
       dest: 'dist/error/', 
       filter: 'isFile', 
       expand: true, 
       flatten: true 
      }, { 
       src: ['fonts/**'], 
       dest: 'dist/fonts/', 
       filter: 'isFile', 
       expand: true, 
       flatten: true 
      } 
     } 
    } 

dieser Ansatz bewahrt die alte Struktur in der dist-Ordner. Aber ich frage mich, warum Sie htmlmin nicht verwenden, um alle Ihre Templates zusammen zu bauen und zu packen ...