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

Aktualizacja: podgląd HTML i CSS w 2026 roku

BrowserSync nadal pozwala odświeżać stronę po zmianie plików. Najwygodniej dodać go do konkretnego projektu, aby zależność była zapisana razem z jego kodem. W katalogu projektu uruchom:

npm install --save-dev browser-sync
npx browser-sync start --server --files "index.html" "css/*.css" "js/*.js"

--server udostępnia statyczne pliki z bieżącego katalogu, a --files wskazuje pliki do obserwowania. Zmień ścieżki, jeśli Twoje arkusze i skrypty leżą w innych folderach. Otwórz adres lokalny podany w terminalu — podgląd z dysku otwarty jako file:// nie korzysta z serwera BrowserSync.

Jeśli projekt działa już na lokalnym serwerze PHP, użyj trybu proxy zamiast drugiego serwera statycznego:

npx browser-sync start --proxy "http://localhost:8000" --files "*.php" "css/*.css" "js/*.js"

BrowserSync obserwuje pliki i odświeża przeglądarkę; nie kompiluje za Ciebie kodu ani nie zastępuje serwera PHP. Przykłady opcji --server, --proxy i --files są opisane w dokumentacji BrowserSync. Kod możesz edytować i uruchamiać polecenia w terminalu Pająka V6, aktualnego edytora Cream Software dla Windows.

Poniżej zachowaliśmy pierwotny poradnik z 2021 roku jako kontekst historyczny. Globalna instalacja opisana w starszych krokach nadal działa, ale do projektu współdzielonego lepiej użyć instalacji lokalnej pokazanej wyżej.

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
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 V6 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