browserSync reload하는 방법

1. reload 함수를 따로 만들기
   

   • reload 함수를 따로 만들어 watch 함수 맨 뒤에 실행되도록 한다.

     "use strict";
     // 모듈 호출
     import {series, watch} from 'gulp';
     import browser from 'browser-sync';
        
     const browserSync = browser.create();
     const browserSyncReload = (done) => {
         browserSync.reload();
         done();
     }
        
     const gulpWatch = () => {   
         watch("../html/*", browserSyncReload)
         watch("../img/order_v3/sprites/", series(cleanImg, sprites, sassBuild, browserSyncReload))
         watch([
             "../sass/",
             "../sass/vendor/!(_)*.{sass, scss}"
         ], series(cleanCss, sassBuild, browserSyncReload))
     }
     

2. 각 함수마다 stream을 날리는 방법

   import browser from 'browser-sync';
   const browserSync = browser.create();
      
   const ff = () => {
     return src(시작폴더)
       .pipe(dest(목적지))
       .pipe(browserSync.reload(
         {stream: true}
       ))
   };
   

3. browserSync 서버이름 설정 - 모듈화
   

   • Server를 실행하는 server/index.js 파일에서 아래와 같이 My server라는 이름으로 로컬서버가 실행되었다.

     const browserSync = require('browser-sync').create('My server');
     

     다른 폴더의 index.js에서 해당 My server로 stream 값을 전달하려면 아래와 같이 browser-sync 모듈을 호출 후 get() 메서드로 My server를 가져와야 된다.
     그리고난 후에 stream 값을 전달해야된다.

     const browserSync = require('browser-sync').get('My server');
        
     function ff() {
       return src(시작폴더)
         .pipe(dest(목적지))
         .pipe(browserSync.reload(
           {stream: true}
       ))
     }
     

4. browserSync ES6일 때 서버이름 설정 - 모듈화
   

   • 3번 경우를 ES6로 변형한 형태입니다.

     import browser from 'browser-sync';
     const browserSync = browser.create('My server');
     

     import {get} from 'browser-sync';
        
     const ff = () => {
       return src(시작폴더)
         .pipe(dest(목적지))
         .pipe(get('My server').reload(
           {stream: true}
         ))
     };