离线模式下的 Gulp Browsersync 和 http-proxy-middleware

Question

如果我代理到本地主机服务器，带有 http-proxy-middleware 的 Browsersync 是否可以脱机工作？

我在 localhost:3000 部署了一个 Angular 应用程序，请求部署在 localhost:8080 的 api-server。对 api-server 的 http 请求由 Browsersync http-proxy-middleware 代理。如果我有互联网连接，一切正常，但如果我离线，我会在 gulp 控制台上收到以下错误：

[HPM] Proxy error: ENOENT localhost:8080/data/pet

在浏览器控制台上：

Failed to load resource: the server responded with a status of `500 (Internal Server Error)`

我知道错误不在服务器上，因为我仍然可以使用浏览器访问localhost:8080/data/pet。

由于 api-server 部署在本地，我需要 Internet 连接来代理 http 请求似乎很奇怪。

Angular 应用程序及其所有配置都是使用generator-gulp-angular 生成的

这是我的 gulp 服务器配置：

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

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

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if (baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  var server = {
    baseDir: baseDir,
    routes: routes
  };


  server.middleware = proxyMiddleware('/data',
    {
      target: 'http://localhost:8080'
    });

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser,
    online: false
  });
}

browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
}));

gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

这是我的 package.json：

{
  "name": "petStore",
  "version": "0.0.0",
  "dependencies": {},
  "scripts": {
    "test": "gulp test"
  },
  "devDependencies": {
    "gulp": "~3.9.0",
    "gulp-autoprefixer": "~2.3.1",
    "gulp-angular-templatecache": "~1.6.0",
    "del": "~1.2.0",
    "lodash": "~3.9.3",
    "gulp-csso": "~1.0.0",
    "gulp-filter": "~2.0.2",
    "gulp-flatten": "~0.0.4",
    "gulp-jshint": "~1.11.0",
    "gulp-load-plugins": "~0.10.0",
    "gulp-size": "~1.2.1",
    "gulp-uglify": "~1.2.0",
    "gulp-useref": "~1.2.0",
    "gulp-util": "~3.0.5",
    "gulp-ng-annotate": "~1.0.0",
    "gulp-replace": "~0.5.3",
    "gulp-rename": "~1.2.2",
    "gulp-rev": "~5.0.0",
    "gulp-rev-replace": "~0.4.2",
    "gulp-minify-html": "~1.0.3",
    "gulp-inject": "~1.3.1",
    "gulp-protractor": "~1.0.0",
    "gulp-sourcemaps": "~1.5.2",
    "gulp-less": "~3.0.3",
    "gulp-angular-filesort": "~1.1.1",
    "main-bower-files": "~2.8.0",
    "merge-stream": "~0.1.7",
    "jshint-stylish": "~2.0.0",
    "wiredep": "~2.2.2",
    "karma": "~0.12.36",
    "karma-jasmine": "~0.3.5",
    "karma-phantomjs-launcher": "~0.2.0",
    "karma-angular-filesort": "~0.1.0",
    "karma-ng-html2js-preprocessor": "~0.1.2",
    "concat-stream": "~1.5.0",
    "require-dir": "~0.3.0",
    "browser-sync": "~2.7.12",
    "browser-sync-spa": "~1.0.2",
    "http-proxy-middleware": "~0.2.0",
    "chalk": "~1.0.0",
    "uglify-save-license": "~0.4.1",
    "wrench": "~1.5.8"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

这是 http 调用：

  $http.get("/data/pet").then(function (result) {
        vm.petName = result.data.name;
      });

还有 bower.json

{
  "name": "petStore",
  "version": "0.0.0",
  "dependencies": {
    "angular-resource": "~1.4.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "~3.3.4",
    "angular-bootstrap": "~0.13.0",
    "malarkey": "yuanqing/malarkey#~1.3.0",
    "toastr": "~2.1.1",
    "moment": "~2.10.3",
    "animate.css": "~3.3.0",
    "angular": "~1.4.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.0"
  },
  "resolutions": {
    "angular": "~1.4.0"
  }
}

Answer 1

刚刚做了一些测试，我可以确认这个问题。 运行库测试：“npm test”。 它将设置实际的服务器来运行一些测试。

在线时，所有测试都会成功。 但是当离线运行测试时，它会产生同样的错误信息。

实际的代理功能由node-http-proxy提供。

此问题已报告于： https://github.com/nodejitsu/node-http-proxy/issues/835

我也很好奇为什么不能离线使用http-proxy。

（免责声明：我是 http-proxy-middleware 的作者。）

Answer 2

看起来核心 browsersync 不需要互联网连接。有些功能可以。

以下设置可让您将 browsersync 切换到离线模式：https://browsersync.io/docs/options/#option-online

我在 server.js 文件中设置了这个属性，我的应用可以离线运行：

browserSync.instance = browserSync.init({ startPath: '/', server: server, browser: browser, online: false });