Grunt useminPrepare和usemin无法处理多个任务和文件(concat失败)

Question

我的项目中需要两个目标。一个用于管理员，一个用于用户页面。出于性能原因，我不希望在用户页面中包含管理插件。然而，我在尝试运行构建时遇到了这个错误：

Running "useminPrepare:admin" (useminPrepare) task
Configuration changed for concat, uglify, cssmin
Running "useminPrepare:user" (useminPrepare) task
Configuration changed for concat, uglify, cssmin
No "concat" targets found.
Warning: Task "concat" failed. Use --force to continue.

我在GruntFile.js中找不到concat任务来查看问题所在。我的GruntFile.js usemin任务如下：

    useminPrepare: {
        admin: {
            html: 'app/admin-index.html',
            options: {
                dest: 'dist'
            }
        },
        user: {
            html: 'app/index.html',
            options: {
                dest: 'dist'
            }
        },
    },
    usemin: {
        admin: {
            html: 'dist/admin-index.html'
        },
        user: {
            html: 'dist/index.html'
        }
    }
grunt.registerTask('build', [
    'clean:dist',
    'less',
    'useminPrepare:admin',
    'useminPrepare:user',
    'concat',
    'copy:dist',
    'cssmin',
    'uglify',
    'filerev',
    'usemin:admin',
    'usemin:user',
    'htmlmin'
]);

下面是js文件的html对应文件。首先是admin-index.html：

<!-- build:js(.) scripts/vendor.js -->
<!-- jQuery and Bootstrap -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- MetsiMenu -->
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Peace JS -->
<script src="bower_components/pace/pace.min.js"></script>
<!-- Angular scripts-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<!-- Angular Dependiences -->
<!--                      -->
<!--                      -->
<!--                      -->
<!-- Datatables -->
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="bower_components/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="bower_components/jszip/dist/jszip.min.js"></script>
<script src="bower_components/pdfmake/build/pdfmake.min.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>
<script src="bower_components/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="bower_components/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="bower_components/datatables.net-buttons/js/buttons.colVis.min.js"></script>
<!-- Datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.tr.min.js"></script>
<script src="bower_components/datepair.js/dist/datepair.js"></script>
<!-- Timepicker -->
<script src="bower_components/jt.timepicker/jquery.timepicker.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- Custom and plugin javascript -->
<script src="scripts/inspinia.js"></script>
<!-- Anglar App Script -->
<script src="scripts/app.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/directives.js"></script>
<script src="scripts/controllers.js"></script>
<!-- endbuild -->

现在是index.html文件：

<!-- build:js(.) scripts/uivendor.js -->
<!-- jQuery and Bootstrap -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.tr.min.js"></script>
<!-- endbuild -->

Answer 1

也许在Gruntfile.js的initConfig设置中没有上面的concat参数，但在"BUILD"命令中设置了它。Grunt不知道concat字符串与什么有关，所以它抛出了一个错误

尝试删除下方的"concat"

grunt.registerTask('build', [
   'clean:dist',
   'less',
   'useminPrepare:admin',
   'useminPrepare:user',
   'copy:dist',
   'cssmin',
   'uglify',
   'filerev',
   'usemin:admin',
   'usemin:user',
   'htmlmin'
]);

或者在配置设置中添加一个concat键下面的示例

  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/file1.js', 'src/file2.js', 'src/file3.js'],
      dest: 'dist/concat-file.js',
    },
   },

Answer 2

合并这两个任务为我解决了问题。虽然Vijay建议的显式声明concat、cssmin、uglify等任务也是一种选择，但它太麻烦了。我更改GruntFile.js如下：

    useminPrepare: {
        html: ['app/admin-index.html', 'app/index.html'],
        options: {
            dest: 'dist'
        }
    },
    usemin: {
        html: ['dist/admin-index.html', 'dist/index.html'],
    }
grunt.registerTask('build', [
    'clean:dist',
    'less',
    'useminPrepare',
    'concat',
    'copy:dist',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
]);