Question

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

请让我知道如何自动执行此操作，以避免将来繁琐的工作。

谢谢，

Answer 1

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

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

我的发布任务使用production-config

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的角度模块。 gulp任务使用值fron configFile.json替换configFile.js内容

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

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

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

1 个答案: