Angular grunt build(来自yeoman)打破了我的应用程序

时间:2013-11-20 14:31:46

标签: angularjs gruntjs grunt-usemin

从我得到的/dist文件夹运行构建后

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=ourname&p1=Error%3A…(http%3A%2F%2Flocalhost%3A8085%2Flib%2Fangular%2Fangular.min.js%3A32%3A462) 

我所做的一切似乎都解决了这个问题

这是笨拙的任务流程 - 从自耕农角度生成器中调整为1:1

module.exports = function(grunt){
    require('load-grunt-tasks')(grunt);
    require('time-grunt')(grunt);

    grunt.initConfig({
        //pkg: grunt.file.readJSON('package.json'),
        yeoman: {
            // configurable paths
            app: require('./bower.json').appPath || 'app',
            dist: 'dist'
        },
        coveralls:{
        options:{
          coverage_dir:'coverage'
        }
         },
        jshint:{
            files:['app/js/**/*.js', 'Gruntfile.js'],
            options:grunt.file.readJSON('.jshintrc')


        },
        watch:{
            styles: {
                files: ['<%= yeoman.app %>/css/{,*/}*.css'],
                tasks: ['copy:css', 'autoprefixer']
            },
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    '<%= yeoman.app %>/{,*/}*.html',
                    '.tmp/css/{,*/}*.css',
                    '{.tmp,<%= yeoman.app %>}/js/{,*/}*.js',
                    '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
                ]
            }
        },
        autoprefixer: {
            options: ['last 1 version'],
            dist: {
                files: [{
                    expand: true,
                    cwd: '.tmp/styles/',
                    src: '{,*/}*.css',
                    dest: '.tmp/styles/'
                }]
            }
        },
        connect: {
            options: {
                port: 9000,
                // Change this to '0.0.0.0' to access the server from outside.
                hostname: 'localhost',
                livereload: 35729
            },
            livereload: {
                options: {
                    open: true,
                    base: [
                        '.tmp',
                        '<%= yeoman.app %>'
                    ]
                }
            },
            test: {
                options: {
                    port: 9001,
                    base: [
                        '.tmp',
                        'test',
                        '<%= yeoman.app %>'
                    ]
                }
            },
            dist: {
                options: {
                    base: '<%= yeoman.dist %>'
                }
            }
        },
        clean: {
            dist: {
                files: [{
                    dot: true,
                    src: [
                        '.tmp',
                        '<%= yeoman.dist %>/*',
                        '!<%= yeoman.dist %>/.git*'
                    ]
                }]
            },
//            server: '.tmp'
        },
            rev: {
                dist: {
                    files: {
                        src: [
                            '<%= yeoman.dist %>/js/{,*/}*.js',
                            '<%= yeoman.dist %>/css/{,*/}*.css',
                            '<%= yeoman.dist %>/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                            '<%= yeoman.dist %>/css/fonts/*'
                        ]
                    }
                }
            },
            useminPrepare: {
                html: '<%= yeoman.app %>/index.html',
                options: {
                    dest: '<%= yeoman.dist %>',
                    html: {
                        steps: {'js': ['concat','ngmin']},
                        post: {}
                    }
                }
            },
            usemin: {
                html: ['<%= yeoman.dist %>/{,*/}*.html'],
                css: ['<%= yeoman.dist %>/css/{,*/}*.css'],
                options: {
                    assetsDirs: ['<%= yeoman.dist %>']
                }
            },
            imagemin: {
                dist: {
                    files: [{
                        expand: true,
                        cwd: '<%= yeoman.app %>/img',
                        src: '{,*/}*.{png,jpg,jpeg}',
                        dest: '<%= yeoman.dist %>/img'
                    }]
                }
            },
            svgmin: {
                dist: {
                    files: [{
                        expand: true,
                        cwd: '<%= yeoman.app %>/img',
                        src: '{,*/}*.svg',
                        dest: '<%= yeoman.dist %>/img'
                    }]
                }
            },
            cssmin: {
                // By default, your `index.html` <!-- Usemin Block --> will take care of
                // minification. This option is pre-configured if you do not wish to use
                // Usemin blocks.
                // dist: {
                //   files: {
                //     '<%= yeoman.dist %>/styles/main.css': [
                //       '.tmp/styles/{,*/}*.css',
                //       '<%= yeoman.app %>/styles/{,*/}*.css'
                //     ]
                //   }
                // }
            },
            htmlmin: {
                dist: {
                    options: {
                        /*removeCommentsFromCDATA: true,
                         // https://github.com/yeoman/grunt-usemin/issues/44
                         //collapseWhituseminPrepareespace: true,
                         collapseBooleanAttributes: true,
                         removeAttributeQuotes: true,
                         removeRedundantAttributes: true,
                         useShortDoctype: true,
                         removeEmptyAttributes: true,
                         removeOptionalTags: true*/
                    },
                    files: [{
                        expand: true,
                        cwd: '<%= yeoman.app %>',
                        src: ['*.html', 'partials/*.html'],
                        dest: '<%= yeoman.dist %>'
                    }]
                }
            },
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.app %>',
                    dest: '<%= yeoman.dist %>',
                    src: [
                        '*.{ico,png,txt}',
                        'lib/**/*',
                        'img/{,*/}*.{gif,webp}',
                        'fonts/*',
                        'languages/*'
                    ]
                }, {
                    expand: true,
                    cwd: '.tmp/img',
                    dest: '<%= yeoman.dist %>/img',
                    src: [
                        'generated/*'
                    ]
                }]
            },
            styles: {
                expand: true,
                cwd: '<%= yeoman.app %>/css',
                dest: '.tmp/css/',
                src: '{,*/}*.css'
            }
        },
        concurrent: {
            server: [
                'copy:styles'
            ],
            test: [
                'copy:styles'
            ],
            dist: [
                'copy:styles',
                'imagemin',
                'svgmin',
                'htmlmin'
            ]
        },
