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

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

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

我可以成功启动我的应用程序node ./src/server.js从上面所示的根开始。一旦开始，我就可以访问“http://本地主机:3000” 在浏览器中并像我期望的那样查看 index.html 的内容。

我想加快我的发展，我最近了解到浏览器同步。为了尝试将其包含在我的 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://本地主机:3000。此时，我在浏览器窗口中看到以下错误：

Cannot GET /

我究竟做错了什么？我可以成功访问http://本地主机:3000如果我使用启动我的应用程序node ./src/server.js然而，它就像没有与 BrowserSync 一起运行。我究竟做错了什么？

你已经有了一个节点服务器，所以我认为你需要的是Proxy。 我还建议你使用nodemon为了在你的道路上前进一步speed up development事物。如果发生任何更改，它将自动重新启动您的节点开发服务器。所以你的情况下有一个示例 gulpfile（带有nodemon）可能看起来像

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();
        }
    });
});

~