0

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 で取得するにはどうすれば追加できますか? アイデアはありますか?

ここにすべての私のファイルがあります:

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'
    ]);
};
4

1 に答える 1

0

私はあなたと同じ問題に苦しんでいました (私はぐったりしていましたが、同じ概念でした)。

私がある程度成功したのは、空の templates.js ファイルを index.html ファイルに追加することでした。use-min を実行する前にgrunt/gulp-angular-templates、テンプレートを templates.js ファイルに入れていました。そのようにして use-min を実行すると、すでにテンプレート ファイルへの参照があり、テンプレートが残りの js に正常に連結されます。

于 2014-11-13T14:39:50.900 に答える