Wie definiert man einzelne Flüsse in useminPrepare für jeden Block in HTML-Datei?

Question

Wir haben 2 Blöcke in unserer index.html definiert - eine für 3rd-Party-Bibliotheken und eine für unsere Anwendungsdateien. Da Bibliotheken von Drittanbietern bereits verkleinert sind, wollen wir sie nur verketten, aber nicht verkomplizieren. Wie kann ich das mit useminPrepare tun?

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

scheint, dass Sie benötigen, um Ihre benutzerdefinierten Block zu definieren. Wird am Beispiel zeigen - Erstellen benutzerdefinierten Block "myjs" nur mit 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: {} 
    } 
    }, 
}, 

Sie müssen auch Block Ersatz für Ihre benutzerdefinierten Block definieren. Dieser Block sollte derselbe wie für js sein.

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

So, jetzt können Sie Ihren neuen benutzerdefinierten Block in Ihrer index.html verwenden:

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

Jetzt sollte es funktionieren, wie Sie wollen. Ich habe diesen Code nicht getestet, aber ich habe sehr ähnliche Konfiguration in meiner App und es funktioniert wie ein Charme. Ich hatte auch einige Probleme mit der Definition von Ersatzblöcken - es war sehr frustrierend.

Hoffe es hilft!