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-31T05:59:26.207

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!

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? — user3294878, Oct 31 '16 at 05:42
Yeah, you're right, in your case it's not so sensible! Let me suggest something else and modify my answer `:)`. — ccjmne, Oct 31 '16 at 05:44
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. — user3294878, Nov 01 '16 at 03:58

Gulp task for ng-constant multiple environments

1 Answers1