Node.js 为每条路线重新加载浏览器（Express+；gulp+；Browsersync）_Node.js_Express_Proxy_Gulp_Browser Sync

Node.js 为每条路线重新加载浏览器（Express+；gulp+；Browsersync）

node.js express proxy gulp

Node.js 为每条路线重新加载浏览器（Express+；gulp+；Browsersync）,node.js,express,proxy,gulp,browser-sync,Node.js,Express,Proxy,Gulp,Browser Sync,我使用express generator构建了一个简单的express web服务器，如下所示： express test -ejs 到目前为止，一切正常，我有以下文件夹（有一些更改）：我现在想要实现的是： -对于我在“/routes/*.js”和“/*.js”中处理的每个文件，请在保存时重新加载服务器和浏览器 -对于“/views”和“/public”中的每个文件，仅在保存时重新加载浏览器为此，我设置了一个gulp file.js，在代理模式下使用浏览器同步，如下所示： var ser

我使用express generator构建了一个简单的express web服务器，如下所示：

express test -ejs

到目前为止，一切正常，我有以下文件夹（有一些更改）：

我现在想要实现的是：
-对于我在“/routes/*.js”和“/*.js”中处理的每个文件，请在保存时重新加载服务器和浏览器
-对于“/views”和“/public”中的每个文件，仅在保存时重新加载浏览器

为此，我设置了一个gulp file.js，在代理模式下使用浏览器同步，如下所示：

var server  = require('gulp-develop-server');
var bs      = require('browser-sync').create();  

(some tasks for checking js and less ...)  

var options = {
  server: {
    path: './bin/www',
    execArgv: ['--harmony']
  },
  bs: {
    proxy: {
      target: 'http://localhost:5000',
      middleware: function (req, res, next) {
        console.log(req.url);
        next();
      }
    },
    files: ['./public/**/*', './views/*'], // files to watch with bs instantly (.ejs & .css)
    logLevel: 'debug'
  }
};

gulp.task('start', ['js','less'], function () {
  server.listen(options.server, function (error) {
    if (!error)
      bs.init(options.bs);
  });

  gulp.watch('./less/*.less', ['less-nonstop']);

  gulp.watch(['./*.js', './routes/*.js'], ['restart:forjs']);

  gulp.watch('./views/*').on('change', bs.reload);
});

代理工作正常，上的每个页面都提供与相同的页面（我的express服务器配置为在端口5000上侦听）

现在我的问题是，browsersync并不总是在重新加载时刷新我的浏览器（即使browser sync获得重新加载事件），事实上，它仅在我位于app.js中指定的第一条路由路径上时才会刷新。例如，如果我在app.js中有以下代码：

app.use('/bonjour', routes);
app.use('/users', users);

浏览器同步将仅在上重新加载浏览器，而不会在上或任何其他路径上重新加载浏览器。即使浏览器同步获得重新加载事件（我可以在控制台日志中查看）。当我显示app.js中指定的第一条路径以外的任何其他页面时，我的浏览器似乎与浏览器同步“断开连接”。

为什么呢？我该如何修复它呢？

看来浏览器同步需要一个合适的html页面呈现才能工作，这就是为什么在本例中，它不能在其他路由上工作的原因。事实上，我的error.ejs文件只是：

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

更正为：

解决了这个问题，现在浏览器同步可以在每个html页面上工作

<!DOCTYPE html>
<html>
  <body>
    <h1><%= message %></h1>
    <h2><%= error.status %></h2>
    <pre><%= error.stack %></pre>
  </body>
</html>