html dosyasındaki her bir blok için useminPrepare'deki tekil akışlar nasıl tanımlanır?

Question

İndex.html sayfamızda tanımlanmış 2 blok var - bir tanesi üçüncü parti kütüphaneler için, diğeri uygulama dosyalarımız için. 3. parti lib'lar zaten küçüldüklerinden, sadece onları birleştirmek istiyoruz, ama çirkin değil. Bunu useminPrepare ile nasıl yapabilirim?

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

Sen özel bloğunu tanımlamak gerektiğini görünüyor. Örnekte gösterilecek - sadece özel ile blok "myjs" oluşturma.

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

Ayrıca özel blok için blok değiştirme tanımlamanız gerekir. Bu blok js ile aynı olmalıdır.

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

Yani, şimdi Sen index.html yeni özel bloğunu kullanabilirsiniz: Sen istediğiniz gibi

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

Şimdi çalışmalıdır. Bu kodu test etmedim, ancak uygulamasında çok benzer bir yapılandırmam var ve çekicilik gibi çalışıyor. Ayrıca yedek blokları tanımlamada bazı problemlerim vardı - çok sinir bozucu oldu.

Umut eder!