简体   繁体   English

如何使用grunt uglify角项目?

[英]How to uglify an angular project using grunt?

I'm trying to deploy a meanjs project but can't seem to figure out how to minify,concat&uglify the project using grunt. 我正在尝试部署一个meanjs项目,但似乎无法弄清楚如何使用grunt缩小,连接和uglify项目。

What I've found out so far : 到目前为止我发现了什么:

  1. Need to run concat -> ngAnnotate -> uglify (else code won't run) 需要运行CONCAT -> ngAnnotate ->丑化(否则代码将无法运行)
  2. need to concat in dependency order (else it won't run) 需要以依赖顺序连接(否则它不会运行)

With this logic I've managed to create a single 'uglified' version of the relevant 3rd party libraries (node modules), but I'm unable to do the same for the modules I've written. 有了这个逻辑,我设法创建了相关第三方库(节点模块)的单个“uglified”版本,但我不能对我编写的模块做同样的事情。

I've tried using concat tools that are supposed to reorder the files according to dependencies (grunt-concat-in-order, grunt-concat-dependencies, grunt-concat-deps) but nothing helped. 我已经尝试使用concat工具,这些工具应该根据依赖项重新排序文件(grunt-concat-in-order,grunt-concat-dependencies,grunt-concat-deps),但没有任何帮助。 Just errors of missing modules/declarations. 只是缺少模块/声明的错误。

I've tried reordering the js files that should be concatenated, and each time something else is missing and the site loads partially (at best). 我已经尝试重新排序应该连接的js文件,每次缺少其他东西并且网站部分加载(充其量)。 reordering the files according to the order they appear in the compiled header doesn't help. 根据文件在编译头中出现的顺序重新排序文件没有帮助。

Is there something that concats Angular files according to their dependencies or or a general logic in which I should reorder them? 是否存在根据其依赖关系或根据我应该重新排序它们的一般逻辑来连接Angular文件的东西?

Thanks. 谢谢。

FOUND IT! 找到了! apparently JS and Angular are flexible with missing ';' 显然JS和Angular是灵活的,缺少';' in the end of module/directive declarations. 在模块/指令声明的最后。 I've went through the entire code and added missing ';' 我已经完成了整个代码并添加了缺失';' in the appropriate places. 在适当的地方。

For example: 例如:

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

Finally can go to sleep. 终于可以去睡觉了。

*original post: Angular module().factory() is not a function after concat (gulp) (cheers to Max Yari) *原帖: Angular module()。factory()不是concat之后的函数(gulp) (为Max Yari喝彩)

The first thing to check is that you actually use the DI pattern everywhere in your code as the function parameters will be replaced during uglification and thus won't be resolved let anymore. 首先要检查的是你实际上在代码中的任何地方都使用了DI模式,因为函数参数将在uglification期间被替换,因此将不再被解析。

ControllerName.$inject = ['component'] 

Or 要么

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

When you've done that, check if you may explicitly specify file order like this (pseudo code): 完成后,检查是否可以明确指定文件顺序(伪代码):

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM