怎样同时启动gulp和json-server服务？

Question

项目里已经安装了gulp，启动服务，可以访问静态文件html，但是很多接口调用，想用json-server模拟接口，但是我想把这两个功能同时启动，
或者把json-server集成到gulp中，或者能够同时启动这两个服务，并且在同一个端口下，这个是重点，必须是同一个端口，不然接口调用就跨域了。
该如何操作呢？

Answer 1

同一个端口，肯定不行。

给你一个方案 用 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

Answer 2

不知道你的静态服务器用的什么，这里推荐用 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：

• browser-sync

• http-proxy-middleware

Answer 3

我就是用的就是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冲突？

Answer 4

一个服务占用了一个端口，另一个肯定是不行的，你之所以想要同一个端口，只是为了解决跨域，那应该将另一个端口跨域访问那个头信息设置设成 *就可以了