Grunt 的 Uglify 是否破坏了我的 Angularjs 代码？答案

【问题标题】：Is Grunt's Uglify breaking my Angularjs code?Grunt 的 Uglify 是否破坏了我的 Angularjs 代码？
【发布时间】：2016-09-19 19:14:15
【问题描述】：

所以，我是 Grunt 的新手，我正在制作一个小应用程序来测试 watch、concat、uglify 和 cssmin 插件。

我正在连接我的 JS 代码并丑化连接的文件。但我的控制台上出现“错误：[ng:areq]”。如果我单独调用我的 JS 文件而不使用 uglify 和 concat，它可以正常工作。

这是我的代码：

index.html

<!DOCTYPE html>
<html lang="en" ng-app="ezSeguros">
<head>
    <meta charset="UTF-8">
    <title>Gestión de Seguros</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <!-- Styles -->
    <link rel="stylesheet" href="build/css/styles.min.css" />
</head>
<body>
    <div class="container">
        <div class="row" ng-controller="InputController as nameCtrl">
            <input type="text" ng-change="nameCtrl.showName(name)" ng-model="name" />
        </div>
    </div>
    <!-- jQuery -->
    <script src="assets/libs/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/libs/bootstrap.min.js"></script>
    <!-- Angular -->
    <script src="assets/libs/angular.min.js"></script>
    <!-- Scripts -->
    <script src="build/js/scripts.min.js"></script>
</body>
</html>

app.js

angular
    .module('ezSeguros',[]);

controller.js

function showCtrl() {
    this.showName = function(name){
        console.log(name);
    }
}

angular
    .module('ezSeguros',[])
    .controller('InputController',[showCtrl]);

Gruntfile.js

module.exports= function(grunt){

    // Project configuration. 
    grunt.initConfig({
        watch: {
            js: {
                files: ['app/**/*.js'],
                tasks: ['concat:js','uglify'],
            },
            css: {
                files: ['assets/css/custom/**/*.css'],
                tasks: ['concat:css','cssmin'],
            },
        },
        concat: {
            options: {
                banner: '(function () {',
                separator: '})(); (function () {',
                footer: '})();'
            },
            js: {
                src: ['assets/js/**/*.js','app/**/*.js'],
                dest: 'build/js/scripts.js',
            },
            css: {
                src: ['assets/css/custom/**/*.css'],
                dest: 'build/css/styles.css',
            },
        },
        uglify: {
            options: {
                mangle: false
            },
            scripts: {
                files: {
                    'build/js/scripts.min.js': ['build/js/scripts.js']
                }
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'build/css/styles.min.css': ['build/css/styles.css']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask('default',['concat','uglify','cssmin','watch']);

};

这就是错误本身：

https://docs.angularjs.org/error/ng/areq?p0=InputController&p1=not%20a%20function,%20got%20undefined

谢谢！

【问题讨论】：

这就是grunt-ng-annotate 存在的原因之一。

标签： angularjs gruntjs grunt-contrib-watch grunt-contrib-uglify

【解决方案1】：

咕噜声不是这里的问题。您正在引导一个新的 Angular 模块两次。

例子：

angular
  .module('ezSeguros') // Your new angular module is already defined in app.js
  .controller('InputController',[showCtrl]);

另见：

Angular 模块：Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

角度缩小最佳实践：Angularjs minify best practice

【讨论】：