Jak zdefiniować poszczególne przepływy w useminPrepare dla każdego bloku w pliku html?

Question

Mamy 2 bloki zdefiniowane w naszym pliku index.html - jeden dla bibliotek stron trzecich i jeden dla naszych plików aplikacji. Ponieważ biblioteki stron trzecich są już zminimalizowane, po prostu chcemy je połączyć, ale nie zagłuszać. Jak mogę to zrobić z 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

Wydaje się, że trzeba określić swój własny blok. Pokaże na przykład - tworzenie niestandardowego bloku "myjs" tylko z konkat.

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: {} 
    } 
    }, 
}, 

Należy również określić wymianę bloku do niestandardowego bloku. Blok ten powinien być taki sam jak dla 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'] 
}, 

Więc teraz można korzystać z nowego niestandardowego bloku w pliku 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 --> 

Teraz powinno działać jak chcesz. Nie testowałem tego kodu, ale mam bardzo podobną konfigurację w mojej aplikacji i działa jak urok. Miałem też problemy z definiowaniem bloków zastępczych - to było bardzo frustrujące.

Mam nadzieję, że pomoże!