Question

我有一个简单的Angular应用程序，其定义如下：

的index.html

<body ng-app="waApp">
    <div ng-controller="IndexController">
        <h3>{[ test ]}</h3>
    </div>
</body>

waApp.js

(function() {

  var waApp = angular.module('waApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[');
    $interpolateProvider.endSymbol(']}');
  });

})();

IndexController.js

(function() {

  var waApp = angular.module('waApp');

  waApp.controller('IndexController', ['$scope', function($scope) {
    $scope.test = 'Angular Works, and Grunt too.';
  }]);

})();

正如您所看到的，我已经准备好在缩小期间使用Angular的数组语法进行变量修改，同时定义控制器的依赖关系。

然而，当我连接所有这些文件并使用Grunt缩小它们时，就像这样：

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
      options: {
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
        src: ['src/browser/js/*.js', 'src/browser/js/**/*.js'],
        dest: 'src/browser/public/js/app.js'
      }
    },

    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
        sourceMap: true,
        preserveComments: false,
        mangle: {
          except: ['angular']
        }
      },
      dist: {
        files: {
          'src/browser/public/js/app.min.js': ['<%= concat.dist.dest %>']
        }
      }
    }

  });

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

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

我在Chrome的调试器控制台中收到以下错误：

Uncaught object head.js:18
(anonymous function) head.js:18
(anonymous function) head.js:46
q head.js:19
e head.js:45
ec head.js:48
c head.js:30
dc head.js:30
Wc head.js:29
(anonymous function) head.js:223
a head.js:156
(anonymous function) head.js:43
q head.js:19
c

head.js只是一个单独的javascript文件，我存储angular.min.js（来自官方来源）。当我不缩小我的连接javascript时，我不会收到此错误。

为了完整性，以下是我的连接和缩小的连接javascript文件：

app.js （工作）

/*! whataddress - v0.0.1-1 - 2014-06-26 */
(function() {

  var waApp = angular.module('waApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[');
    $interpolateProvider.endSymbol(']}');
  });

})();
(function() {

  var waApp = angular.module('waApp');

  waApp.controller('IndexController', ['$scope', function($scope) {
    $scope.test = 'Angular Works, and Grunt too.';
  }]);

})();

app.min.js （导致错误）

/*! whataddress 26-06-2014 */

!function(){angular.module("waApp",[],function(a){a.startSymbol("{["),a.endSymbol("]}")})}(),function(){var a=angular.module("waApp");a.controller("IndexController",["$scope",function(a){a.test="Angular Works, and Grunt too."}])}();
//# sourceMappingURL=app.min.js.map

为什么会发生这种情况，即使我在缩小之前使用Angular的数组语法来定义控制器依赖？

Answer 1

我在你的app.js文件中发现的一个错误是你似乎没有阻止$interpolateProvider的变量修改。在app.min.js中，它简化为a，关于AngularJS什么都不知道。

这可能是问题所在。

有grunt-ngmin插件可以自动为变量修改。这很方便。

我使用Yeoman Angular Generator了解它。这个生成器还提供了一个非常有用的Gruntfile.js，它显示了grunt-ngmin的用法。

使用Grunt缩小简单的Angular应用程序时未捕获的对象

1 个答案: