Set Env variables based on grunt task

问题

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?

回答1:

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.

回答2:

Yes, it's possible. Using grunt-env to specify your environment in combination with something like grunt-usemin to expose your environment variables to your application code.

According to this SO thread you need to ensure that your environment variables are loaded prior to Ember.js.

来源：https://stackoverflow.com/questions/18271744/set-env-variables-based-on-grunt-task

标签

web-applications

ember.js

gruntjs