Browsersync na propsie

Browser-sync czyli jedna z najlepszych rzeczy jakie wymyślił człowiek. W tym tekście kilka ustawień by przyjemniej nam się z nim pracowało.

Co to jest Browsersync

Browsersync to narzędzie, które po odpaleniu serwuje nam stronę na na mikro serwerze. Dzięki temu strona taka może być automatycznie odświeżana gdy zmieni się zawartość jej plików, może być oglądana równocześnie na wielu urządzeniach, a dodatkowo takie przeglądanie odbywa się synchronicznie. Gdy na naszym PC przewiniemy stronę w dół, zrobimy to równocześnie na wszystkich urządzeniach, którymi w danej chwili oglądamy naszą stronę. Gdy klikniemy na jakiś przycisk, równocześnie klikniemy w niego na każdym urządzeniu itp.

No a po co - skoro w edytorach mamy np. LiveServer? Można i tak, tylko pamiętaj, że wtedy uzależniony jesteś od danego edytora. Gdy używasz Browsersync zewnętrznie, wtedy możesz sobie pisać w czym chcesz.

Instalacja Browsersync

Aby zainstalować Browsersync, potrzebujemy mięć zainstalowany NodeJS. O samej instalacji Node pisałem tutaj.

Browsersync instalujemy w zależności od potrzeb. Może to być instalacja per projekt, może być też globalna. Zacznijmy od tej drugiej. Zgodnie z oficjalną stroną w terminalu wpisujemy:


    npm i browser-sync -g

Od tego momentu jeżeli w danym katalogu chcemy włączyć Browsersync, wpisujemy polecenie:


browser-sync start

co odpali naszego bohatera.

Pierwsze dwa adresy to adresy, na które się łączymy. Jeżeli mamy jakieś urządzenie podłączone do tej samej sieci, wystarczy, że połączymy się na adres External, co powinno otworzyć nam widok ze stroną z danego katalogu. Domyślnie otwierany jest plik index.html.

Te dwa pozostałe adresy otwierają panel zarządzania daną instancją Browsersynca, gdzie możemy ustawić co ma działać równocześnie na różnych urządzeniach (wspomniane równoczesne przewijanie, klikanie itp.)

Od razu przy takim odpaleniu warto podać kilka dodatkowych parametrów, które opisane są na tej stronie:


browser-sync start --server --no-notify --files "**/*.html, **/*.css, **/*.js"

co spowoduje, że Browsersync otworzy naszą stronę w przeglądarce, ale też będzie nasłuchiwał zmian w plikach html, css i js. Jeżeli je wykryje, odświeży naszą stronę. Dodatkowo za pomocą parametru --no-notify wyłączyliśmy upierdliwe powiadomienie o tym, że strona została przeładowana (które normalnie pojawia się w prawym górnym rogu strony). Parametry na powyższej stronie warto sobie przejrzeć, bo dla przykładu jeżeli chcemy zmienić domyślną przeglądarkę, wystarczy dodać parametr:


`--browser "Firefox"`

przy czym nazwa przeglądarki uzależniona jest od systemu (1, 2).

Browser-sync jako menu kontektowe

Powyższy proces odpalania Browsersync można sobie jeszcze bardziej usprawnić. Ja to zrobiłem na 2 sposoby.

Pierwszy z nich to dodanie do menu kontekstowego opcji, która będzie odpalać powyższe polecenie w danym katalogu. Aby to zrobić stworzyłem mini plik, który dodaje wpis do rejestru.

Jeżeli też chcesz dodać sobie taką opcję, koniecznie przed odpaleniem tego pliku otwórz go w jakimś edytorze (np. VSC). By potem nie było, że ci system rozwaliłem.

Po odpaleniu tego pliku i potwierdzeniu, że chcemy dodać odpowiednią informację do rejestru, po kliknięciu prawym przyciskiem na dany folder pojawi nam się odpowiednia opcja:

