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

后端 未结 1 1664
花落未央
花落未央 2021-02-08 11:35

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 the

相关标签:
1条回答
  • 2021-02-08 12:00

    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!

    0 讨论(0)
提交回复
热议问题