如何使用 grunt 丑化 Angular 项目？答案

【问题标题】：How to uglify an angular project using grunt?如何使用 grunt 丑化 Angular 项目？
【发布时间】：2017-03-30 22:28:03
【问题描述】：

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

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

通过这种逻辑，我设法创建了相关第 3 方库（节点模块）的单个“丑化”版本，但我无法为我编写的模块做同样的事情。

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

例如：

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

终于可以睡觉了。

【讨论】：

【解决方案2】：

首先要检查的是，您实际上在代码中的任何地方都使用了 DI 模式，因为函数参数将在 uglification 期间被替换，因此不再被解析。

ControllerName.$inject = ['component']

或者

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

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

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

【讨论】：

感谢您的输入，“明确指定文件顺序”是指连接文件的顺序吗？我假设 concat 函数按照我写的顺序添加文件。
应该，是的。我没有尝试过您使用的库，但 gulp-concat 和类似的。您是否尝试过连接它而不只是为了验证订单而提升？它可能只是一个丑化参数替换错误。您的用例绝不是独一无二的，并且可能是人们使用它的最常用方式。
好吧，我已经尝试包含连接文件（没有 ngannotate/uglify 版本），但它是相同的......这意味着顺序是问题。