node.js - gulp live-server 与 browserSync

Question

我已经阅读了足够多的有关 live-server 和 browsersync 的内容..但是我无法安静地了解它们如何协同工作。

browserSync 的工作是同步所有浏览器，而 live-server 的工作是重新启动我的 Express 服务器。

那么以下任务对我的工作流程有何帮助:

gulp.task('live-server', function() {

  var server = new LiveServer('server/main.js');
  server.start();
});

gulp.task('serve', ['live-server'], function() {
  browserSync.init(null, {
   proxy: 'http://localhost:7777',
    port: 9001
  });
});

运行gulpserve时得到的输出是

[09:31:05] Using gulpfile ~/Documents/Code/test/gulpfile.js
[09:31:05] Starting 'live-server'...
[09:31:05] Finished 'live-server' after 8.55 ms
[09:31:05] Starting 'serve'...
[09:31:05] Finished 'serve' after 60 ms
livereload[tiny-lr] listening on 35729 ...
[BS] Proxying: http://localhost:7777
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:9001
    External: http://172.20.3.230:9001
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://172.20.3.230:3001
 ------------------------------------

这个外部是什么？所有新端口 9001、3001 的 UI 外部是什么？？

Answer 1

本地:表示您可以在本地计算机上查看项目的地址。外部:代表您本地网络(LAN或wifi)上的任何用户都可以查看项目的地址。

UI 为您提供所有 BrowserSync 选项的鸟瞰图，它向您显示所有同步选项、历史记录，并允许您配置 BrowserSync。要访问 UI，只需访问终端上作为 UI 引用的地址即可。

以下链接将详细介绍它: How to Use BrowserSync for Faster Development