How do I change configuration details like host name while deploying using Gulp

Question

I'm writing a web application using AngularJS and using Gulp for build. I am calling lot of APIs to get data from AngularJS. Problem is when I am building the application using gulp I want to use different host names based on to which environment I am going to deploy the application (dev or production environment). Right now I am manually changing the host name in Angular Constants service and building it using gulp.

Please let me know how do I automate this, to avoid tedious work in future.

Thanks,

Answer 1

use gulp-ng-config to switch configurations.

var gulpNgConfig = require('gulp-ng-config');
gulp.task('production-config', ['clean'], function () {
    gulp.src(paths.webroot + 'configFile.json')
    .pipe(gulpNgConfig('app', {
        environment: 'production',
        createModule: false
    }))
    .pipe(gulp.dest(paths.dist));
});

and my publish task uses production-config

gulp.task('publish', ['clean', 'production-config']);

create a configFile.json and put your environment configurations in it.

{
  "local": {
    "appConstant": {
      "hostUrl": "http://localhost:23561/"
    }
  },
  "production": {
    "appConstant": {
      "hostUrl": "http://www.mywebsite.com/service/api"
    }
  }
}

my configFile.js has angular module called appConstant. The gulp task replaces the configFile.js content using the values fron configFile.json

angular.module('app')
.constant('appConstant', {
    "hostUrl": "/service/api"
});

Now this module can be used inside my angular controllers to refer to the settings based on environment.