Grunt usemin: concatenated JavaScript file not created

Question

I am using the usemin task in my Yeoman generator. In the HTML it looks like it has worked fine as the separate JavaScript files are replaced by a link to a single file. However, the file that is being referenced to has not been created. Am I missing a setting?

Gruntfile.js

'use strict';

module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
        app: 'app',
        dev: 'dev',
        dist: 'dist'
    };

    grunt.initConfig({
        yeoman: yeomanConfig,

        clean: {
            dist: {
                files: [{
                    dot: true,
                    src: [
                        '.tmp',
                        '<%%= yeoman.dist %>/*',
                        '!<%%= yeoman.dist %>/.git*'
                    ]
                }]
            }
        },

        copy: {
            dev: {
                files: [
                    {expand: true, cwd: '<%%= yeoman.app %>', src: ['**', '!**/scss/**'], dest: '<%%= yeoman.dev %>'},
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/scss/fonts', src: ['**'], dest: '<%%= yeoman.dev %>/assets/css/fonts'},
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery', src: ['jquery.min.js'], dest: '<%%= yeoman.dev %>/assets/js/lib', rename: function (dest) {
                        var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json');
                        return dest + '/jquery-' + jQConf.version + '.min.js';
                    }},
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-legacy', src: ['jquery.min.js'], dest: '<%%= yeoman.dev %>/assets/js/lib', rename: function (dest) {
                        var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/.bower.json');
                        return dest + '/jquery-' + jQLegConf.version + '.min.js';
                    }},
                    // Only copy over the unminified migrate plugin
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-migrate', src: ['jquery-migrate.js'], dest: '<%%= yeoman.dev %>/assets/js/lib', rename: function (dest) {
                        var jqMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json');
                        return dest + '/jquery-migrate-' + jqMigConf.version + '.js';
                    }}
                ]
            },

            dist: {
                files: [
                    {expand: true, cwd: '<%%= yeoman.app %>', src: ['**', '!**/scss/**', '!**/js/*.js', '!**/bower_components/**'], dest: '<%%= yeoman.dist %>'},
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/scss/fonts', src: ['**'], dest: '<%%= yeoman.dist %>/assets/css/fonts'},
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery', src: ['jquery.min.js'], dest: '<%%= yeoman.dist %>/assets/js/lib', rename: function (dest) {
                        var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json');
                        return dest + '/jquery-' + jQConf.version + '.min.js';
                    }},
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-legacy', src: ['jquery.min.js'], dest: '<%%= yeoman.dist %>/assets/js/lib', rename: function (dest) {
                        var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/.bower.json');
                        return dest + '/jquery-' + jQLegConf.version + '.min.js';
                    }},
                    // Only copy over the minified migrate plugin
                    {expand: true, cwd: '<%%= yeoman.app %>/assets/bower_components/jquery-migrate', src: ['jquery-migrate.min.js'], dest: '<%%= yeoman.dist %>/assets/js/lib', rename: function (dest) {
                        var jqMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json');
                        return dest + '/jquery-migrate-' + jqMigConf.version + '.min.js';
                    }}
                ]
            }
        },

        compass: {
            dev: {
                options: {
                    sassDir: '<%%= yeoman.app %>/assets/scss',
                    cssDir: '<%%= yeoman.dev %>/assets/css',
                    environment: 'development'
                }
            },

            dist: {
                options: {
                    sassDir: '<%%= yeoman.app %>/assets/scss',
                    cssDir: '<%%= yeoman.dist %>/assets/css',
                    environment: 'production'
                }
            }
        },

        replace: {
            dev: {
                options: {
                    patterns: [{
                        match: '/@jquery-migrate-local/g',
                        replacement: function () {
                            var jQMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json');
                            return 'assets/js/lib/jquery-migrate-' + jQMigConf.version + '.js';
                        },
                        expression: true
                    }]
                }
            },

            dist: {
                options: {
                    patterns: [{
                        match: '/@jquery-cdn/g',
                        replacement: function () {
                            var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json');
                            return '//ajax.googleapis.com/ajax/libs/jquery/' + jQConf.version + '/jquery.min.js';
                        },
                        expression: true
                    }, {
                        match: '/@jquery-legacy-cdn/g',
                        replacement: function () {
                            var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/bower.json');
                            return '//ajax.googleapis.com/ajax/libs/jquery/' + jQLegConf.version + '/jquery.min.js';
                        },
                        expression: true
                    }, {
                        match: '/@jquery-local/g',
                        replacement: function () {
                            var jQConf = grunt.file.readJSON('app/assets/bower_components/jquery/bower.json');
                            return 'assets/js/lib/jquery-' + jQConf.version + '.min.js';
                        },
                        expression: true
                    }, {
                        match: '/@jquery-legacy-local/g',
                        replacement: function () {
                            var jQLegConf = grunt.file.readJSON('app/assets/bower_components/jquery-legacy/bower.json');
                            return 'assets/js/lib/jquery-' + jQLegConf.version + '.min.js';
                        },
                        expression: true
                    }, {
                        match: '/@jquery-migrate-local/g',
                        replacement: function () {
                            var jQMigConf = grunt.file.readJSON('app/assets/bower_components/jquery-migrate/.bower.json');
                            return 'assets/js/lib/jquery-migrate-' + jQMigConf.version + '.min.js';
                        },
                        expression: true
                    }]
                },
                files: [
                    {src:  ['app/index.html'], dest: 'app/index.html'}
                ]
            }
        },

        processhtml: {
            dev: {
                files: {
                    '<%%= yeoman.dev %>/index.html': ['<%%= yeoman.app %>/index.html']
                }
            },
            dist: {
                options: {
                    data: {
                        message: '.min'
                    }
                },
                files: {
                    '<%%= yeoman.dist %>/index.html': ['<%%= yeoman.app %>/index.html']
                }
            }
        },

        useminPrepare: {
            html: '<%%= yeoman.app %>/index.html',
            options: {
                dest: '<%= yeoman.dist %>'
            }
        },

        usemin: {
            options: {
                dirs: ['<%%= yeoman.dist %>']
            },
            html: ['**/*.html'],
            css: ['**/*.css']
        }

    });

    grunt.registerTask('server', []);

    grunt.registerTask('dev', [
        'clean', 'copy:dev', 'compass:dev', 'replace'
    ]);

    grunt.registerTask('build', [
        'clean', 'copy:dist', 'compass:dist', 'replace:dist', 'useminPrepare', 'usemin'
    ]);
};

