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

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

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

我可以从上面显示的根目录成功启动我的应用程序my running

节点。/src/server.js

。启动后，我可以访问浏览器中的“”，并像预期的那样查看index.html的内容

我想加快我的发展，我最近了解到了。为了将其纳入我的吞咽过程，我有以下几点：

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
 --------------------------------------

然后，我的浏览器打开并尝试加载。此时，我在浏览器窗口中看到以下错误：

Cannot GET /

---

我做错了什么？如果我使用

节点启动我的应用程序。/src/server.js

，我可以成功访问，但是，这就像它没有使用BrowserSync运行一样。我做错了什么？

如果您有自己的in

/src/server.js

，为什么要使用内置服务器

请检查，browsersync中的服务器所做的是为基本HTML/JS/CSS网站创建一个静态服务器，因此您可能需要使用代理功能，如图所示。

---

这意味着您需要正常运行服务器并将其封装在代理中。

您已经有了节点服务器，因此我认为您需要的是

代理。
我还建议您使用
nodemon
在
加速开发方面领先一步。如果发生任何更改，它将自动重新启动节点开发服务器。因此，在您的案例中（使用
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();
        }
    });
});

~
使用
express
生成器默认文件夹结构和
bin\www
中的启动脚本，并使用
ejs
模板，这就是我修改
gulpfile.js
的方式：

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:8000", // port of node server
    });
});

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

gulp.task('nodemon', function (cb) {
    var callbackCalled = false;
    return nodemon({
        script: './bin/www', 
        env: {
        PORT: 8000
    }}).on('start', function () {
        if (!callbackCalled) {
            callbackCalled = true;
            cb();
        }
    });
});

请注意，我正在监视以
.ejs
结尾的任何文件。在使用端口时使用
nodemon
时，我也遇到了一个问题，因此我添加了一个env以将端口传递为8000，
env:{PORT:8000}
由于问题中缺少标记
grunt
，这里有一个仅使用NPM（
package.json
）的解决方案：

现在，所有的
src属性都可以是相对的：

<script src="/stats-js/build/stats.min.js"></script>


有人能帮忙吗？我有自己的服务器。然而，我正试图找出如何启用实时重新加载功能，以便在开发应用程序时浏览器自动刷新。
<script src="/stats-js/build/stats.min.js"></script>