How to define individual flows in useminPrepare for each block in html file?

angularjs, grunt-usemin, gruntjs, uglifyjs

Solution

Seems that You need to define your custom block. Will show on example - creating custom block "myjs" with concat only.

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 block replacement for your custom block. These 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 your 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 as You want. I haven't tested this code, but i have very similar config in my app and it works like a charm. I also had some problems with defining replacement blocks - it was very frustrating.

Hope it helps!

Problem

We have 2 blocks defined in our index.html - one for 3rd party libs and one for our application files. Since 3rd party libs are already minified, we just want to concatenate them, but not uglify. How can I 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: {} } } } } ```

Original source