BROWSER-SYNC
Korzystanie z niesamowitej synchronizacji przeglądarki
- aktualizuj przeglądarki (dowolne), gdy zmienia się kod źródłowy (HTML, CSS, obrazy itp.)
- obsługuje Windows, MacOS i Linux
- możesz nawet oglądać aktualizacje kodu (na żywo) za pomocą urządzeń mobilnych
Instalacja na MacOS (zobacz pomoc dotyczącą instalacji na innym systemie operacyjnym)
Zainstaluj NVM, abyś mógł wypróbować dowolną wersję Węzła
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
Jak korzystać z synchronizacji przeglądarki w przypadku witryn statycznych
Zobaczmy dwa przykłady:
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
Ta --server
opcja umożliwia uruchomienie lokalnego serwera w dowolnym miejscu terminala i --files
pozwala określić, które pliki będą śledzone pod kątem zmian. Wolę być bardziej szczegółowy dla śledzonych plików, więc w drugim przykładzie używam ack
do wyświetlania określonych rozszerzeń plików (ważne jest, aby te pliki nie miały nazw plików ze spacjami), a także używamipconfig
do znajdowania mojego bieżącego adresu IP na MacOS.
Jak korzystać z synchronizacji przeglądarki w przypadku witryn dynamicznych
Jeśli używasz PHP, Railsów itp., Masz już uruchomiony serwer, ale nie zmienia się on automatycznie po wprowadzeniu zmian w kodzie. Musisz więc użyć --proxy
przełącznika, aby poinformować synchronizację przeglądarki, gdzie znajduje się host dla tego serwera.
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
W powyższym przykładzie mam już aplikację Railsową uruchomioną w mojej przeglądarce 192.168.33.12:3000
. To naprawdę działa na maszynie wirtualnej za pomocą Vagrant box, ale mogłem uzyskać dostęp do maszyny wirtualnej za pomocą portu 3000 na tym hoście. Lubię --no-notify
zatrzymać synchronizację przeglądarki, wysyłając mi powiadomienie w przeglądarce za każdym razem, gdy zmieniam kod, i --no-open
zatrzymać zachowanie synchronizacji przeglądarki, które natychmiast ładuje kartę przeglądarki po uruchomieniu serwera.
WAŻNE: na wszelki wypadek, gdy używasz Railsów, unikaj używania Turbolinks przy programowaniu, w przeciwnym razie nie będziesz mógł kliknąć swoich linków podczas korzystania z tej --proxy
opcji.
Mam nadzieję, że komuś się przyda. Próbowałem wiele sztuczek, aby odświeżyć przeglądarkę (nawet stary post, który przesłałem na to pytanie StackOverflow przy użyciu AlfredApp dawno temu), ale tak naprawdę jest to właściwy sposób; nigdy więcej hacków, po prostu płynie.
KREDYT: Uruchom lokalny serwer sieciowy do przeładowania za pomocą jednego polecenia