我如何添加另一个生成的javascript文件，由usemin grunt进程拾取

Question

我正在为Angular JS项目中的Gruntfile而挣扎。

在这一步中，我把所有的html模板变成angular 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拾取?ideeas吗?

这是我所有的文件:

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

我也遇到了和你一样的问题(我在gulp中，但概念相同)。

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