node.js - 将浏览器同步与 node.js 应用程序一起使用

Question

我有一个现有的 Node 应用程序。我的 Node 目录结构是这样设置的:

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

我可以从上面显示的根目录成功启动我的应用程序我正在运行的 node ./src/server.js。启动后，我可以在浏览器中访问“http://localhost:3000”，并像我期望的那样查看 index.html 的内容。

我想加快我的发展，我最近了解了browsersync .为了将它包含在我的 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:3000但是，如果我使用 node ./src/server.js 启动我的应用程序，它就像没有使用 BrowserSync 运行一样。我做错了什么？

Answer 1

您已经有了一个 Node 服务器，所以我认为您需要的是Proxy。我还建议您使用 nodemon 在您的 speed up development 事情上向前迈出一步。如果发生任何更改，它将自动重新启动您的 Node 开发服务器。所以你的例子中的示例 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();
        }
    });
});

~