如何在useminprepare中爲每個塊定義html文件中的單個流？

Question

我們在index.html中定義了2個塊 - 一個用於第三方庫，一個用於我們的應用程序文件。由於第三方庫已經被縮小，我們只是想連接它們，但不是uglify。我如何使用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

看來你需要定義您的自定義塊。將以示例顯示 - 僅用concat創建自定義塊「myjs」。

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

您還需要定義您的自定義塊地更換。這些塊應該和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'] 
}, 

所以，現在你可以在你的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 --> 

現在它應該工作，只要你想。我沒有測試過這個代碼，但是我在我的應用中有非常類似的配置，它的功能就像一個魅力。我在定義替代塊時也遇到了一些問題 - 這非常令人沮喪。

希望它有幫助！