How to define separate streams in useminPrepare for each block in html file?

Question

We have 2 blocks defined in our index.html - one for third-party libraries and one for our application files. Since 3-party libraries have already been released, we just want to concatenate them, but not guess. How to do this with 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

It seems you need to define your custom block. It will show, for example, creating a custom block "myjs" only with 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: {} } }, }, 

You also need to define a block replacement for your custom block. This block should be the same as for 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'] }, 

So now you can use your new custom block in 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 --> 

Now it should work the way you want. I have not tested this code, but I have a very similar configuration in my application, and it works like a charm. I also had some problems with defining replacement blocks - it was very unpleasant.

Hope this helps!