如何使用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

       

网上收集的解决方案 "如何使用grunt连接angularjs文件"

根据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 。

你可以考虑这个解决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不工作,你的问题可能会解决

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

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

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