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

我有一个现有的 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 /

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

最佳答案

您已经有一个 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();
        }
    });
});

〜

关于node.js - 使用浏览器与node.js应用程序同步，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35576663/