Browsersync - Ihr Testassistent

Wenn Sie Websites erstellen, haben Sie wahrscheinlich manchmal gesehen, wie sich das Erscheinungsbild Ihrer Seite auf verschiedenen Browsern ändert, ganz zu schweigen von einer Vielzahl von Geräten. Je nachdem, wie viele verschiedene Konfigurationen wir überprüfen möchten, wächst die für die Tests benötigte Zeit schnell und die Begeisterung wird wahrscheinlich mit der Wiederholung derselben Aktion auf einem anderen Gerät ähnlich abnehmen. Dank Browsersync kann eine Aktion jedoch gleichzeitig nicht nur in mehreren Browsern, sondern auch auf mehreren verschiedenen Geräten ausgeführt werden.

Wie funktioniert es?

Browsersync führt einen kleinen Server aus, der jeder Seite ein Skript einfügt, das es ihnen ermöglicht, über die WebSocket-Technologie mit dem Server zu kommunizieren. Wenn bestimmte Ereignisse auf der Seite auftreten, wie z.B. CSS-Dateiänderungen, das Wechseln zwischen Seiten, das Scrollen der Seite, das Eingeben von Daten in ein Formular usw., kommuniziert der Server dies an alle verbundenen Geräte. Dank dieser Funktion wird die Information unabhängig davon, auf welchem Gerät und welche Aktion ausgeführt wird, von allen empfangen. Sie als Nutzer müssen nichts darüber wissen, da alles "automagisch" geschieht.

Wie anfangen?

Zuerst müssen wir Node.js und Browsersync installieren. Die Installation von Node.js (die unten gezeigten Befehle wurden auf Linux getestet, Nutzer anderer Systeme sollten die Websites der Projekte überprüfen),

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash 

apt-get install -y nodejs

Globale Installation von Browsersync

npm install -g browser-sync

Es bleibt nichts anderes zu tun, als den Server zu starten und seine Funktionsweise zu überprüfen. Wir können dies auf zwei Arten tun, abhängig von der Art des Projekts. Für statische Seiten wird es so sein:

browser-sync start --server --files "css/*.css"

Im Falle von dynamischen Seiten, wenn Sie einen lokalen WWW-Server verwenden, müssen Sie Browsersync im Proxy-Server-Modus starten:

browser-sync start --proxy "myproject.dev" --files "css/*.css"

Nach der Ausführung eines der oben gezeigten Befehle sollte ein Code ähnlich dem unten stehenden in Ihrer Konsole erscheinen. Gleichzeitig sollte Browsersync in Ihrem Standardbrowser die Projektseite mit bereits gestartetem Änderungsverfolgungsdienst öffnen 

[BS] Proxying: http://127.0.0.1

[BS] Zugriffs-URLs:

-------------------------------------------

      Lokal: http://myproject.dev:3000

   Extern: http://192.168.1.1:3000

-------------------------------------------

         UI: http://localhost:3001

UI Extern: http://192.168.1.1:3001

-------------------------------------------

[BS] Dateien beobachten…

Die ersten beiden Adressen (Lokal und Extern) sollten zur Hauptseite Ihres Projekts führen. Abgesehen davon - wie der Name schon sagt - kann die erste nur für die Kommunikation zwischen Browsern innerhalb Ihres Computers verwendet werden, auf dem der Dienst gestartet wurde. Die zweite sollte in einem bestimmten Netzwerk funktionieren und kann für die Kommunikation mit anderen Geräten verwendet werden, z.B. indem das Telefon mit einem WLAN-Netzwerk verbunden wird, das Ihr Computer verwendet. Der Funktionsumfang der nächsten beiden Adressen ist identisch mit den oben gezeigten; jedoch führen diese Adressen zu einem UI-Bildschirm (wie im Bild unten gezeigt), der es uns ermöglicht, unter anderem:

• die Adressen unseres Servers zu überprüfen,
• zu überprüfen, welche Geräte damit verbunden sind,
• einen weiteren Server für unser Projekt zu starten und seine Konfiguration durchzuführen,
• einstellen, welche Aktionen auf der Seite verfolgt werden,
• den Webverlauf zu überprüfen,
• Informationen über installierte Plug-ins zu erhalten,
• die Optionen einzuschalten, die uns beim Debuggen helfen.

Browsersync nicht nur für Tester

