Question

我有一个使用grunt的角度应用程序设置，但我希望能够使用grunt作为预处理器来替换变量，但我还没有能够找到匹配的任何东西我的需要。

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

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

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

然后我可以创建一个笨拙的任务并将其传递给＆＃34; dev＆＃34;或＆＃34; prod＆＃34;让它运行预处理器并用相应的值替换每个实例。我发现了这个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'
  ]);

运行任务会生成带有gruntfile中定义的常量的config.js。然后将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＆＃39;那将会对文件进行实际更改。和＆＃39; dest＆＃39;在同一文件夹中，否则它会将处理过的文件放在dest文件夹中。

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

希望它有所帮助。

Answer 3

好吧，我最终为这个任务构建了一个咕噜插件，因为它是我真正需要的东西。它允许您将环境变量定义放在.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预处理和替换环境变量

3 个答案: