基于grunt任务设置Env变量 [英] Set Env variables based on grunt task

问题描述

我有一个webapp（emberjs），我需要根据grunt任务设置env变量。所以当我运行 grunt server 时，它会选择 development ，并且url将被设置为 localhost ：5000 。但是当我做 grunt build 时，它会选择 production ，url将被设置为生产.COM 。

对我来说，主要问题是，如何从ember中读取这些变量。或者如何让grunt查找变量并根据任务进行更改

是否可以做类似的事情？

假设你在使用yeoman来完成这个任务，脚手架由 yo ember 生成器和使用 grunt build 构建dist。

哟emb generator生成器v0.8使用grunt-replace。升级到该版本。总之，我使用grunt-replace将全局变量添加到index.html。

将这个脚本标记添加到app / index.html之前的combined-scripts.js块中：

 ＃app / index.html 
< script> 
 / * 
通过在这里放置env vars来简化grunt-replace策略。 
 * / 
 window.MYCOMPANYCOM_ENV = {
 env：'@@ env'，
 apiHost：'@@ apiHost'
}; 
< / script> 
 
 *在此部分之前添加* / 
 <！ -  build：js（.tmp）scripts / main.js  - > 
< script src =scripts / combined-scripts.js>< / script> 
<！ -  endbuild  - > 
  

然后将Gruntfile.js中的替换配置更改为：

  module.exports = function（grunt）{
 var appConfig = grunt.file.readJSON（'app_config.json'）; 
 
替换：{
 app：{
 options：{
 patterns：[
 {
 json：appConfig ['app'] 
} 
] 
}，
文件：[
 {src：'<％= yeoman.app％> /index.html'，dest：'。 tmp / index.html'} 
] 
}，
 dist：{
 options：{
 patterns：[
 {
 json： appConfig ['dist'] 
} 
] 
}，
文件：[
 {src：'<％= yeoman.dist％> / index。 html'，dest：'<％= yeoman.dist％> /index.html'} 
] 
} 
} 
  pre> 
 
 
在./app_config.json创建一个新文件
  {
app：{
env：development，
apiHost：http：// localhost：8080
}，
 dist：{
env：dist，
apiHost：/
} 
} 
  pre> 
 
 
现在您的应用程序脚本可以访问app_中定义的全局变量config.json。
 
 
 
我不会详细讨论，但在开发过程中可以正常工作。对于 grunt build ，我将 replace：dist 步骤移至构建步骤的末尾，并将@@替换为index.html中的ember变量和一个到bower组件的路径。
 
I have a webapp (emberjs) that I need to set env variables based on grunt task. So when I run grunt server it would choose development, and url will be set to localhost:5000. But when i do grunt build, it would choose production and url will be set to production.com. 

The main issue for me is, how to read those variables from ember. Or how to make grunt look for a variable and change it based on the task

Is it possible to do something like that?
解决方案
After much googling and no good examples, here's what I did.

Assuming you're using yeoman with scaffolding by yo ember generator and using grunt build to build the dist.

Yo ember-generator v0.8 uses grunt-replace. Upgrade to that version. In short, I'm using grunt-replace to add global vars to index.html. Here's how.

Add this script tag to app/index.html before the combined-scripts.js block:
#app/index.html
<script>
  /*
    simplify grunt-replace strategy by placing env vars here.
  */
  window.MYCOMPANYCOM_ENV = {
    env: '@@env',
    apiHost: '@@apiHost'
  };
</script>

/* ADD THE ABOVE BEFORE THIS SECTION */
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->
And change the replace config in Gruntfile.js to this:
module.exports = function (grunt) {
  var appConfig = grunt.file.readJSON('app_config.json');

replace: {
  app: {
    options: {
      patterns: [
        {
          json: appConfig['app']
        }
      ]
    },
    files: [
      {src: '<%= yeoman.app %>/index.html', dest: '.tmp/index.html'}
    ]
  },
  dist: {
    options: {
      patterns: [
        {
          json: appConfig['dist']
        }
      ]
    },
    files: [
      {src: '<%= yeoman.dist %>/index.html', dest: '<%= yeoman.dist %>/index.html'}
    ]
  }
}
Create a new file at ./app_config.json
{
  "app": {
    "env": "development",
    "apiHost": "http://localhost:8080"
    },
  "dist": {
    "env": "dist",
    "apiHost": "/"
    }
}
Now your app scripts have access to a global vars defined in app_config.json.

I won't go into more detail but this works fine in development. For grunt build, I moved the replace:dist step to the end of the build steps, and replaced the @@ember variable in index.html with a path to the bower component.

                        
这篇关于基于grunt任务设置Env变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！