JS files getting duplicate in Grunt concat task

Question

I'm facing a weird issue where my some of the files inside usemin blocks are getting duplicated in Grunt build task after Grunt concat.

I've searched for it and found various answers like Grunt my code is duplicated in concat.js but not able to fix the solution.

I'm using default generated Gruntfile.js config (via yoman)

    useminPrepare: {
        html: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/index-lt-ie10.html'],
        options: {
            dest: '<%= yeoman.dist %>',
            flow: {
                html: {
                    steps: {
                        js: ['concat', 'uglifyjs'],
                        css: ['cssmin']
                    },
                    post: {}
                }
            }
        }
    }

    grunt.registerTask('build', [
        'clean:dist',
        //'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'ngAnnotate',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        'htmlmin',
    ]);

My usemin block looks like:

<!-- build:js({app,.}) scripts/vendor.js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-translate/angular-translate.js"></script>
    <script src="bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>
    <script src="bower_components/augment/augment.js"></script>
<!-- endbuild -->

Using latest dependencies for all node modules with latest nodejs and npm.

Answer 1

Okay, I figured out the solution by passing --verbose flag to grunt build command. The problem was that there was two bower_components, one in my current directory (.) and another with at ./app directory and since my usemin blocks build:js({app,.}) were reading for both the locations i.e. . and ./app, so Grunt's concat task was duplicating all files.

Reading ./bower_components/angular/angular.js...OK
Reading app/bower_components/angular/angular.js...OK
Reading ./bower_components/angular-resource/angular-resource.js...OK
Reading app/bower_components/angular-resource/angular-resource.js...OK
Reading ./bower_components/angular-cookies/angular-cookies.js...OK
Reading app/bower_components/angular-cookies/angular-cookies.js...OK
Reading ./bower_components/angular-animate/angular-animate.js...OK
Reading app/bower_components/angular-animate/angular-animate.js...OK
Reading ./bower_components/angular-sanitize/angular-sanitize.min.js...OK
Reading app/bower_components/angular-sanitize/angular-sanitize.min.js...OK
Reading ./bower_components/angular-ui-router/release/angular-ui-router.js...OK
Reading app/bower_components/angular-ui-router/release/angular-ui-router.js...OK
Reading ./bower_components/angular-bootstrap/ui-bootstrap-tpls.js...OK
Reading app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js...OK
Reading ./bower_components/angular-translate/angular-translate.js...OK
Reading app/bower_components/angular-translate/angular-translate.js...OK
Reading ./bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js...OK
Reading app/bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js...OK
Reading ./bower_components/augment/augment.js...OK
Reading app/bower_components/augment/augment.js...OK

Hence, removing the bower_components directory from app directory fixed the problem. Hope this may help to others.