웹작업을 하다 보면, 각종 파일들을 수정하고 해당 페이지를 F5로 다시 고치고, 하는 작업을 수도 없이 해야 한다.
특히, css를 파일들을 수정할 때는 일반적인 새로고침이 아닌, 캐시도 모두 비우는 새로고침을 해야 제대로 적용이 된다.
이런 작업을 쉽게 해주는 방법 중에 하나가 node.js의 패키지중 하나인 browsersync를 사용하는 것이다.
해당 환경이 구축되면, css파일을 수정직후 바로 수정된 사항을 웹페이지에서 확인 할 수 있을 것이다.
우선 자세한 메뉴얼이나 설치 방법은 아래의 링크를 참고 하기 바란다.
링크:
https://browsersync.io/
일단 node.js를 설치하자.
링크:
https://nodejs.org/ko/
위 링크에서 노드를 받고 설치하자.
필자는 윈도우용을 받아서 설치 했다.
설치가 끝났으면, window키 + r 을 눌러 cmd 창을 실행 시키고,
npm install -g browser-sync
위 명령어를 실행하여 browser-sync패키지를 설치한다.
자 이제 browser-sync설치가 끝났으면 실행 해보자.
C:\>browser-sync start --server --files "C:\flask\b1ix\static\**\css\*.css"
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.0.34:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.34:3001
-------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
[BS] File event [change] : C:\flask\b1ix\static\**\css\my.css
일단은 따로 서버를 돌리지 않고 사용했을때의 사용법이다.
위처럼 특정 폴더의 css파일들 체크 하도록 옵션을 주면, 해당 파일중 하나라도 바뀌면 event에서 해당 사항을 캐치하여 바뀐것을 캐치해준다.
하지만, 위처럼 작업하는 경우는 드물테고 아래처럼 이미 특정 서버를 돌리고, 해당 서버를 실시간으로 감시해야 할 경우가 더 많을 것이다.
C:\>browser-sync start --proxy localhost:5001/my --files "C:\flask\b1ix\a\**" "C:\flask\b1ix\b\**"
[BS] Proxying: http://localhost:5001
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000/my
External: http://192.168.0.34:3000/my
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.34:3001
----------------------------------------
[BS] Watching files...
[BS] File event [change] : C:\flask\b1ix\static\admin\css\my.css
[BS] File event [change] : C:\flask\b1ix\static\admin\css\my.css
[BS] File event [change] : C:\flask\b1ix\static\admin\css\my.css
[BS] File event [change] : C:\flask\b1ix\static\admin\css\my.css
--proxy 옵션에서 필자가 현재 테스트 중에 있는 서버 주소인, "localhost:5001/my"가 있고,
--files 옵션에, 해당 서버의 파일들이 위치한 주소인 "C:\flask\b1ix\**"를 입력하면,
실행시 localhost:3000/my주소에 해당 페이지가 출력되어, "C:\flask\b1ix\**" 아래에 있는 어떤파일을 바꾸던 캐치하여 수정된 사항을 바로 반영해 보여준다.
여러 곳을 감시하고 싶으면, --files 뒷쪽에 스페이스로 구분하여 주소를 적으면 된다.