브라우저 동기
놀라운 브라우저 동기화 사용
- 소스 코드가 변경 될 때 브라우저 (any) 업데이트 (HTML, CSS, 이미지 등)
- Windows, MacOS 및 Linux 지원
- 휴대 기기를 사용하여 코드 업데이트 (실시간)를 볼 수도 있습니다.
MacOS 설치 (다른 OS에 설치하는 데 도움이 필요)
NVM을 설치하면 모든 노드 버전을 시도 할 수 있습니다
brew install nvm # install a Node version manager
nvm ls-remote # list available Node versions
nvm install v10.13.0 # install one of them
npm install -g browser-sync # install Browser-Sync
정적 사이트에 브라우저 동기화를 사용하는 방법
두 가지 예를 봅시다 :
browser-sync start --server --files . --host YOUR_IP_HERE --port 9000
browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000
이 --server
옵션을 사용하면 터미널의 어느 곳에서나 로컬 서버를 실행할 수 있으며 --files
변경 내용을 추적 할 파일을 지정할 수 있습니다. 추적 된 파일에 더 구체적이기를 선호하므로 두 번째 예에서는 ack
특정 파일 확장자를 나열 하는 데 사용 하고 (이 파일에는 파일 이름이 공백이 없어야 함) ipconfig
MacOS에서 현재 IP를 찾는 데 사용 합니다.
동적 사이트에 브라우저 동기화를 사용하는 방법
PHP, Rails 등을 사용하는 경우 이미 실행중인 서버가 있지만 코드를 변경할 때 자동으로 새로 고쳐지지 않습니다. 따라서 --proxy
스위치 를 사용하여 브라우저 동기화에서 해당 서버의 호스트 위치를 알려야합니다.
browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open
위의 예에서는 브라우저에서 이미 Rails 앱을 실행하고 있습니다 192.168.33.12:3000
. 실제로 Vagrant 상자를 사용하여 VM에서 실행되지만 해당 호스트의 포트 3000을 사용하여 가상 시스템에 액세스 할 수 있습니다. 같은 I --no-notify
브라우저에 날 때마다 알림 경고를 보내는 정지 브라우저 동기화에 나는 내 코드 변경 --no-open
스톱 브라우저 동기화 동작에 그 즉시로드 브라우저 탭 서버 시작합니다.
중요 : Rails를 사용하는 경우 개발시 터보 링크를 사용하지 마십시오. 그렇지 않으면 --proxy
옵션 을 사용하는 동안 링크를 클릭 할 수 없습니다 .
누군가에게 도움이되기를 바랍니다. 브라우저를 새로 고치기 위해 많은 트릭을 시도했습니다 (AlfredApp를 사용 하여이 StackOverflow 질문에 제출 한 오래된 게시물조차도). 그러나 이것은 실제로 갈 길입니다. 더 이상 해킹하지 않고 그냥 흐릅니다.
크레딧 : 하나의 명령으로 로컬 라이브 리로드 웹 서버 시작