未捕獲的對象與咕嚕

縮小文件簡單角應用時我有一個像這樣定義的簡單角應用程式：未捕獲的對象與咕嚕

的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的數組語法準備了縮小過程中的變量變形。

然而，當我再串聯所有這些文件，並使用咕嚕它們最小化，像這樣：

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陣列用於在縮小之前定義控制器依賴關係的語法？

來源

2014-06-26 Tom

我在你的app.js文件中發現的一個錯誤是，你似乎沒有阻止變量損壞$interpolateProvider。在app.min.js中，它簡單地縮小爲a關於哪個AngularJS什麼都不知道。

這可能是問題所在。

有一個grunt-ngmin插件可以爲您自動完成變量自動補償。這非常方便。

我通過使用Yeoman Angular Generator瞭解它。這個生成器還提供了一個非常有用的Gruntfile.js，它顯示了grunt-ngmin的用法。

來源

2014-06-26 08:40:36 DanEEStar

有趣的是，我可以使用grunt-ngmin作爲單個連接文件，而不是指定多個控制器和指令（PS。示例中的服務在哪裏？）？另外，我想知道它是否需要處理配置依賴關係。 – Tom

我不得不承認，在角度發生器的項目設置它只適用於一切。它將在已經連接的js文件上運行ngmin步驟。這個評論很難解釋。你應該看看Angular Generator的Gruntfile。 – DanEEStar

未捕獲的對象與咕嚕

回答

相關問題