Browsersync Browsersync는 웹 개발 중 파일 변경 사항과 스크롤, 클릭, 폼 입력 등의 상호작용을 여러 기기 간에 실시간으로 자동 동기화합니다.
설치 방법
# 전역 CLI 설치
npm install -g browser-sync
# 또는 npx를 통한 즉시 실행
npx browser-sync start --server
정적 개발 서버 시작
정적 파일을 호스팅하고 HTML/CSS/JS 파일 변경을 실시간 감지하여 새로고침:
browser-sync start --server "public" --files "public/**/*.html, public/**/*.css, public/**/*.js"
기존 백엔드 서버 프록시 연결
Rails, Node, PHP 등 기존 로컬 개발 서버를 감싸서 라이브 리로드 기능 활성화:
browser-sync start --proxy "localhost:3000" --files "**/*.css, **/*.js, **/*.html"
주요 CLI 옵션
| 옵션 | 설명 |
|---|---|
--server, -s |
내장 정적 HTTP 파일 서버 실행 |
--files, -f |
감시할 파일 경로 또는 glob 패턴 |
--port |
사용자 지정 서버 포트 지정 (기본값: 3000) |
--proxy, -p |
기존 로컬 웹 서버 주소 프록시 연결 |
--no-open |
서버 시작 시 브라우저 자동 실행 방지 |
--no-notify |
브라우저 화면 내 플로팅 알림 배지 비활성화 |
--tunnel |
공용 URL을 통해 로컬 서버를 인터넷에 외부 공개 |