gulp直播服务器vs 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
  });
});

当我运行gulp serve时得到的输出是

[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

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

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

下面的链接将详细介绍它：How to Use BrowserSync for Faster Development