Automatyczne odświeżanie podglądu strony live reload

Jak uzyskać automatyczne odświeżanie podglądu strony?

BrowserSync to narzędzie do automatycznego odświeżania podglądu stron internetowych po wprowadzeniu zmian do plików HTML, CSS, PHP lub JavaScript. Jest to bardzo popularne narzędzie wśród deweloperów, ponieważ pozwala na oszczędność czasu i zwiększa wydajność pracy.

BrowserSync działa na zasadzie serwera, który pozwala na łatwe i szybkie przeglądanie zmian w czasie rzeczywistym. Narzędzie to działa na wielu przeglądarkach internetowych, w tym na Google Chrome, Firefox, Safari, Opera i innych.

Główną zaletą BrowserSync jest łatwość w konfiguracji. Wymaga on jedynie zainstalowania narzędzia poprzez menedżera pakietów np. NPM, a następnie dodania odpowiedniego kodu do pliku konfiguracyjnego. Po uruchomieniu serwera BrowserSync automatycznie monitoruje zmiany w plikach i odświeża podgląd strony w przeglądarce internetowej.

Instalacja wymaganych pakietów

browser-sync to moduł dla Node.js, platformy dla aplikacji sieciowych. Istnieją wygodne instalatory dla Node.js dla Windows, czy MacOS i Linux, więc jeśli jeszcze nie posiadasz zainstalowanego Node.js, to tutaj znajdziesz instalatory.

Po zainstalowaniu Node.js i npm, zweryfikuj poprawność instalacji za pomocą komendy terminala:

node -v lub npm -v

Jeśli wyświetlone zostaną informacje o wersjach tych pakietów, możesz przejść dalej do instalacji pakietu browser-sync

Instalacja browser-sync

Menedżer pakietów Node.js (npm) posłuży nam do zainstalowania browser-sync z repozytorium pakietów. Otwórz okno terminala (np. uruchamiając polecenie cmd.exe w Windows) czy też bezpośrednio w Pająku i uruchom następujące polecenie:

npm install -g browser-sync

Spowoduje to pobranie plików instalacyjnych browser-sync z repozytorium pakietów npm, a następnie ich globalną instalację. Dzięki temu będziesz mógł używać browser-sync z dowolnego projektu (katalogu) w systemie.

Uruchamianie i synchronizacja (live reload) zmian w przeglądarce

Prostym zastosowaniem może być np. obserwowanie zmian we wszystkich plikach CSS w projekcie (znajdują się np. w katalogu css) i aktualizowanie podglądu w przeglądarce, jeśli nastąpi zmiana czyli z ang. live reload. Przejdź w oknie terminala do katalogu projektu i uruchom polecenie:

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

I to wszystko. Zawartość w przeglądarce zostanie automatycznie odświeżona, jak tylko browser-sync wykryje zmiany wprowadzone do dowolnego pliku css we wskazanym katalogu.

Referencje:
Strona projektu browser-sync
Instalatory Node.js i NPM