javascriptgruntjsgrunt-usemingrunt-contrib-concat

Grunt useminPrepare and usemin not working with multiple tasks and files (concat fails)


I want two targets in my project. One for admin and one for user pages. I don't want the admin plugins to be included in user pages for performance reasons. However I get this error while trying to run a build:

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.

I can't find a concat task in GruntFile.js to see what's wrong. My GruntFile.js usemin tasks are as follows:

    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'
]);

And the html counterparts are following for js files. First the 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 -->

And now the index.html file:

<!-- 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 -->

Solution

  • Merging the two tasks solved the problem for me. Although explicitly declaring concat, cssmin, uglify etc. tasks as Vijay suggested is an option too, It's just too cumbersome. I changed the GruntFile.js as follows:

        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'
    ]);