angularjs - Grunt.js 用于 Angular.js 依赖注入(inject)管理

Question

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

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

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

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

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

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

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

提前致谢

Answer 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"
                                ]);

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