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

Arteritis

You don't show the entire Gruntfile. Do you have copy and concat tasks? Perhaps this will be helpful: https://mcmap.net/q/1770556/-grunt-task-delete-lines-between-markers-in-an-html-file – Bareback

Updated with full Gruntfile – Arteritis

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.

Kareykari

If usemin handles the config for you whhy doesn't it do the execution for you as well? – Amabel

My guess is because it's a modular task. If concat/uglify already exist, I imagine the project maintainers didn't see the need to reinvent the wheel, so to speak. – Kareykari

It merges your configuration with the one generated by the tool, I guess it does so so you can still tweak it. Maybe the expected behaviour is that it should execute the generated configuration. You can run it yourself with 'concat:generated', 'uglify:generated', 'cssmin:generated', – Spherule