使用 nodejs 服务器配置 browserSync

Question

我需要帮助了解如何为节点服务器和浏览器同步配置端口。

在 serevr.js 文件中，http 服务器正在侦听端口 3006； server.listen(3006);

我希望 browsersync 打开浏览器并将地址指向服务器端口 3006。这是 http 服务器监听的端口。所以地址是 localhost:3006

gulpfile.js

gulp.task('serve', function() {
browserSync.init({
    server: {
        baseDir: './dist/'
    },
    port: 3006
 });
});

在mac终端中，我运行gulp。这会将浏览器打开到 localhost:3006。很好
在另一个终端window，我启动节点服务器，nodemon dist/serevr.js

我无法让它们相同。服务器将不会启动，因为端口 3006 上已经运行ning（第 1 步），或者，如果我先启动服务器，则会发生以下情况。

Local: http://localhost:3007
External: http://192.168.1.63:3007

如何让它们协同工作？

在以下答案的帮助下找到的解决方案：

gulp.task('serve', function() {
    browserSync.init({
        port: 3007,
        proxy: {
            target: "localhost:3006",
            ws: true
        }
    });
});

Answer 1

browserSync.init 启动服务器。您不能两次绑定到一个端口。如果您需要运行两个服务器在一起，请使用不同的端口。

Answer 2

基本上会有两台服务器运行。一台 nodemon 正在运行，另一台 browser-sync 将运行。两台服务器不能有相同的端口。

您需要在 gulp 文件的浏览器同步配置部分代理您用于 nodemon 的端口。因此，您需要先启动节点服务器，然后浏览器同步才能代理它。

如果你需要启用websockets，你可以通过设置ws: true来实现。

这是它的样子：

gulp.task('browserSync', function () {
    browserSync.init({
        port: 3007, // you can specify the port here
              // can't use the same port that nodemon uses.
        proxy: {
            target: 'localhost:3006', // original port
            ws: true // enables websockets
        }
    });
});

使用 nodejs 服务器配置 browserSync

Configure browserSync with nodejs server

node.js

gulp

browser-sync