关于javascript：离线模式下的Gulp Browsersync和http-proxy-middleware

Gulp Browsersync and http-proxy-middleware in offline mode

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

我在localhost:3000部署了一个有角度的应用程序，请求在localhost:8080部署的api服务器。到api服务器的http请求由Browsersync http-proxy-middleware代理。如果我可以连接互联网，则一切正常，但是，如果我脱机，则在gulp控制台上会收到以下错误消息：

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

在浏览器控制台上：

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

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

由于api服务器是在本地部署的，因此需要Internet连接代理http请求似乎很奇怪。

带有所有配置的角度应用程序是使用generator-gulp-angular生成的

这是我的gulp服务器配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

'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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

{
"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调用：

1
2
3

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

还有bower.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
"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"
}
}