如何使用grunt连接angularjs文件

我有一个angularjs应用程序。 我想连接所有的angularjs文件到单个文件。 我正在使用grunt并search关于连接grunt插件。 我发现有grunt-contrib-concat和grunt-concat-in-order插件。

但是，我无法find关于如何连接依赖文件的例子的答案。 请让我知道如何使用grunt-concat-in-order插件指定依赖关系。

注意：在grunt-concat-in-order文件中，它指出了指定framework.require（“moduleA”）。 但不知道什么框架。 有没有什么有效的方法来指定一个文件中的依赖关系？

在此先感谢Rajaguru

Answer 1

根据grunt-contrib-concat，它将按顺序连接文件https://github.com/gruntjs/grunt-contrib-concat#usage-examples

不过，我build议你使用grunt-usemin来完成这个工作，这与grunt-wiredep一起工作得很好（你需要使用bower，它可以解决你的依赖问题）

为了做到这一点，我build议你检查generator-angular和generator-angular-fullstack来查看他们正在使用的插件。

对于@jsbueno，你不回答这个问题。 但是你想要的是ng-annotate 。

Answer 2

你可以考虑这个解决scheme

1. 将模块声明分离为xxx.module.js

2. 在grunt-contrib-concat中修改configuration如下：

   放置在grunt.initConfig之外

var clientApp ='./app/';

---

grunt-contrib-concatconfiguration

 dist: {// grab module first, state the second src: [ clientApp+'**/*.module.js', clientApp+'**/*.state.js', clientApp+'**/*.js' ], dest: 'dist/<%= pkg.name %>.js' } 

我使用状态，所以我必须在尝试导航到任何状态之前定义状态。 这是预览我的代码，模块声明是在任何事情之前声明的拳头，然后是我的状态。 甚至缩小不会造成任何问题。

我希望这可以帮助你。 我遵循这个johnpapa的风格指南 ，如果我的解决scheme不工作，你的问题可能会解决

Answer 3

我不知道你在grunt中的选项 – 但是Angular.js代码依赖于用来声明控制器，工厂等的函数的具体名字。

也就是说，当你声明一个像myModule.controler(function ($scope) {...})的控制器 – $范围必须有实际的variables名称 – 一个javascript缩放工具不知道这会改变variables名称为一个较短的，它会通过angular度无法识别。

所以，除非你能find一些特定的grunt选项来避免改变函数和参数名称（还有lilelyvariables），否则你不能将它应用到angular.js项目中。 Gulpjs有select只是连接他的JavaScript文件在一起，没有名称mangling，从而避免了这个问题。