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

Pracując nad kodem na własnym komputerze, czy to stronami w HTML, CSS czy aplikacją JavaScript, często zachodzi potrzeba automatycznego odświeżania podglądu w zewnętrznej przeglądarce po zapisaniu zmian do pliku. Można to wygodnie zautomatyzować za pomocą pakietu npm o nazwie browser-sync.

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

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

Skomentujesz?

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.