如何使用 grunt 丑化 angular 项目？

Question

我正在尝试部署一个 meanjs 项目，但似乎无法弄清楚如何使用 g运行t 缩小、合并和丑化项目。

到目前为止我发现了什么：

1. 需要运行 concat -> ngAnnotate -> uglify（否则代码不会运行）
2. 需要按依赖顺序连接（否则不会运行）

根据这个逻辑，我已经设法创建了一个 'uglified' 版本的相关第三方库（节点模块），但我无法对我编写的模块执行相同的操作。

我试过使用 concat 工具，这些工具应该根据依赖项（grunt-concat-in-order、grunt-concat-dependencies、grunt-concat-deps）对文件重新排序，但没有任何帮助。只是缺少 modules/declarations.

的错误

我已经尝试重新排序应该连接的 js 文件，但每次都缺少其他内容并且网站部分加载（充其量）。 根据文件在已编译文件中出现的顺序重新排序 header 没有帮助。

有没有什么东西可以根据文件的依赖关系或我应该重新排序的一般逻辑来连接 Angular 文件？

谢谢。

Answer 1

首先要检查的是，您实际上在代码中到处都使用了 DI 模式，因为函数参数将在丑化过程中被替换，因此不会再被解析。

ControllerName.$inject = ['component'] 

或者

angular.module('module') 
   .controller(['module', function (module) { /*... */}) ;

完成后，检查您是否可以像这样明确指定文件顺序（伪代码）：

['module1_decl_file.js','module2_decl_file.js', '*.js','**/*.js']

Answer 2

找到了！ 显然 JS 和 Angular 很灵活，缺少 ';'在 module/directive 声明的末尾。 我浏览了整个代码并添加了缺失的“；”在适当的地方。

例如：

angular.module('core').filter('xyz', [function() {
    .....
}])

终于可以睡觉了

*原文post: （为 Max Yari 欢呼）