[Node.js] 프론트 개발을 위한 BrowserSync 설치 및 사용

browsersync 

웹사이트 https://www.browsersync.io/

프론트 작업, 퍼블리싱 작업을 하다보면 캐시지옥에 빠지게 된다.
수정 -> 저장 -> F5연타 -> 반영이 안되는군.. -> 캐시정리 -> F5 의 연속..
이 작업이 싫어서 버전 쿼리스트링을 timestamp 로 넣어 새로고침때마다 새로 불러오게 처리하였다.

<link href="./../_public/css/style.css?v=115835156" rel="stylesheet" type="text/css">

browsersync은 이 작업을 좀더 편안하게 해주는 브라우저 테스트 툴이다.

[설치방법]

1. Node.js 설치
2. Browsersync 설치

npm install -g browser-sync

3. Browsersync 시작
1) 정적 html 파일만 사용하는경우

browser-sync start --server --files "css/*.css"

2) 동적사이트 (로컬서버)를 사용하는 경우

browser-sync start --proxy "localhost:8012" --files "D:\php\_publish"
[Browsersync] Proxying: http://localhost:8012
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://172.16.131.27:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...

NPM 을 통해 browsersync 을 설치하고 실행하면 Local, UI 주소가 나타난다.
UI: http://localhost:3001 으로 접속하면 관리자 화면이 실행된다.
이곳을 통해 접속된 모든 브라우저를 제어할 수 있다.

프론트단을 node.js으로 개발할 경우 유용하게 사용할 수 있을 것 같다.