在 Browser-Sync express gulp vagrant nodemon 中设置代理和服务器答案

【问题标题】：Setting both proxy and server in Browser-Sync express gulp vagrant nodemon在 Browser-Sync express gulp vagrant nodemon 中设置代理和服务器
【发布时间】：2017-03-22 17:40:32
【问题描述】：

特定浏览器同步配置有问题。我需要为测试和开发环境设置浏览器同步。 Dev 是一个带有模板引擎的快速应用程序，它在 vagrant 上工作，它需要通过代理进行连接。此设置适用于开发环境。

const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

var paths = {
  src : {
    devenv:         ['app-dev/**/*.*', '!app-dev/bowercomponents/', 'app.js', 'public/**/*.*'],
    testenv:         'test/spec/**/*.*'
  },
};

gulp.task('browser-sync', ['nodemon'], function() {
  browserSync.init(null, {
    proxy: {
      target: 'http://192.168.33.10:3333', 
      ws: true,
    },
  });
});

gulp.task('serve', ['browser-sync'], function () {
  gulp.watch(paths.src.devenv, reload);
});

gulp.task('nodemon', function (cb) {
  var called = false;
  return nodemon({script: 'app.js'}).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  });
});

问题是，对于 mocha chai 测试环境，需要另一个完全不同设置的浏览器同步实例，它指的是根目录中的 test 和 bower_components 文件夹.类似的东西：

gulp.task('serve:test', () => {
  browserSync.get('Test Server').init({
    notify: false,
    port: 9999,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });
  gulp.watch(paths.src.testenv, reload);
});

如果我这样设置，即使创建两个单独的浏览器同步实例，它也会返回配置错误：无法同时设置代理和服务器。如果我通过以下方式为 test 文件夹设置不同的代理：

var proxy = require('http-proxy-middleware');

var testServer = proxy(['/test'], {
  target: 'http://192.168.33.10',
  port: 9999,
  changeOrigin: true,
  logLevel: 'debug'
});

并将其添加到主浏览器同步初始化中，它只会返回 /cannot GET test。有什么办法让他们都工作吗？

【问题讨论】：

标签： proxy gulp vagrant browser-sync nodemon

【解决方案1】：

解决了。无需使用browserSync.get。 Browser-sync 的一个实例就足够了。这是工作配置：

gulp.task('serve:test', () => {
  browserSync.init({
    notify: false,
    port: 9999,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

  gulp.watch(paths.dist.testscripts).on('change', reload);
});

gulp.task('browser-sync', ['nodemon'], function() {
  browserSync.init(null, {
    proxy: {
      target: 'http://192.168.33.10:3333', //VM's ip and port
      ws: true,
    },
  });
});

gulp.task('serve', ['browser-sync'], function () {
  gulp.watch(paths.src.devenv, reload);
});


gulp.task('nodemon', function (cb) {
  var called = false;
  return nodemon({script: 'app.js'}).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  });
});

【讨论】：