如何使用grunt连接angularjs文件

Question

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

但是，我无法找到关于如何将文件与依赖项连接的示例的答案。 如果我使用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

但我建议您使用grunt-usemin来完成这项工作，这与grunt-wiredep配合得很好 （你需要使用凉亭，它解决了你的依赖问题）

为了简短起见，我建议您查看generator-angular和generator-angular-fullstack以查看他们使用的插件。

至@jsbueno，您没有回答这个问题。但你想要的是ng-annotate。

Answer 2

你可以考虑这个解决方案

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

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

   将此放在 grunt.initConfig

之外

  

var clientApp =＆＃39; ./ app /＆＃39 ;;

grunt-contrib-concat config

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

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

我希望这对你有所帮助。 我遵循这个johnpapa的风格guide，如果我的解决方案不起作用，你的问题可能会在那里解决

Answer 3

我不知道你在grunt中的选项 - 但是Angular.js代码取决于用于声明其控制器，工厂等的函数的参数的特定名称。

即。当你声明一个控制器时 myModule.controler(function ($scope) {...}) - $ scope必须有实际的变量名称 - 一个不知道这个的javascript minifier工具会将变量名称更改为更短的名称，并且它将通过angular无法识别。

因此，除非你能找到一些特定的grunt选项以避免更改函数和参数名称（以及lilely变量），否则你不能将它应用于angular.js项目。 Gulpjs可以选择将javascript文件连接在一起，而不会出现名称错误，从而避免了这个问题。