//        cdnify: {
//            dist: {
//                html: ['<%= yeoman.dist %>/*.html']
//            }
//        },
        ngmin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '.tmp/concat/js',
                    src: '*.js',
                    dest: '.tmp/concat/js'
                }]
            }
        },
        uglify: {
            dist: {
                options:{
                    compress:false,
                    mangle:false
                },
                files: {
                    '<%= yeoman.dist %>/js/scripts.js': [
                        '<%= yeoman.dist %>/js/scripts.js'
                    ]
                }
            }
        },


//        concat:{
//            options:{
//                seperator:';'
//            },
//            dist:{
//                src :['app/js/**/*.js', 'app/lib/**/*.js'],
//                dest :'dist/app/js/<%pkg.name%>.js'
//
//            }
//        },
        exec:{
            instrument:{
                cmd: function(){
                    return 'istanbul instrument app/js -o app/instrumentjs';
                }

            },
            djangoUp:{
              cmd: function(){
                  var command = 'workon stokeet-api  && cd ../stokeet-api/ && python manage.py runserver> /dev/null 2>&1 && cd ../angular/ & ';
                  return command;
              }
            },

            webserverUp:{
              cmd: function(){
                  var command = 'cd ../angular/ && node ./scripts/web-server.js > /dev/null 2>&1 &';
                  return command;
              }

            }
        },
        karma:{
            unit:{
                configFile:'config/karma.conf.js',
                autoWatch:true,
                browsers:['PhantomJS']
            },
            ci:{
                configFile:'config/karma.conf.js',
                singleRun:true,
                autoWatch:false,
                browsers:['Firefox','PhantomJS']
            },
            buildTest:{
                configFile:'config/karma.conf.js',
                singleRun:true,
                autoWatch:false,
                browsers:['PhantomJS']
            }

        }



    });
    grunt.registerTask('coverage',['coveralls']);
    grunt.registerTask('default',['jshint']);
    grunt.registerTask('instrument',['exec: instrument']);
//    grunt.registerTask('concat',['concat']);
    grunt.registerTask('dev_up',['exec:djangoUp', 'exec:webserverUp']);
    grunt.registerTask('test',[
                            'clean:server',
                            'concurrent:test',
                            'autoprefixer',
                            'connect:test',
                            'karma:buildTest']),
    grunt.registerTask('build', [
                            'clean:dist',
                            'useminPrepare',
                            'concurrent:dist',
                            'autoprefixer',
                            'concat',

                            'copy:dist',
                            'ngmin',
                            'cssmin',
                            'uglify',
                            'rev',
                            'usemin'
    ]);
    grunt.registerTask('server', function (target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'clean:server',
            'concurrent:server',
            'autoprefixer',
            'connect:livereload',
            'watch'
        ]);
    });

};

