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

我有一个使用grunt的角度应用程序设置，但我希望能够使用grunt作为预处理器来替换变量，并且我一直无法找到任何匹配的我的需求。例如，如果我在配置文件中将我的主应用程序模块的名称更改为“someAppName”，我想在各种html和js文件中使用诸如“ENV.APP_NAME”之类的内容，并将其替换为以适合该环境的价值。使用Grunt预处理和替换环境变量

理想我想有一个配置文件沿着这些线路的某处，无论是作为上传.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插件？有没有人获得类似的咕噜声？

编辑：我已经开始建设一个咕噜插件为这个特定的任务，一旦完成并测试我会后它挂在故宫

来源

2015-02-07 ejfrancis

也许这会帮助更换/如何使用的环境变量 - 在 - 你r-angular-application – cyan 2015-02-07 22:25:17

我已经看到了，它确实添加了环境变量，但不是作为预处理器。所以我可以访问控制器中的环境变量，但是我不能将它作为html文件或json的一部分，并且将其替换为我正在寻找的 – ejfrancis 2015-02-07 22:29:43

也许独立程序会读取所有html js文件之前和替换指定的标签？它可能是用java编写的。像全部替换。 – cyan 2015-02-07 22:36:31

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

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

所以，如果你有这样的事情

HTML

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

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

http://mindthecode.com：

的任务将与此

HTML

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

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

来源

2015-02-09 19:55:57 ejfrancis

使用grunt-ng-constant。

NPM安装这个插件：

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

然后在咕噜写入配置文件：

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.task.run([ 
    'clean:server', 
    'ngconstant:development', 
    'connect:livereload', 
    'watch' 
    ]);

正在运行的任务会产生配置。带有在gruntfile中定义的常量的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：开发。

请参阅this article解释过程以获取更多信息。

来源

2015-02-07 22:33:12 cyan

这很有用，但我不认为这正是OP正在寻找的东西。不过，我可以利用它，谢谢。 – 2015-02-07 23:42:32

我认为这是一个很好的选择和OP正在寻找.. – Vishwanath 2015-02-08 06:40:16

当从JSON文件加载一些配置值到Grunt时，您可以使用grunt-string-replace做些事情。假设你在myconfig.json中有这个：

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

然后可能将配置加载到Gruntfile中。从JSON 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中配置的应用名替换框架中的标签。

希望它有帮助。

来源

2015-02-08 00:00:21

非常有帮助的回答！关于OP问题的最后部分（“创建一个grunt任务并将其传递给'dev'或'prod'”），[outaTiME/grunt-config]（https://github.com/outaTiME/grunt-config）可以定义特定于目标的配置值，以便在执行字符串替换时使用。请参阅自述文件中的[“源代码中的环境变量”]（https://github.com/outaTiME/grunt-config#environment-variable-in-source-with-grunt-replace）部分。 – TachyonVortex 2015-05-06 16:31:02

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

回答

相关问题