[WEB] Browser sync 사용법

https://browsersync.io/

(공식 문서)

 

 

browser sync는 여러 브라우저에서 테스트하는것을 도와주는 동기화 프로그램이다.

노드 모듈이므로 node.js설치가 선행되어야 한다.

 

node.js가 설치되어있다면

https://www.npmjs.com/package/browser-sync

browser-sync

npm install -g browser-sync

로 설치해 준다.

 

설치 확인

 

이후 터미널에

browser-sync start --server --files "/css/*.css, /en/*.html, /kr/*.html, /css/*.scss"

이런식으로 입력해주면 지정한 파일들을 watching하면서 변화 시 핫로드해준다.

Local에서 접근 가능한 주소와 Local 밖에서 접근 가능한 주소도 부여(맵핑?)해준다.

페이지 외부오픈해달라하면 귀찮았는데 이런기능이 있어서 다행이다.

 

 

사실 핫로드는 Live Server(vscode extension)에도 포함되어있는거긴한데, 더 좋은 점은

 

1. 3001번 포트에서 관리자 페이지 사용 가능(브라우저 싱크는 기본적으로 3000번에서 열려있음)

=>관리자 페이지의 Network Throttle에서 느린 네트워크 환경으로 설정하여 테스트 할 수 있다. 기타 여러기능 존재

   -지금은 나오지 않고있는데,, 최신버전에서 생기는 버그인듯 하다

 

2. 브라우저 동기화

https://youtu.be/L9zfMeB2Zcc?t=141 

 

위 영상처럼 같은 서버에 접속한 브라우저들이 똑같이 움직인다.