Come definire i singoli flussi in useminPrepare per ogni blocco nel file html?

Question

Abbiamo 2 blocchi definiti nel nostro index.html - uno per librerie di terze parti e uno per i nostri file di applicazione. Dal momento che le librerie di terze parti sono già miniate, vogliamo solo concatenarle, ma non ugolare. Come posso fare questo con useminPrepare?

<!-- build:js js/lib.js --> 
<script src="lib/angular/angular.min.js"></script> 
<script src="lib/angular-cookies/angular-cookies.min.js"></script> 
<script src="lib/angular-route/angular-route.min.js"></script> 
<!-- endbuild --> 

<!-- build:js js/app.js --> 
<script src="js/app.js"></script> 
<script src="js/controllers/LanguageCtrl.js"></script> 
<!-- endbuild --> 

gruntfile.js:

useminPrepare: { 
     html: '<%= yeoman.app %>/index.html', 
     options: { 
      dest: '<%= yeoman.dist %>', 
      flow: { 
       html: { 
        steps: { 
         // TODO for libs.js block I don't want uglify! 
         js: ['concat', 'uglifyjs'], 
         css: ['cssmin'] 
        }, 
        post: {} 
       } 
      } 
     } 
    } 

Answer 1

Sembrerebbe che sia necessario per definire il blocco personalizzato. Mostra sull'esempio: creazione di blocchi personalizzati "myjs" con solo concat.

Gruntfile.js

useminPrepare: { 
    html: '<%= config.app %>/index.html', 
    options: { 
    dest: '<%= config.dist %>', 
    flow: { 
     // i'm using this config for all targets, not only 'html' 
     steps: { 
     // Here you define your flow for your custom block - only concat 
     myjs: ['concat'], 
     // Note that you NEED to redefine flow for default blocks... 
     // These below is default flow. 
     js: ['concat', 'uglifyjs'], 
     css: ['concat', 'cssmin'] 
     }, 
     // also you MUST define 'post' field to something not null 
     post: {} 
    } 
    }, 
}, 

È inoltre necessario definire la sostituzione del blocco per il blocco personalizzato. Questo blocco dovrebbe essere lo stesso di js.

Gruntfile.js:

usemin: { 
    options: { 
    assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images'], 
    blockReplacements: { 
     // our 'replacement block' 
     myjs: function (block) { 
     return '<script src="' + block.dest + '"></script>'; 
     } 
     // no need to redefine default blocks 
    } 
    }, 
    html: ['<%= config.dist %>/{,*/}*.html'], 
    css: ['<%= config.dist %>/styles/{,*/}*.css'] 
}, 

Così, ora è possibile utilizzare il vostro nuovo blocco personalizzato nel index.html:

<!-- build:myjs js/lib.js --> 
    <script src="lib/angular/angular.min.js"></script> 
    <script src="lib/angular-cookies/angular-cookies.min.js"></script> 
    <script src="lib/angular-route/angular-route.min.js"></script> 
<!-- endbuild --> 

<!-- build:js js/app.js --> 
    <script src="js/app.js"></script> 
    <script src="js/controllers/LanguageCtrl.js"></script> 
<!-- endbuild --> 

Ora dovrebbe funzionare come si desidera. Non ho testato questo codice, ma ho una configurazione molto simile nella mia app e funziona come un fascino. Ho anche avuto alcuni problemi con la definizione dei blocchi di sostituzione: è stato molto frustrante.

Spero che aiuti!