Browsersync – czyli podgląd zmian w przeglądarce na żywo

Posted on Posted in Inne

Proces tworzenia czy modyfikowania strony wygląda podobnie nie zależnie od tego w jakim języku piszemy kod. Dopisujemy jakąś funkcjonalność, uaktualniamy kod wynikowy (jeśli jest taka konieczność) i sprawdzamy jak zmiany wyglądają w przeglądarce odświeżając otwartą zakładkę. Jeśli piszemy kod css/html/javascript czasami potrzebujemy sprawdzić efekt w kilku przeglądarkach więc przeładowujemy stronę w każdej z nich, może nie trwa to jakoś bardzo długo, ale jest to wielokrotnie powtarzająca się czynność która w ciągu dnia pracy z kodem potrafi „ukraść” nam sporo czasu. Okazuje się jednak że da się prościej i szybciej i na dodatek nie zależnie od tego w czym piszemy kod, a z pomocą przychodzi nam Browsersync czyli aplikacja oparta na nodejs. Monitoruje ona pliki które zmieniamy i odświeża stronę, lub po prostu wstrzykuje pliki do przeglądarki (np. css), a w dodatku nie wymaga instalacji i konfiguracji żadnych dodatkowych pluginów. Browsersync domyślnie synchronizuje akcje na wszystkich otwartych stronach, dzięki czemu kliknięcie w przycisk w jednej z otwartych przeglądarek wywoła taką samą akcję w pozostałych.

Wymagania i instalacja

Na początek musimy mieć zainstalowane nodejs, informacje jak to zrobić znajdziemy na stronie projektu: https://nodejs.org/en/.

Jeśli mamy już nodejs wystarczy prosta komenda:

Po zakończeniu instalacji mamy już gotowe do pracy narzędzie.

Zaczynamy pracę

Strona statyczna

Jeśli tworzymy szablon strony, lub po prostu stronę składającą się ze statycznych plików html/css/js wystarczy uruchomić narzędzie za pomocą komendy:

Spowoduje ona uruchomienie lokalnego serwera na porcie 3000, oraz otworzenie strony w przeglądarce.

Konsola po uruchomieniu wygląda tak:

Od teraz każda zmiana pliku css w katalogu css spowoduje wstrzyknięcie go do przeglądarki (bez przeładowywania strony), dzięki czemu praktycznie natychmiast zobaczymy efekt swoich prac, jeśli dodamy do plików monitorowanych pliki typu js lub html ich zmiana spowoduje automatyczne przeładowanie strony w przeglądarce.

Strona dynamiczna (proxy)

BrowserSync może również utworzyć dla nas proxy do strony na serwerze, dzięki temu nawet jeśli korzystamy języków typu php czy java nadal możemy skorzystać z opisanych funkcji. Wystarczy podać w parametrach vhost url tworzonej storny i zamiast parametru server podać parametr proxy:

 

 

3 thoughts on “Browsersync – czyli podgląd zmian w przeglądarce na żywo

  1. Fajny pro-tip, ale chyba we wielu frameworkach możemy ustawić zdalne odświeżanie co jakiś czas. Tak czy inaczej spoko sprawa. 🙂 Pozdrawiam

  2. Świetna sprawa, to taka dodatkowa para rąk dla programisty 🙂 Browsersync naprawdę potrafi zaoszczędzić trochę cennego czasu. Co najlepsze jest to open-source, czyli możemy korzytać z niego całkowicie bezpłatnie. Również polecam i pozdrawiam.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *