项目里已经安装了gulp，启动服务，可以访问静态文件html，但是很多接口调用，想用json-server模拟接口，但是我想把这两个功能同时启动，
或者把json-server集成到gulp中，或者能够同时启动这两个服务，并且在同一个端口下，这个是重点，必须是同一个端口，不然接口调用就跨域了。
该如何操作呢？
网友回答：
hjzheng 2016-7-21 1:34 回复:
已被采纳
同一个端口，肯定不行。
给你一个方案 用 http-proxy-middleware 加代理，在gulp中 child_process 起一个进程去跑 json-server, 下面代码是实际项目中的代码片段
...
var proxyMiddleware = require('http-proxy-middleware');
var child = require('child_process');
...
...
...
gulp.task('dev:browser-sync', function(){
//add proxy for gui
var middleware = proxyMiddleware(['/user', '/persons'], {target: 'http://localhost:9001', changeOrigin: true});
browserSync({
server: {
baseDir: './',
index: 'build/login.html',
middleware: middleware
}
});
});
gulp.task('dev:copy', ['dev:copy-html', 'dev:copy-conf', 'dev:copy-login', 'dev:copy-data']);
gulp.task('dev', 'Run this for developing', ['dev:index', 'dev:copy', 'dev:browser-sync', 'dev:watch-files'], function(){
//json-server --watch server/db.json --port 9001
var jsonServer = child.spawn('node_modules/json-server/bin/index.js', ['--watch', 'server/db.json', '--port', '9001']);
jsonServer.stdout.on('data', function (data) {
fs.writeFileSync("log/json-server.log", data.toString());
});
jsonServer.stderr.on('data', function (data) {
console.log('stderr: ' + data);
});
jsonServer.on('exit', function (code) {
console.log('child process exited with code ' + code);
});
});
再给你个方案：
用 concurrently 方法去启动两个命令， 然后在gulp中把代理加上
"dev": "concurrently \"gulp dev\" \"nodemon mock-server.js\"",这个方案可以参考 https://github.com/hjzheng/gulp-AngularJS1.x-seed
JustGo 2016-7-20 5:48 回复:不知道你的静态服务器用的什么，这里推荐用 browserSync。
像你这种情况就可以加个中间件来代理接口。
var browserSync = require('browser-sync')
var proxy = require('http-proxy-middleware') // 需要安装这个中间件
gulp.task('dev', function() {
browserSync.init({
server: {
baseDir: '/',
middleware: proxy('/api', {
target: 'http://127.0.0.1:4000', // 这里是你要代理的接口
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
'^/api': ''
}
})
},
port: 3000
});
}
假如你原本有一个接口地址为 http://127.0.0.1:4000/login，现在直接请求 /api/login 就可以了。
Github：
jsoncode 2016-7-20 6:15 回复:我就是用的就是browserSync,你最后少了个)；
我执行后还报了个错：
You tried to start Browsersync twice! To create multiple instances, use browserSync.create().init()；
其实我项目中已经启动了browserSync
可是我如果运行了这个服务之后，当前窗口已经在运行一个端口了，是不是要再开一个窗口执行gulp？
把你代码修改了一下：
var gulp = require('gulp');
var browserSync = require('browser-sync')
var connect = require('gulp-connect')
var proxy = require('http-proxy-middleware')
gulp.task('jsonServer', function() {
connect.server({
server: {
root: [__dirname],
livereload: true,
port: 8585,
middleware: function(connect, opt) {
return [
proxy('/APIv1', {
target: 'http://localhost:8585',
changeOrigin: true
})
]
}
}
});
})
但是，监听的端口不是8585,而是8080，是不是这样我如果设置了8585会和gulp冲突？
- JustGo 2016-7-20 8:41 回复:jsoncode
如果 api 服务是在本机上运行，那就不能用同一个端口了。api 用 8585，开发服务器用其他。
littledu 2016-7-20 6:59 回复:一个服务占用了一个端口，另一个肯定是不行的，你之所以想要同一个端口，只是为了解决跨域，那应该将另一个端口跨域访问那个头信息设置设成 *就可以了