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 grunt插件来填充Angular缓存。但是，此方法会在我的名为 templates-main 的开发工作流程中生成 new 模块。

为了实现这一点，当我构建时，我需要“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"
                                ]);

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

Answer 2

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

这样您就不应该动态更改依赖关系。

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

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

2 个答案: