为什么我们需要使用 grunt - useminPrepare

Question

我有点困惑，为什么 yeoman 角度生成器在 useminPrepare 任务中有 concat 任务，因为 concat 和 uglify 稍后在构建任务中运行。

// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglifyjs'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  }
},



  grunt.registerTask('build', [
    'clean:dist',
    'bowerInstall',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin',
    'htmlmin'
  ]);

有人可以启发我吗？

Answer 1

useminPrepare 任务实际上并没有进行任何缩小，而是解析 HTML 并为其他任务设置适当的配置。例如，如果你的 HTML 中有这个：

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

useminPrepare 任务将设置以下配置：

{
  concat: {
    '.tmp/concat/js/app.js': [
      'app/js/app.js',
      'app/js/controllers/thing-controller.js',
      'app/js/models/thing-model.js',
      'app/js/views/thing-view.js'
    ]
  },
  uglifyjs: {
    'dist/js/app.js': ['.tmp/concat/js/app.js']
  }
}

然后 HTML 中的块将被替换为：

<script src="dist/js/app.js"></script>

有关详细信息，请参阅https://github.com/yeoman/grunt-usemin。