您可以看到我尝试覆盖usemin默认流程,但这没有帮助

我怀疑这与已知的角度缩小问题有关,但是因为ngmin在这里运行,并且我的所有代码(不确定插件)都尊重角度缩小安全数组符号我不确定。

任何想法?我很乐意为你提供帮助

5 个答案:

答案 0 :(得分:2)

在Angularjs中使用usemin 2.0.x和ngmin进行构建时,我会尝试简要解释这个问题(根据我的经验,我可能错了,如果有,请纠正我):

Build grunt任务中的正常流程是在usemin和其他人之前执行ngmin,让代码注入这样的代码:

...
angular.module("Config",[])
    .config(["$httpProvider","CONSTANTS","ERRORS","HEADERS",function(a,b,c,d){var
...

usemin 0.1.x仅使用'concat',但版本2.0.x使用'concat'和'uglifyjs',因此,在连接代码后,它会再次更改javascript代码,这会破坏ngmin,就像你一样可以在以下示例中看到:

...
angular.module("Config",[])
    .config(function(a,b,c,d){var
...

所以你必须停止在useminPrepare中定义流程,如下所示:

useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
            dest: '<%= yeoman.dist %>',
            flow: {
                steps: {'js': ['concat']},
                post: {}
            }
        }
    },

修改 您可以在grunt任务中添加任务:

grunt.registerTask('build', [ 
    'clean:dist', 
    'jshint', 
    'useminPrepare', 
    'imagemin', 
    'cssmin', 
    'ngmin', 
    'uglify', 
    'rev', 
    'usemin'
])

希望它有所帮助!

答案 1 :(得分:2)

我在yo angular设置后面对同样的问题而没有任何修改。

以下讨论帮助我解决了这个问题: https://github.com/DaftMonk/generator-angular-fullstack/issues/164

简而言之:

搜索

<!-- build:js scripts/vendor.js -->

并将其更改为

<!-- build:js(app/..) scripts/vendor.js -->

答案 2 :(得分:1)

我认为默认的GruntFile.js在Yeoman中有所改变,因为这个问题得到了解答。

这对我有用:

取消注释掉以下uglify块并添加了mangle:false选项。

uglify: {
   options:{mangle:false},
   dist: {
     files: {
       '<%= yeoman.dist %>/scripts/scripts.js': [
         '<%= yeoman.dist %>/scripts/scripts.js'
       ]
     }
   }
},

然后我评论了ngmin行(无论如何都要继续运行)。

结果是非破坏的js相当大,但运行我的角度代码很好。最终我认为ngmin足够聪明,可以更无缝地处理事情,但在那之前,我可以使用额外的字节。

答案 3 :(得分:0)

如果你只提供文件(grunt服务器),一切都有效吗? 所以:角度这样没有问题吗?

您是否已阅读链接错误页面? http://docs.angularjs.org/error/ $注射器:modulerr P0 = ourname&安培; P1 =错误:%E2%80%A6(HTTP:%2F%2Flocalhost:8085%2Flib%2Fangular%2Fangular.min.js:32:462)

它告诉您,我们的“ourname”模块存在问题。

你们有一些代码吗?

我不太确定,这会改变什么,但您也可以将其定义为:

useminPrepare: {
            html: '<%= yeoman.app %>/index.html',
            options: {
                dest: '<%= yeoman.dist %>',
                flow: {
                    steps: {'js': ['concat','ngmin']},
                    post: {}
                }
            }
        },

https://github.com/yeoman/grunt-usemin#flow 你错过了“流程”吗?

也许其中一个问题有助于找到解决方案;)

答案 4 :(得分:-3)

如果您使用Yeoman构建角度应用程序。

只需输入

即可
yo doctor

这将帮助您确定应用程序中存在的所有问题。

Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✖ Node.js version

Your Node.js version is outdated.
Upgrade to the latest version: https://nodejs.org

✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version

Found potential issues on your machine :(