AngularJS 的开发模式使用 GruntJS

【问题标题】：Development mode for AngularJS using GruntJSAngularJS 的开发模式使用 GruntJS
【发布时间】：2014-08-26 13:35:45
【问题描述】：

我有几个产品是从 yeoman 角度生成器开始的，它是一个非常好的开发设置。我找不到好的解决方案是设置开发/生产模式标志。

我们当然会使用一些我们只希望在生产中使用的工具，因此拥有可以同时使用内联 JavaScript 和/或 HTML 文件的 prod/dev 变量将非常有用。我之前在网上搜索过解决方案，但没有找到任何有用的东西。

最终，我正在寻找一个在 AngularJS 设置中使用的好解决方案，最好通过 grunt serve 和/或 build run 设置。其他团队在这里做什么？

【问题讨论】：

标签： javascript angularjs gruntjs yeoman

【解决方案1】：

我正在使用ng-constant。它会创建一个 .js 文件，其中包含您选择的一些角度常数。

grunt.initConfig({
    ...
    ngconstant: {
        options: {
            name: 'config',
            dest: '<%= yeoman.app %>/scripts/config.js'
        },
        development: {
            constants: {
                myVariable: 'it is development'
            }
        },
        production: {
            constants: {
                myVariable: 'it is production'
            }
        }
    }
});

然后将其添加到您的任务中：

grunt.registerTask('serve', [
    ...
    'ngconstant:development',
    ...
]);

并且不要忘记在您的 html 中包含这个 /scripts/config.js 文件并将“配置”注入您的应用程序。

var app = angular.module('myApp', [
    'config',
    ...
]);

【讨论】：

谢谢，这正是我正在寻找的解决方案类型。刚刚在服务和构建中都尝试过，效果很好。