Gulp task for ng-constant multiple environments

Question

I have been trying to get this to work maybe I'm missing something. I am using ng-constant and setting up different environments end point as mentioned in the ng-constants issue

However I am using gulp and the configuration looks like

gulp.task('environmentsapi', function () {
return ngConstant({
    stream: true,
    development: {
        constants: {
            "ENV": {"api": "http://1.1.1.1:8082/"}
        }
    },
    production: {
        constants: {
            "ENV": {"api": "https://productionapplink/"}
        }
    }
})
// Writes config.js to dist/ folder
.pipe(gulp.dest('dist/scripts/config'));
});

I cant figure out how to call the different end points in the different gulp tasks like the example in the link ngconstant:development etc. How can i run this within the task environmentsapi, since this task is shared in all environment builds. Please let me know how to do this.

gulp.task('build', function () {
runSequence('clean', ['sass', 'scripts', 'bower_components', 'environmentsapi' //How can I run ngconstant:development here? ], 'wiredep')
});

ccjmne · Accepted Answer · 2016-10-31 05:59:26Z

1

Simply create new tasks that set flags!
Here I'm using the development flag that defaults to true.

var development = true;

gulp.task('prod', function () {
  development = false;
});

gulp.task('environmentsapi', function () {
    const apiEndpoint = development ? 'http://1.1.1.1:8082/' : 'https://productionapplink/';
    return ngConstant({
        stream: true,
        constants: {
            'ENV': {api: apiEndpoint}
        }
    });
});

Now, using gulp build will build your application with the ENV.api set to 'http://1.1.1.1:8082/', your development endpoint.

And calling gulp prod build will make your output use an ENV.api set to 'https://productionapplink/'.

As discussed in the comments section, the solution above is quite perfect when you only have two environments, but it quickly gets out of hand when the number of environment grows.

In that case, I suggest using a different approach, the Pirate way, using yargs.

Here would be your new gulpfile.js:

const argv = require('yargs').argv;

const endpoints = {
    'dev': 'http://1.1.1.1:8082/',
    'prod-org': 'https://productionapplink.org/',
    'prod-com': 'https://productionapplink.com/',
    'prod-gov': 'https://productionapplink.gov/'
};

gulp.task('enviornmentsapi', function () {
    const apiEnpdoint = typeof argv.env === 'undefined' ? endpoints.dev : endpoints[argv.env];
    return ngConstant({
        stream: true,
        constants: {
            ENV: { api: apiEnpdoint }
        }
    }).pipe(gulp.dest('dist/scripts/config'));
});

Use it like follows:

gulp build uses the default api URL: 'http://1.1.1.1:8082/'
gulp build --env=prod-org uses 'https://productionapplink.org/'
gulp build --env=prod-com uses 'https://productionapplink.com/'

I hope this could work for you this time!

edited Oct 31, 2016 at 5:59

answered Oct 31, 2016 at 4:50

ccjmne

9,6213 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3294878 Over a year ago

Hi ccjmne thanks for your reply, i have multiple environments, more than 2 so thought there might be a more elegant way of invoking the correct end point when im running a shared task across all the builds. otherwise i could have a separate gulp task for each environment api and just run the appropriate one in the build but again am looking for a more elegant way to accomplish this?

ccjmne Over a year ago

Yeah, you're right, in your case it's not so sensible! Let me suggest something else and modify my answer :).

user3294878 Over a year ago

Thank you ccjmne! that works great i can use yargs for determining what environment each task is running in and decide things like minifying/uglifying too thanks.

Collectives™ on Stack Overflow

Gulp task for ng-constant multiple environments

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related