为每条路线重新加载浏览器(Express + gulp + Browsersync)
Reloading browser for every routes ( Express + gulp + Browsersync )
我构建了一个使用 express 生成器生成的简单 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);
});
代理工作正常,每个页面都在 http://localhost:3000 give me the same page as http://localhost:5000 上(我的 express 服务器配置为侦听端口 5000)。
现在我的问题是 browsersync 并不总是在重新加载时刷新我的浏览器(即使浏览器同步获得重新加载事件)事实上它只在我在 [=38= 中指定的第一个路由路径上时刷新].例如,如果我在 app.js 中有以下代码:
app.use('/bonjour', routes);
app.use('/users', users);
浏览器同步只会在 http://localhost:3000/bonjour, but not on http://localhost:3000/users 或任何其他路径上重新加载浏览器。即使 browser-sync 获得了重新加载事件(因为我可以在控制台日志中查看)。似乎当我显示 app.js 中指定的第一个路由以外的任何其他页面时,我的浏览器就像来自浏览器同步的 "disconnected"。
这是为什么 ?我该如何解决?
浏览器同步似乎需要适当的 html 页面渲染才能工作,这就是为什么在这种情况下它不能在其他路由上工作。事实上,我的 error.ejs 文件只是:
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
更正为:
<!DOCTYPE html>
<html>
<body>
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
</body>
</html>
问题已解决,现在浏览器同步适用于每个 html 个页面。
我构建了一个使用 express 生成器生成的简单 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);
});
代理工作正常,每个页面都在 http://localhost:3000 give me the same page as http://localhost:5000 上(我的 express 服务器配置为侦听端口 5000)。
现在我的问题是 browsersync 并不总是在重新加载时刷新我的浏览器(即使浏览器同步获得重新加载事件)事实上它只在我在 [=38= 中指定的第一个路由路径上时刷新].例如,如果我在 app.js 中有以下代码:
app.use('/bonjour', routes);
app.use('/users', users);
浏览器同步只会在 http://localhost:3000/bonjour, but not on http://localhost:3000/users 或任何其他路径上重新加载浏览器。即使 browser-sync 获得了重新加载事件(因为我可以在控制台日志中查看)。似乎当我显示 app.js 中指定的第一个路由以外的任何其他页面时,我的浏览器就像来自浏览器同步的 "disconnected"。
这是为什么 ?我该如何解决?
浏览器同步似乎需要适当的 html 页面渲染才能工作,这就是为什么在这种情况下它不能在其他路由上工作。事实上,我的 error.ejs 文件只是:
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
更正为:
<!DOCTYPE html>
<html>
<body>
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
</body>
</html>
问题已解决,现在浏览器同步适用于每个 html 个页面。