browser-sync 모듈 .get() 메소드

브라우저를 ‘리프레쉬해야하는’ 함수가 끝났을 때 어떤 파일들을 변경했는지 알리는 옵션이 있습니다.
바로 stream 옵션입니다.

사용법은 다음과 같습니다.

function funcName() {
    return src("src/")
        .pipe()
        .pipe(browserSync.reload({
            stream: true
        }))
}

위와 같이 적용하면 funcName 함수가 종료할 때 어떤 파일들을 수정했는지 해당 목록을 string 데이터로 출력하고 브라우저가 리프레쉬됩니다.

하지만 gulpfile을 모듈화하면서 문제가 생겼습니다.
모듈화하면서 위의 stream 옵션이 실행은되나 서버에서 어떤 파일이 수정되었는지 값을 못받았습니다.
그리고 브라우저 리프레쉬도 자동으로 안됐습니다.
수정된 것은 반영되나 다시 f5 버튼으로 브라우저를 새로고침해야 적용된 모습을 볼 수 있었습니다.

원인

browserSync = require("browser-sync").create()

위의 식이 원인이었습니다.

기존

하지만 걸프 모듈화를 통해 sass/index.js 파일에도

browserSync = require("browser-sync").create()

html/index.js 파일에도

browserSync = require("browser-sync").create()

…

이렇게 추가하다보니 각 파일별로 인식하는 server가 달랐던 것입니다.
그래서 진짜로 실행된 server는 해당 stream 값을 받지 못했고 그래서 어떤 파일이 수정되었는지 정보도 못받았으므로 브라우저를 리프레쉬 하지 않았던 것입니다.

해결방법

서버를 실행시키는 모듈에 server 이름을 넣습니다.
그리고 브라우저 리프레쉬가 필요한 모듈에

Server 모듈을 require 해주고 해당 서버의 이름을 get 메서드에 적어줍니다.
이렇게하면 stream 값을 실행된 서버에 정확히 전달해 브라우저가 파일이 수정되었다를 인식하고 브라우저를 리프레쉬합니다.