Grunt, copia i file html nella cartella degli script su build

Question

Io uso il generatore angolare in yeoman. In gruntfile.js, ogni file html in /app/views viene copiato su dist/views. Ma mi piace mantenere i miei modelli di direttive nella stessa cartella della direttiva stessa.

Esempio:

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

Quando costruisco il progetto, voglio che il file html per finire nella stessa struttura di cartelle come sopra.

Ciò dovrebbe probabilmente essere eseguito nella sezione di copia in gruntfile.js.

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

ho cercato di aggiungere questo nella matrice src:

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

non ha funzionato. Qualche idea?

Answer 1

Puoi spostare tutto .tmpl.html da app/script/* a dist/scripts/* usando le modifiche al codice nel file grunt come sotto.

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' 
     } 
     ... 

si sta andando a voler aggiungere la nuova directory al blocco usemin nonché al fine di garantire gli aggiornamenti filerev rendono nel vostro template

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

È inoltre possibile aggiungere la directory htmlmin per minify in html

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

AGGIORNATO Questi script ora riflettere spostare alcun .tmpl.html da app/scripts/*/ a dist/scripts/*/. Se la struttura della cartella è più di un livello nel dettaglio degli script, modificare {,*/}*.html in **/*.html

Answer 2

è il comportamento normale, che tutti i file dopo la generazione vengono copiati nella cartella dist, perché questa è la cartella di generazione di output standard.
cosa si può fare, è quello di cambiare configurazione in questo modo:

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 
      } 
     } 
    } 

questo approccio conserva l'antica struttura all'interno della cartella dist. Ma mi chiedo, perché non usi htmlmin per minimizzare e riunire tutti i tuoi modelli insieme su build ...