BrowserSync – podgląd zmian na żywo z gulp

Posted on Posted in Polecane, Tutorials, Tips & Tricks

Wstęp

Czym jest BrowserSync wiadomo już z poprzedniego artykułu, w tej części opiszę połączenie go ze skryptami gulp, dzięki czemu zyskujemy naprawdę ogromne możliwości.

Przygotowanie środowiska

Podstawowym elementem całej układanki jest nodejs. Gdy mamy już podstawę instalujemy sobie w katalogu projektu moduły

browser-sync„, „gulp„, „gulp-less„, „gulp-watch„, oraz tworzymy plik gulpfile.js

 

Założenia projektu

Przykład użycia jest nie zależny od użytych technologii, wystarczy że korzystamy z dowolnego serwera udostępniającego treść przez http, co więcej zakładamy że część plików jest statyczna i serwujemy je z własnego katalogu co oznacza że korzystając z BrowserSync możemy modyfikować np style istniejącej strony.

Przygotowujemy zadania gulp

Zacznijmy od prostego przykładu uruchomienia browsersync w trybie proxy.

Uruchomienie odbywa się poprzez wykonanie polecenia gulp w katalogu z plikiem gulpfile.js, ponieważ jest to zadanie nazwane default nie trzeba podawać jego nazwy.

Powyższy po uruchomieniu robi w sumie nie wiele, tworzy nam proxy do serwera uruchomionego lokalnie na porcie 8080.

Dodając jeden parametr możemy spowodować że pliki statyczne będą serwowane bezpośrednio przez proxy BrowserSync:

w ten sposób, zawartość katalogu public będzie podmapowana pod url: „/” nadpisując oryginalne ścieżki, nadal w sumie daje to nie wiele więcej niż sam BrowserSync.

Spróbujmy zrobić w takim razie kompilację plików less do css przy każdej zmianie i bezpośrednie wstrzykiwanie ich do przeglądarki, oraz reagowanie na zmianę dowolnego pliku js oraz html przeładowaniem strony.

Dodatkowo użyta została funkcja browserSync.notify która powoduje wyświetlenie komunikatu w przeglądarce.

Teraz każdą zmianę zobaczymy od razu w oknie przeglądarki bez potrzeby ręcznego odświeżania strony. Dodatkowo przy okazji dostaniemy synchronizację kliknięć i przewijania wielu okien przeglądarek dzięki czemu możemy mieć jednoczesny podgląd np. wersji mobilnej.

 

 

Dodaj komentarz

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