角度和咕噜声

Question

我是一个Grunt新手,我正在尝试转换一个Angular应用程序(基于angular-seed)来将它用于CSS/JS concat/minification.我有一个index.html文件,用于定义CSS和JS文件:

<!-- build:css css/myjmh.css -->
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="lib/font-awesome/font-awesome.min.css"/>
<link rel="stylesheet" href="lib/toaster/toaster.css"/>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link rel="stylesheet" href="css/responsive.css"/>
<!-- endbuild -->

...

<!-- build:js js/myjmh.min.js -->
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/fastclick.min.js"></script>
<script src="lib/toaster/toaster.js"></script>
<script src="lib/webshim/modernizr.min.js"></script>
<script src="lib/webshim/polyfiller.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->

我正在尝试使用grunt-usemin及其useminPrepare任务从我的HTML中获取这些值.

这是我的Gruntfile.js:

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        clean: ["dist"],

        copy: {
            main: {
                src: 'app/index.html',
                dest: 'dist/index.html'
            }
        },

        useminPrepare: {
            html: 'app/index.html'
        },

        usemin: {
            html: ['dist/index.html']
        },

        ngmin: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: '.tmp/concat/js',
                        src: '*.js',
                        dest: '.tmp/concat/js'
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-ngmin');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', [
        'copy', 'useminPrepare', 'concat', 'ngmin', 'uglify', 'cssmin', 'usemin'
    ]);
};

使用所有这些设置,将创建一个包含所有工件的"dist"目录,并且所有内容似乎都会正确生成/连接和缩小.但是,当我在浏览器中加载新页面时,出现以下错误:

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=aProvider%20%3C-%20a 

看起来Grunt正在做一些与Angular不能很好搭配的事情.关于这可能是什么的任何想法？

Answer 1

我能够通过关闭uglify中的mangling来解决这个问题:

    uglify: {
        options: {
            report: 'min',
            mangle: false
        }
    }

正如你可能从我的Gruntfile.js中注意到的那样,ngmin已经被使用了,这似乎没什么帮助.

在这里找到答案:https://stackoverflow.com/a/17239358/65681

Answer 2

你需要做两件事之一:

1. 使所有角度代码缩小友好.请参阅:http://docs.angularjs.org/guide/di#dependency-injection_dependency-annotation

2. 使用像这样的工具 grunt-ngannotate