3 metody na automatyczne odświeżanie przeglądarki

() translation by (you can also view the original English article)

W tym poradniku wideo, dowiesz się jak odświeżać przeglądarkę–a konkretnie, jak ją automatycznie odświeżać–i w związku z tym, omówimy trzy metody. Zacznijmy!

Obejrzyj poradnik

Rozważmy typową pracę w front-end: jesteś w edytorze kodu, być może piszesz w języku HTML, następnie dodajesz kod CSS, który obejmuje rozszerzenie Sass, a wszystko testujesz w przeglądarce. Po każdej zmianie w kodzie, przechodzisz z powrotem do przeglądarki, odświeżasz ją i widzisz wprowadzone zmiany.

Procedura wydaje się bardzo krótka, ale z biegiem czasu staje się zbyt czasochłonna. Może być z pewnością przyśpieszona. Przyjrzyjmy się trzem narzędziom, które automatycznie zajmą się całym procesem odświeżania.

LiveReload

LiveReload istnieje już od jakiegoś czasu i jest świetnym narzędziem. Dostępne jako aplikacja dla Mac OS i Windows, która kosztuje (w chwili pisania poradnika) 9,99 dolarów.

Aby rozpocząć, wstaw fragment kodu JavaScript do plików, nad którymi pracujesz lub użyj go w połączeniu z rozszerzeniem dla przeglądarki. Jeśli skorzystasz z rozszerzenia, będziesz musiał skonfigurować ustawienia, aby zezwolić na dostęp do plików.

Przydatne materiały

Grunt Watch

Jeśli czujesz się komfortowo z wierszem poleceń, gorąco polecam skorzystanie z tej opcji. Grunt jest systemem do uruchamiania zadań opartym na JavaScript, którego możesz użyć do zautomatyzowania wielu zadań, normalnie wykonywanych ręcznie–włącznie z odświeżaniem przeglądarki.

Wykorzystamy wtyczkę Grunt Watch (właściwa nazwa to "grunt-contrib-watch"), którą załaduję za pomocą NPM.

Zadanie obserwacji w pliku gruntfile.js obejmuje opcję livereload: true, która obserwuje wszystkie pliki projektu.

watch: {
    
    files: ['*.*'],
    options: {
        livereload: true
    }

}

Ponownie, muszę włączyć rozszerzenie LiveReload w przeglądarce, aby wszystko działo tak jak wcześniej, ale tym razem z możliwością uruchamiania dodatkowych zadań.

Materiały Grunt

Browsersync

Metoda numer trzy, która szybko stała się moją ulubioną, to Browsersync. Browsersync jest czymś więcej niż tylko narzędziem do odświeżania stron internetowych; umożliwia również przeprowadzanie synchronizowanych testów w przeglądarce.

Aby wszystko działało, musisz rozpocząć od instalacji Node.js. Aby dowiedzieć się jak to zrobić, zapoznaj się z poradnikiem Wiersz poleceń dla projektowania stron internetowych: omówienie pakietów firm trzecich. Po instalacji Node, zainstaluj Browsersync za pomocą poniższego polecenia NPM (Node Package Manager):

1	npm install g- browser-sync

Aby użyć BrowserSync, musimy wpisać kolejne polecenia, które będą się zmieniać w zależności od tego, co chcemy zrobić. Na przykład, poniższe polecenie skonfiguruje statyczne środowisko serwera i zasugeruje, aby Browsersync obserwował wszystkie pliki:

1	browser-sync start --server --files "."

Aby dowiedzieć się więcej o różnych polecenia, zapoznaj się z dokumentacją narzędzia.

Przydatne materiały

Podsumowanie

To wszystko! Mam nadzieję, że poradnik przekonał cię, że nie warto marnować czasu na odświeżanie i lepiej wypróbować przynajmniej jedną z metod omówionych w tym poradniku. Jeśli znasz jakieś inne sposoby, napisz nam o nich w komentarzu!