Ta czerwona ikonka, którą mam przy danej opcji jest u mnie wrzucona do katalogu Window. Ścieżka podana jest w powyższym pliku reg, więc w razie czego jak chcesz to ją sobie zmień. Same ikonki można ściągnąć z wielu miejsc w necie (np. z tego) - wystarczy szukać plików z rozszerzeniem .ico. Ewentualnie w ogóle tą opcję usunąć.

Browser-sync w Cmder

Co to jest Cmder? Moim zdaniem na chwilę obecną to najlepszy terminal dla Windowsa (chociaż wiadomo, że każdemu co innego pasuje). Przez długi czas używałem ConEmu. Cmder to ConEmu plus kilka fajnych dodatków zaporzyczonych sobie z Linuxa.

Po lekkim ustawieniu tego narzędzia według instrukcji z tej strony , używanie go staje się zwyczajnie bajką.

Jednym z takich ustawień są aliasy, czyli skróty do poleceń. Na powyższej stronie jest opisane jak oficjalnie je zrobić, ale szczerze mówiąc jest na to bardzo prosta metoda. W katalogu, w którym amym Cmder edytujemy plik config/user_aliases.cmd. Na jego końcu dodałem do niego linijkę:


bs=browser-sync start --server --no-notify --files "**/*.html, **/*.css, **/*.js"

Od tej pory po wpisaniu w terminal cmder polecenia bs odpala mi się Browsersync.

Browser-sync, Gulp i Php

W artykule o Gulpie pisałem już jak zainstalować w nim Browsersync.

Instalacja tamta działała na plikach HTML. Osobiście dość często działam też w PHP, dlatego czasami korzystam z ciut innej konfiguracji.

Poniższy mini opis będzie opierał się na tamtej konfiguracji.

Po pierwsze musimy doinstalować dodatkowy mechanizm czyli gulp-connect-php.

Po instalacji dodajemy go do naszej instalacji oraz nieco modyfikujemy naszą konfigurację:


...
const connect = require("gulp-connect-php");
const browserSync = require('browser-sync'); //tu już nie ma create()

//zmieniamy lekko task server
const server = (cb) => {
    connect.server({
        base : "./dist",
        port:8010,
        keepalive: true
    }, function() {
        browserSync({
            proxy: "localhost:8010",
            host: "superAdresStrony.lh", //adres na jakim będzie External
            notify: false,
            ghostMode: {
                clicks: true,
                location: true,
                forms: true,
                scroll: false
            }
        });
    });
    cb();
}

const watch = function() {
    ...
    //dodajemy nasłuch na pliki .php
    gulp.watch("**/*.php").on("change", Browsersync.reload);
};

Cała reszta konfiguracji pozostaje bez zmian.

Jeżeli chodzi o parametr host w powyższej konfiguracji, wskazuje on na adres (VirtualHost), na jakim normalnie odpalaliśmy naszą stronę. Temat przewijał nam się już w artykule o lokalnym serwerze.

Ciekawy artykuł na podobne tematy znajduje się pod adresem https://garywoodfine.com/php-server-Browsersync-gulp/

Tworzenie layoutu 1

Sprawa ogólnie wygląda tak - jest do pocięcia layout. Wraz z takim cięciem pobawimy się gulpem, webpackiem, sasem, es6 i podobnymi rzeczami, które niektórzy wykorzystują w codziennej pracy.

Poniższy tekst jest opisem warsztatu, jaki kiedyś wykonywaliśmy na zajęciach. Dużo lania wody, dużo rzeczy, które każdy zna - swoiste podsumowanie. A może i między zdaniami jakaś głupotka a i ciekawa technika się znajdzie?

Czytaj więcej

Gulp

W poniższym tekście zajmiemy się Gulpem. Będzie to jeden z kilku tekstów dotyczących ustawiania środowiska pracy jakie sam często stosuję w pracy. Przyda się w jednym z kolejnych artykułów o wordpressie, gdzie będziemy korzystać z takich technik.

Czytaj więcej
comments powered by Disqus
Poprzednia strona