Grunt.js 用于 Angular.js 依赖注入管理答案

【问题标题】：Grunt.js for Angular.js dependency injection managementGrunt.js 用于 Angular.js 依赖注入管理
【发布时间】：2014-04-22 03:21:42
【问题描述】：

我正在使用 Grunt 自动构建我的网络应用程序。我遇到了一个有趣的问题。我有两个选择：1)grunt:dev 和 2)grunt:build

grunt:dev 只做与开发相关的基本任务。我的“主要”Angular 模块如下所示：

var myApp= angular.module('myApp', [
                                "ui.router",
                                "ui.bootstrap",
                                "someDependency",
                                "someDependency2" 
                                ]);

当我想构建时，我会使用grunt:build。我正在使用 html2js grunt 插件来启动 Angular 缓存。但是，此方法会生成一个 new 模块，该模块不在我的开发工作流程中，称为 templates-main。

为了让它工作，当我构建时，我需要“主”模块看起来像：

var myApp= angular.module('myApp', [
                                "ui.router",
                                "ui.bootstrap",
                                "templates-main", //<<< NEW DEPENDENCY
                                "someDependency",
                                "someDependency2" 
                                ]);

有没有推荐的方法来完成这个？如果您包含依赖项，但它不存在，则会导致 Angular 错误。我希望这可以通过 Grunt 实现自动化。

提前致谢

【问题讨论】：

标签： angularjs dependency-injection gruntjs

【解决方案1】：

我想出了一个解决方法。我正在使用 Grunt 的 Concat 模块。这允许您拥有一个带有正则表达式的自定义流程系统：

build: {
    options: {
        process: function(src, filepath) {
            return src.replace(/[/*<%]{4}.*[%>*/]{4}/g, '"templates-main",');
        }
    },
    src: ['src/app/app.js', 'src/app/**/*.js'],
    dest: 'build/app.js'

}

然后我在代码中做了以下操作：

var eeApp = angular.module('eeApp', [
                                "ui.router",
                                "ui.bootstrap",
                                /*<% templates-main %>*/
                                "dashboard"
                                ]);

在正常使用中，块注释会防止代码抛出错误。当模板过程通过时，正则表达式将匹配整个注释块并替换为所需的依赖项。不错！

【讨论】：

【解决方案2】：

我认为最简单的方法是为您的开发构建创建一个空的假模块文件，并在生产构建中使用真正的模板缓存覆盖它。

这样你不应该动态改变依赖关系。

（如果您不想覆盖原始文件，也可以在开发设置中使用 grunt 复制此文件。）

【讨论】：

我试过这条路线。事实证明，如果您使用的是 grunt-contrib-concat 模块，则有一个更简单的现成解决方案。感谢您的意见。