如何添加另一个生成的javascript文件以供usemin grunt进程选取？

Question

我正在使用Angular JS项目中的Gruntfile。

在此步骤中，我将所有html模板转换为角度js组件：

html2js: {
            app: {
                options: {
                    htmlmin: {
                        collapseBooleanAttributes: true,
                        collapseWhitespace: true,
                        removeAttributeQuotes: true,
                        removeComments: true,
                        removeEmptyAttributes: true,
                        removeRedundantAttributes: true,
                        removeScriptTypeAttributes: true,
                        removeStyleLinkTypeAttributes: true
                    }
                },
                src: [ '<%= settings.app %>/app/**/*.tpl.html' ],
                dest: '.tmp/concat/js/templates-app.js'

}         }，

我已将目标文件夹设为“.tmp”

然后我使用“usemin”

useminPrepare: {
            html: '<%= settings.app %>/index.html',
            options: {
                // This is the folder which holds our build.
                dest: '<%= settings.dist %>',
                // This is the temp folder, which is used by "usemin", to prepare the build.
                // It needs to be cleaned when finished.
            }
        },

我注册了我的任务：

grunt.registerTask('build', [
        'clean:dist',
        'html2js:app',
        'useminPrepare',
        'concat:generated',
        'cssmin:generated',
        'uglify:generated',
        'usemin',
        'copy:dist',
        'htmlmin:dist',
        // 'clean:tmp'
    ]);

如何添加模板文件以便被useminprepare选中？任何想法？

这是我的所有文件：

module.exports = function(grunt) {

    // Load grunt tasks automatically.
    require('load-grunt-tasks')(grunt);

    // Configurable paths for the application.
    var appConfig = {
        app: require('./bower.json').appPath || 'src',
        dist: 'dist'
    };

    grunt.initConfig({

        settings: appConfig,

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

        html2js: {
            app: {
                options: {
                    htmlmin: {
                        collapseBooleanAttributes: true,
                        collapseWhitespace: true,
                        removeAttributeQuotes: true,
                        removeComments: true,
                        removeEmptyAttributes: true,
                        removeRedundantAttributes: true,
                        removeScriptTypeAttributes: true,
                        removeStyleLinkTypeAttributes: true
                    }
                },
                src: [ '<%= settings.app %>/app/**/*.tpl.html' ],
                dest: '.tmp/concat/js/templates-app.js'
            }
        },

        useminPrepare: {
            html: '<%= settings.app %>/index.html',
            options: {
                // This is the folder which holds our build.
                dest: '<%= settings.dist %>',
                // This is the temp folder, which is used by "usemin", to prepare the build.
                // It needs to be cleaned when finished.
            }
        },

        usemin: {
            html: '<%= settings.dist %>/index.html'
        },

        concat: {
            environment: {
                src: ['.tmp/concat/js/app.js', '.tmp/concat/js/templates-app.js'],
                dest: '.tmp/concat/js/app.js'
            }
        },

        copy: {
            dist: {
                files: [
                    { 
                        src: '<%= settings.app %>/index.html', 
                        dest: '<%= settings.dist %>/index.html'
                    },{
                        expand: true,
                        cwd: '<%= settings.app %>/assets',
                        src: ['**'],
                        dest: '<%= settings.dist %>/assets'
                    },{
                        // Set working folder - root to copy.
                        // cwd: '<%= settings.app %>/app', 
                        // Copy all template files and subfolders.
                        // src: '**/*.tpl.html', 
                        // Destination folder.
                        // dest: '<%= settings.dist %>/app',
                        // Required when using cwd.
                        // expand: true
                    }
                ]
            }
        },

        // Minifies everything after they have been copied.
        htmlmin: {
            dist: {
                options: {
                    collapseWhitespace: true,
                    conservativeCollapse: false,
                    collapseBooleanAttributes: true,
                    removeCommentsFromCDATA: true,
                    removeOptionalTags: true
                },
                files: [{
                    expand: true,
                    cwd: '<%= settings.dist %>',
                    src: ['*.html', '**/*.tpl.html'],
                    dest: '<%= settings.dist %>'
                }]
            }
        },

        /**
         * karma
         */

        karma: {
            unit: {
                configFile: 'karma/karma.conf.js'
            }
        }
    });

    grunt.registerTask('build', [
        'clean:dist',
        'html2js:app',
        'useminPrepare',
        'concat:generated',
        'cssmin:generated',
        'uglify:generated',
        'usemin',
        'copy:dist',
        'htmlmin:dist',
        // 'clean:tmp'
    ]);

    grunt.registerTask('test', [
        'karma:unit'
    ]);
};

Answer 1

我正在为你遇到同样的问题而苦苦挣扎（我在吞咽，但是相同的概念）。

我取得了一些成功，是将一个空的templates.js文件添加到index.html文件中，在运行use-min之前，我使用grunt/gulp-angular-templates将模板放入templates.js文件中。这样当use-min运行时，它已经有了对模板文件的引用，并成功地将模板连接到其余的js中。