javascript - Changing JS variable with Grunt for different environments - Stack Overflow

admin管理员组

文章数量:1334684

I'm trying to configure my JS build to do next:

I'm using a JS variable to define the application root:

globals.js

define(function (require) {
   "use strict";
   return {
      mainRoot: ""
      //mainRoot: "http://localhost:3000" - local run
      //mainRoot: "" - test server
   };
});

During local development I'm using code without Grunt build and running Grunt only for test & production builds.

Grunt is running from the Maven plugin using mand-line configuration. So it is the only way to pass the environment variable.

pom.xml

<plugin>
    <groupId>pl.allegro</groupId>
    <artifactId>grunt-maven-plugin</artifactId>
    <configuration>
        <gruntOptions>
            <gruntOption>--verbose</gruntOption>
        </gruntOptions>
        <target>build</target>
    </configuration>
</plugin>

Grunt configuration is pretty simple and looks like this:

Gruntfile.js

grunt.registerTask('build', [
    'karma',
    'requirejs',
    'concat',
    'csso',
    'copy',
    'processhtml'
]);

The question:

How can I configure Grunt to change my variable in next way?

1. Default value of mainRoot should be http://localhost:3000
2. Environment variable should be set via mand-line from the Maven plugin
3. When running Grunt with PROD environment - mainRoot should be changed to
4. When running Grunt with TEST environment - mainRoot should be changed to

Thank you!

I'm trying to configure my JS build to do next:

I'm using a JS variable to define the application root:

globals.js

define(function (require) {
   "use strict";
   return {
      mainRoot: "http://myapp."
      //mainRoot: "http://localhost:3000" - local run
      //mainRoot: "http://myapp-test." - test server
   };
});

During local development I'm using code without Grunt build and running Grunt only for test & production builds.

Grunt is running from the Maven plugin using mand-line configuration. So it is the only way to pass the environment variable.

pom.xml

<plugin>
    <groupId>pl.allegro</groupId>
    <artifactId>grunt-maven-plugin</artifactId>
    <configuration>
        <gruntOptions>
            <gruntOption>--verbose</gruntOption>
        </gruntOptions>
        <target>build</target>
    </configuration>
</plugin>

Grunt configuration is pretty simple and looks like this:

Gruntfile.js

grunt.registerTask('build', [
    'karma',
    'requirejs',
    'concat',
    'csso',
    'copy',
    'processhtml'
]);

The question:

How can I configure Grunt to change my variable in next way?

1. Default value of mainRoot should be http://localhost:3000
2. Environment variable should be set via mand-line from the Maven plugin
3. When running Grunt with PROD environment - mainRoot should be changed to http://myapp.
4. When running Grunt with TEST environment - mainRoot should be changed to http://myapp-test.

Thank you!

• javascript
• build
• gruntjs
• environment-variables

Share Improve this question Follow asked Jun 12, 2015 at 7:18 Igor LuzhanovIgor Luzhanov 84011 gold badge88 silver badges1515 bronze badges 3

• Have you tried using a plugin like grunt-replace? – doldt Commented Jun 12, 2015 at 7:22
• Yes, but it is not clear for me how to setup it with grunt-env or similar environment plugins. – Igor Luzhanov Commented Jun 12, 2015 at 7:24
• Frankly, there are countless of ways to do this - show us what you tried with grunt-env then? – doldt Commented Jun 12, 2015 at 7:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I find a bination of grunt-replace and grunt-config works well.

In your Gruntfile.js, configure grunt-config like this (see the README):

config: {
    local: {
        options: {
            variables: {
                mainroot: 'http://localhost:3000'
            }
        }
    },
    test: {
        options: {
            variables: {
                mainroot: 'http://myapp-test.'
            }
        }
    },
    prod: {
        options: {
            variables: {
                mainroot: 'http://myapp.'
            }
        }
    }
}

In your globals.js, create an @@ placeholder for grunt-replace to find and replace:

define(function (require) {
   "use strict";
   return {
      mainRoot: "@@MAINROOT"
   };
});

In your Gruntfile.js, configure grunt-replace like this:

replace: {
    my_target: {
        options: {
            patterns: [
                {
                    match: 'MAINROOT',
                    replacement: '<%= grunt.config.get("mainroot") %>'
                }
            ]
        },
        src: ... ,
        dest: ...
    }
}

Then create a mand-line option such as --env, which will accept local or test or prod, and will default to local if omitted:

var envTarget = grunt.option('env') || 'local';

and update your build task to use config and replace:

grunt.registerTask('build', [
    'config:' + envTarget,
    'replace',
    'karma',
    'requirejs',
    'concat',
    'csso',
    'copy',
    'processhtml'
]);

Now you can run Grunt from the mand-line with the new --env option:

grunt build --env=local
grunt build --env=test
grunt build --env=prod

本文标签： javascriptChanging JS variable with Grunt for different environmentsStack Overflow