如何在使用Gulp部署时更改主机名等配置详细信息

Question

我正在使用AngularJS编写一个web应用程序，并使用Gulp进行构建。我调用了很多API来从AngularJS获取数据。问题是，当我使用gulp构建应用程序时，我希望根据要将应用程序部署到的环境（开发或生产环境）使用不同的主机名。现在，我正在手动更改Angular Constants服务中的主机名，并使用gump构建它。

请让我知道我如何自动完成这项工作，以避免将来的乏味工作。

谢谢，

Answer 1

使用gulp-ng配置来切换配置。

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));
});

我的发布任务使用生产配置

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

创建一个configFile.json并将您的环境配置放入其中。

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

我的configFile.js有一个名为appConstant的角度模块。gump任务使用configFile.json 中的值替换configFile.js内容

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

现在这个模块可以在我的角度控制器中使用，以参考基于环境的设置。