Da Browsersync es Ihnen ermöglicht, Änderungen in CSS und HTML auf den Seiten zu verfolgen, ohne dass ein Neuladen erforderlich ist, scheint es ein großartiges Werkzeug zur Unterstützung der Arbeit von Entwicklern zu sein. Wenn Sie in Ihrer Arbeit Grunt oder Gulp verwenden, sollten Sie keine Probleme haben, Browsersync zu Ihrer Umgebung hinzuzufügen. Es hilft Ihnen, Zeit zu sparen und reduziert die Möglichkeit, von der Funktionsweise Ihrer Website mit verschiedenen Browserauflösungen überrascht zu werden.

Browsersync und Docker

Ich möchte all jene beruhigen, die wie wir Docker mögen,  (wenn jemand es nicht kennt - empfehle ich den Besuch der Projektseite) dass es möglich ist, Docker-Images mit Browsersync zu verwenden. Obwohl es derzeit kein offizielles Image gibt, kann ich sicher ustwo/browser-sync empfehlen, das derzeit am populärsten ist. In diesem Fall muss nichts anderes als Docker installiert werden, dessen Installation wir bereits in unserem Blog behandelt haben - Sie müssen nur den Server starten, wie im vorherigen Fall, indem Sie eine der beiden möglichen Konfigurationen verwenden.
Für statische Seiten:

docker run -dt 
          --name browser-sync 
          -p 3000:3000 
          -p 3001:3001 
          -v $(PWD):/source 
          -w /source 
          ustwo/browser-sync 
          start --server --files "css/*.css"

Für dynamische Seiten:

docker run -dt 
          --name browser-sync 
          --link myapp 
          -p 3000:3000
          -p 3001:3001
          ustwo/browser-sync 
          start --proxy "myapp:80" --files "css/*.css"

Wo "myapp" der Name eines Containers mit unserer WWW-Seite ist.
Auf den ersten Blick sollte alles in ähnlicher Weise wie bei der Konfiguration ohne Docker starten; beachten Sie jedoch, dass in diesem Fall die externe Adresse (Extern) die Adresse des Docker-Containers sein wird und ohne zusätzliche Konfiguration für externe Geräte nicht sichtbar sein wird.
Fast alle Drupal-Entwicklungsprojekte, an denen wir bei Droptica arbeiten, werden mit Docker erstellt. Daher ist es für uns in diesem Fall viel bequemer, den Browsersync-Start auf die docker-compose.yml-Konfigurationsdateien und die Dockerfile-Datei zu verlagern.

browser-sync:

 build: ./Dockerfiles/browserync

 links:

   - myapp:myapp

  volumes:
   - ./docker/config.js:/source/config.js
 command: start --proxy "myapp:80" --files "css/*.css" --no-ui --port 80

 environment:

     VIRTUAL_HOST: browsersync.{{HOST}}

Der oben gezeigte Pfad in einem Build-Parameter bedeutet einen Ort, an dem sich die Dockerfile-Datei befindet. Währenddessen ist myapp der Name eines Containers mit unserer WWW-Seite. Der virtuelle Host funktioniert gut, wenn auf einem bestimmten Server mehr als ein Projekt existiert, das spezifische Ports verwenden möchte. Sie können auch sehen, dass wir auf den Bildschirm für eine UI-Konfiguration verzichtet haben. Dies bedeutet jedoch nicht, dass wir nichts in den Browsersync-Einstellungen ändern können. In diesem Fall geschieht dies durch das Hinzufügen eines anderen Parameters zu dem "command" (z.B. --no-ui --port 8000) oder das Überschreiben der js-Datei (./docker/config.js:/source/config.js), die ähnlich aussehen sollte wie diese im Image. Wenn wir die Konfiguration nicht überschreiben möchten, sollte der Volumes-Parameter entfernt werden. Die vollständige Befehlsliste ist in den Browsersync-Dokumentationen verfügbar.

Dockerfile:

​​​​​​​FROM ustwo/browser-sync

EXPOSE 80

In der Dockerfile-Datei müssen Sie nur daran denken, einen Port zu öffnen, damit ngnix unseren Dienst an die angegebene Adresse umleiten kann. Natürlich ist es möglich, ngnix so zu konfigurieren, dass durch die Verwendung eines virtuellen Hosts beide Ports freigelegt werden, um den Konfigurationsdienst mit dem UI-Bildschirm ebenfalls zu verwenden. All dies hängt von unseren aktuellen Bedürfnissen ab.

Ich hoffe, dass ich Sie mit diesem Text zumindest ein wenig davon überzeugt habe, mit Browsersync zu experimentieren und darüber nachzudenken, ob es Ihnen bei Ihrer Arbeit helfen kann.