如何使用Grunt对Angular项目进行代码混淆（Uglify）？

Question

我正在尝试部署一个名为meanjs的项目，但我不知道如何使用grunt压缩，合并和混淆它。

以下是我目前了解到的内容：

1. 需要运行concat -> ngAnnotate -> uglify（否则代码无法运行）。 2. 需要按依赖顺序合并（否则它将无法运行）。

根据这个逻辑，我已经成功创建了相关第三方库（节点模块）的单个“uglified”版本，但是对于我编写的模块，我无法做到同样的事情。

我尝试使用应该可以根据依赖项重新排序文件的concat工具（grunt-concat-in-order、grunt-concat-dependencies、grunt-concat-deps），但没有帮助。只有缺少模块/声明的错误。

我尝试重新排列应该连接的js文件，但每次都会出现其他问题，网站部分加载（如果最好的话） 。

是否有一些根据其依赖关系或一般逻辑将Angular文件连接的方法，在此方法下我应该重新排列它们?

谢谢。

- Daniel

Answer 1

找到了！ 显然JS和Angular在模块/指令声明的末尾缺少';'时是灵活的。 我已经检查了整个代码，并在适当的位置添加了缺少的';'。

例如：

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

最后可以去睡觉了。

*原文： Angular module().factory() is not a function after concat (gulp)（感谢Max Yari）

- Daniel

Answer 2

首先要检查的是你是否在代码中到处使用了 DI 模式，因为函数参数将在混淆过程中被替换，因此不再被解析。

ControllerName.$inject = ['component'] 

或者

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

当你完成这个步骤后，可以检查是否可以明确指定文件顺序，例如（伪代码）：

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

- simme

---

感谢您的输入， “明确指定文件顺序”是指文件连接的顺序吗？我认为concat函数会按照我编写的顺序添加文件。 - Daniel

应该可以，我没有尝试过你使用的确切库，但是gulp-concat和类似的库。你是否尝试过不升级直接连接它以验证顺序？它可能只是一个混淆参数替换错误。你的用例绝不是唯一的，并且很可能是人们最常用的方式。 - simme

嗯，我已经尝试包含连接的文件（不包括ngannotate / uglify版本），但是结果一样...这意味着顺序是问题所在。 - Daniel