gulp live-server vs browserSync

Question

I have read enough about live-server and browsersync .. however i can't quiet get my head around how they work together.

browserSync's job is to sync all browser and live-server's job is to restart my express server.

so how does the below task help in my work flow:

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
  });
});

The output that I get when i run gulp serve is

[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
 ------------------------------------

What is this external and what is UI external with all new ports 9001, 3001 ??

Answer 1

Local: represents the address on your local machine with which you can view the project. External: represents the address that any user on you local network(LAN or wifi) can view the project.

UI gives you a bird's eyeview of all BrowserSync options, it shows you all sync options, history, and it lets you configure BrowserSync. To access the UI, just visit the address referenced on your terminal as UI.

The bellow link will detail more about it: How to Use BrowserSync for Faster Development