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

Question

我有一个使用 g运行t 的 angular 应用程序设置，但我希望能够使用 g运行t 作为预处理器来替换变量，我一直无法找到符合我需求的任何东西。

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

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

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

然后我可以创建一个 g运行t 任务并将其传递给 "dev" 或 "prod" 以使其成为运行预处理器并用相应的实例替换每个实例价值。我找到了这个 https://github.com/STAH/grunt-preprocessor，但示例令人困惑，我认为这不是我要找的东西。

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

编辑：我已经开始为这个特定任务构建一个 g运行t 插件，完成并测试后我会 post 它在 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" />

将其注入您的应用程序：

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

并注入控制器：

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

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

有关详细信息，请参阅 this article 解释该过程。

Answer 2

在从 JSON 文件将一些配置值加载到 Grunt 中时，您可以利用 grunt-string-replace 做一些事情。假设你在 myconfig.json:

中有这个

{
  "appName": "MyGrowth",
  "version": "1.1.2",
}

然后也许将配置从 JSON 加载到 Gruntfile.js，例如：

grunt.initConfig({
    myConfig: grunt.file.readJSON('myconfig.json'),
// ... the rest of the stuff in your initConfig goes sure
}

那么你可能会有这样的任务：

'string-replace': {
    version: {
        options: {
            replacements: [
                {
                    pattern: /MY_VERSION/ig,
                    replacement: '<%= myConfig.version %>'
                }
            ]
        },
        files: [{
          expand: true,
          cwd: 'src/',
          src: '**/*.js',
          dest: 'dist/'
        }]
    }
}

如果您在同一文件夹中有 'src' 和 'dest'，这将对文件进行实际更改，否则会将处理后的文件放在 dest 文件夹中。

我实际上并没有使用此方法进行预处理，但我将它用于其他类型的事情，例如使用 package.json 中配置的应用程序名称替换框架中的标签。

希望对您有所帮助。

Answer 3

好吧，我最终只为这个任务构建了一个 grunt 插件，因为它是我真正需要的东西。它允许您将环境变量定义放在 .json 文件中，就像我在原始问题中描述的那样，并替换指定文件或文件列表中的所有实例。

https://github.com/ejfrancis/grunt-envpreprocess

所以如果你有这样的东西

HTML

<head>
        <title>ENV.APP_NAME</title>
 </head>
 <script src="ENV.API_BASE/user/create">

JS

 var version = "ENV.APP_VERSION";
 alert(version);

任务会替换成这个

HTML

<head>
    <title>AppDev</title>
</head>
<script src="http://localhost:8000/user/create">

JS

var version = "0.1.0";
alert(version);

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

Using Grunt to preprocess and replace environment variables

angularjs

gruntjs