使用与node.js应用程序的浏览器同步

Question

我有一个现有的节点应用程序.我的Node目录结构设置如下:

./
  node_modules/
  src/
    views/
      index.html
      ...
    server.js
  test/
  gulpfile.js
  package.json

我可以node ./src/server.js从上面显示的根目录成功启动我的应用程序.一旦启动,我可以在浏览器中访问" http:// localhost:3000 "并查看index.html的内容,就像我期待的那样.

我想加快我的开发速度,最近我学会了browserync.为了将它包含在我的gulp过程中,我有以下内容:

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

browserSync.init({
  server: {
    baseDir: './src/',
    server: './src/server.js'
  }
});

当我运行gulp时,我在命令行中看到以下内容:

BS]访问URL:

 --------------------------------------
       Local: http://localhost:3000
    External: http://[ip address]:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://[ip address]:3001
 --------------------------------------

然后我的浏览器打开,它会尝试加载http:// localhost:3000.此时,我在浏览器窗口中看到以下错误:

Cannot GET /

我究竟做错了什么？如果我使用启动我的应用程序,我可以成功访问http:// localhost:3000node ./src/server.js,但是,它不像BrowserSync一样运行.我究竟做错了什么？

Answer 1

您已经有一个节点服务器,所以我认为您需要的是Proxy.而且我还建议你使用nodemon你的speed up development东西领先一步.如有任何更改,它将自动重启您的节点开发服务器.因此,您的案例(with nodemon)中的示例gulpfile 可能看起来像

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');


gulp.task('browser-sync', ['nodemon'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3700", // port of node server
    });
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch(["./src/views/*.html"], reload);
});

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

〜