index.html

<!-- build:js assets/js/main.js -->
<script src="assets/js/variables.js"></script>
<script src="assets/js/functions.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/events.js"></script>
<!-- endbuild -->

terminal process message

Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks

Found a block:
        <!-- build:js assets/js/lteie8.main.js -->
        <script src="assets/bower_components/selectivizr/selectivizr.js"></script>
        <script src="assets/bower_components/respond/respond.src.js"></script>
        <!-- endbuild -->
Updating config with the following assets:
    - app/assets/bower_components/selectivizr/selectivizr.js
    - app/assets/bower_components/respond/respond.src.js

Found a block:
    <!-- build:js assets/js/main.js -->
    <script src="assets/js/variables.js"></script>
    <script src="assets/js/functions.js"></script>
    <script src="assets/js/script.js"></script>
    <script src="assets/js/events.js"></script>
    <!-- endbuild -->
Updating config with the following assets:
    - app/assets/js/variables.js
    - app/assets/js/functions.js
    - app/assets/js/script.js
    - app/assets/js/events.js

Configuration is now:

  cssmin:
  {}

  concat:
  { 'dist/assets/js/lteie8.main.js': 
   [ 'app/assets/bower_components/selectivizr/selectivizr.js',
     'app/assets/bower_components/respond/respond.src.js' ],
  'dist/assets/js/main.js': 
   [ 'app/assets/js/variables.js',
     'app/assets/js/functions.js',
     'app/assets/js/script.js',
     'app/assets/js/events.js' ] }

  uglify:
  { 'dist/assets/js/lteie8.main.js': 'dist/assets/js/lteie8.main.js',
  'dist/assets/js/main.js': 'dist/assets/js/main.js' }

  requirejs:
  {}

Results in (HTML): <script src="assets/js/main.js"></script> but no main.js file created

Answer 1

You're going to need concat and min tasks after usemin. Usemin just changes the configuration for concat.

In one of my projects, I have the following:

  <!-- build:js /js/scripts.min.js -->
  <script src="/assets/javascript/source/index.js"></script>
  <script src="/assets/javascript/source/flipper.js"></script>
  <script src="/assets/javascript/source/utils.js"></script>
  <script src="/assets/javascript/source/overlay.js"></script>
  <script src="/assets/javascript/source/views.js"></script>
  <script src="/assets/javascript/source/rotator.js"></script>
  <script src="/assets/javascript/source/promos.js"></script>
  <!-- endbuild -->

and my Grunt task is this:

grunt.registerTask('produce', [
    'useminPrepare',
    'concat',
    'uglify',
    'cssmin',
    'usemin'
]);

You simply need to have concat & uglify installed to your project, there's no configuration needed since usemin handles that.