angularjs - 使用 Grunt 预处理和替换环境变量

Question

我有一个使用 grunt 的 Angular 应用程序设置，但我希望能够使用 grunt 作为预处理器来替换变量，但我找不到任何符合我需要的东西。

例如，如果我在配置文件中将主应用程序模块的名称更改为“someAppName”，我只想在各种 html 和 js 文件中使用“ENV.APP_NAME”之类的名称，并将其替换为适当的值对于那个环境。

理想情况下，我希望在这些行中的某处有一个配置文件，作为 .json 文件或使用 module.exports 来公开一个对象，该对象指定不同环境的值:

{
    APP_NAME:{
        dev: "someAppDev",
        prod: "someApp"
    },
    API_BASE:{
        dev: "localhost:8000/",
        prod: "https://www.some-site.com/api/"
    }
}

然后我可以创建一个 grunt 任务并将其传递给“dev”或“prod”，让它运行预处理器并用相应的值替换每个实例。我找到了 https://github.com/STAH/grunt-preprocessor但这些例子令人困惑，我认为这不是我想要的。

有没有这样的东西可以让您创建预处理的环境变量并从外部配置文件中读取它们，或者我是否被迫构建自己的 grunt 插件？有没有人用 grunt 实现过类似的东西？

编辑:我已经开始为这个特定任务构建一个 grunt 插件，一旦它完成并经过测试，我会在 npm 上发布它

Answer 1

使用grunt-ng-constant .

npm 安装这个插件:

npm install grunt-ng-constant --save-dev

然后在 grunt 中写入配置文件:

ngconstant: {
  // Options for all targets
  options: {
    space: '  ',
    wrap: '"use strict";\n\n {%= __ngModule %}',
    name: 'config',
  },
  // Environment targets
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },
    constants: {
      ENV: {
        myvar1: 'Hello from devel',
        myname: 'John Doe'
      }
    }
  },
  production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },
    constants: {
      ENV: {
        myvar1: 'Hello',
        myname: 'John Doe'
      }
    }
  }
},

然后添加到 grunt 任务:

 grunt.task.run([
    'clean:server',
    'ngconstant:development',
    'connect:livereload',
    'watch'
  ]);

运行任务将生成 config.js，其中定义了 gruntfile 中的常量。
然后将 config.js 添加到您的 index.html:

<script src="/scripts/config.js" />

将其注入(inject)您的应用程序:

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

并注入(inject) Controller :

.controller('MainCtrl', function ($scope, $http, ENV) {
      console.log(ENV.myvar1);
  });

您可以为生产设置不同的变量，为开发设置不同的变量，方法是在 gruntfile 中设置它并设置 ng:production 或 ng:development。

引用 this article解释程序以获取更多信息。