Cross Browser CSS Injection

Die Fähigkeit, bei jeder Dateänderung neu modifiziertes CSS einzuschleusen (ohne die Seite neu zu laden), ist die Art von Workflow-Verbesserung, die man erst dann wirklich zu schätzen weiß, wenn man sie verliert.

Genau das ist mir neulich passiert.

Seit mindestens 12 Monaten benutze ich Grunt und die LiveReload Browser-Erweiterung, um CSS zu injizieren, wenn meine Dateien geändert wurden. Es fühlte sich wie ein wirklich schöner Workflow an, bis ich an einem Projekt arbeiten musste, das IE7 & 8-Unterstützung erforderte. Das LiveReload-Plugin, das ich verwendete, unterstützte einfach keine älteren IE-Versionen. Zum ersten Mal seit über einem Jahr musste ich jedes Mal manuell die Seite neu laden, wenn ich an meinem CSS etwas änderte. Es war schmerzhaft. Deshalb habe ich Browser-Sync entwickelt.

Einführung in Browser-Sync

Browser-sync ist ein Tool, das Ihnen browserübergreifende CSS-Injektion ermöglicht. Es überwacht Ihre Dateien und sobald Sie eine Änderung vornehmen, informiert es alle verbundenen Browser, das neue CSS neu zu laden (zu injizieren). Dies geschieht alles, ohne die Seite neu zu laden. Am wichtigsten ist, dass es in jedem Browser funktioniert, auf dem ich es testen konnte.

Wie Browser-Sync entstanden ist

Ich wusste von Anfang an, dass es an sich einfach genug ist, neues CSS in Browser zu einfügen. Das Problem, das ich lösen musste, war, wie eine Änderung im Dateisystem zurück an die Browser kommuniziert werden kann. Die Grunt + LiveReload-Kombination, die ich zuvor verwendete, basierte auf Web Sockets. Deshalb gab es keine Unterstützung für ältere IE-Versionen.

Begrüßen Sie Socket.io

Ich hatte meinen Geistesblitz, als ich Karma zum Ausführen von Unit-Tests verwendete. Karma erlaubt es Ihnen, Tests in mehreren Browsern auszuführen. Als ich eines Tages unter IE8 testete, erkannte ich, dass Karma die Tests nach jedem Speichern der Datei automatisch erneut ausführte.

Bingo. Ich hatte etwas gefunden, das das Dateisystem auf Änderungen überwachen und die Browser darüber informieren konnte. Ich begann, den Quellcode von Karma zu durchforsten. Schließlich entdeckte ich, dass sie dafür Socket.io verwendeten.

Beginnt, sich zusammenzufügen

Alles war bereit. Mit dem durch manuelle Seitenaktualisierungen erfahrenen Schmerz als treibende Kraft und der Entdeckung von Socket.io als Inspiration war ich bestens aufgestellt, um ein Tool zu entwickeln, das ich selbst täglich nutzen würde.

Einrichtung

Diese Anleitung geht davon aus, dass Sie Grunt bereits in einem Projekt installiert haben und wissen, wie Sie es verwenden. Wenn nicht, können Sie sich auf der Grunt-Website darüber informieren.

Browser-sync kann als eigenständiges Kommandozeilen-Tool oder als Grunt-Plugin installiert werden. Aufgrund der aktuellen Popularität von Grunt konzentriere ich mich hier darauf, wie Sie es als Grunt-Task einrichten. Wenn Sie den reinen Kommandozeilen-Ansatz bevorzugen, schauen Sie sich bitte diese Anweisungen an.

Vom selben Dateiverzeichnis wie Ihre Gruntfile.js

npm install grunt-browser-sync

Dadurch wird Browser-sync lokal in Ihr Projekt installiert. Nun können Sie sicherstellen, dass es von Grunt geladen wird, indem Sie dies gegen Ende Ihrer Gruntfile.js platzieren.

grunt.loadNpmTasks('grunt-browser-sync');

Schließlich müssen Sie, wie bei allen Grunt-Plugins, eine Konfiguration bereitstellen. Mindestens benötigen Sie Folgendes.

// Inside the Gruntfile.js config object
browser_sync: {
    files: {
        src : 'assets/css/style.css'
    }
}

Mit Ihrer konfigurierten Einstellung können Sie das Plugin mit diesem Befehl ausführen.

grunt browser_sync

Nun sollten Sie einen HTML-Snippet erhalten, den Sie in den Footer Ihrer Website einfügen können. Platzieren Sie ihn dort. Nun wird jedes Mal, wenn Sie diese CSS-Datei ändern (oder sie durch einen anderen Build-Prozess geändert wird), das CSS automatisch in alle Browser injiziert.

Hinweis: Es gibt Möglichkeiten, mehrere Dateien anzugeben, und Sie können auch Wildcards (*) verwenden. Weitere Informationen finden Sie im Readme auf Github.

Ein stärker automatisierter Ansatz

Das obige Beispiel ist großartig für Situationen, in denen Sie bereits einen Server haben. Zum Beispiel beim Erstellen einer Website mit WordPress oder Rails. Der Nachteil ist jedoch, dass Sie diesen manuellen Schritt des Kopierens und Einfügens eines Snippets in eine Datei haben. Wenn Sie mit statischen Dateien (HTML, CSS und JS) arbeiten, können Sie stattdessen den integrierten Server verwenden. Der integrierte Server fügt automatisch alle benötigten HTML-Snippets ein, sodass Sie dies nicht tun müssen.

Um den integrierten Server zu verwenden, konfigurieren Sie Ihre Einstellungen einfach wie folgt.

// Inside the Gruntfile.js config object
browser_sync: {
    files: {
        src : 'app/css/style.css'
    }, 
    options: {
      server: {
        baseDir: "app"
    }
  }
}

Dateien werden nun aus dem Verzeichnis app bereitgestellt und die gesamte Magie, die zum Injizieren von CSS benötigt wird, wird für Sie erledigt.

Noch weiter gehen

Wenn Sie die obige Server-Option verwenden, haben Sie die IP-Adresse und den Port bemerkt, die verwendet werden? Normalerweise etwas wie 192.168.0.8:3001? Browser-sync versucht, eine gute externe IP-Adresse für den Server zu ermitteln. Das bedeutet, dass Sie von jedem Gerät/Computer im selben WLAN-Netzwerk darauf zugreifen können sollten. Das Coole daran ist, dass die CSS-Injektion auch auf allen mobilen Geräten und Tablets funktioniert. Wenn Sie diese Art von Automatisierung in Aktion sehen, werden Sie feststellen, dass es schwer ist, darauf zu verzichten.

Wenn es für Sie nicht funktioniert

Bei meinen Tests habe ich festgestellt, dass Browser-sync in typischen WLAN-Netzwerken hervorragende Arbeit leistet, um die richtige IP-Adresse zu ermitteln. In einer großen Büroumgebung kann es jedoch vorkommen, dass es eine IP-Adresse wählt, die für andere Geräte/Computer nicht zugänglich ist. Wenn dies der Fall ist und Sie die richtige IP-Adresse kennen, geben Sie sie einfach als Option an, wie folgt.

// Inside the Gruntfile.js config object
browser_sync: {
    files: {
        src : 'app/css/style.css'
    }, 
    options: {
      server: {
        host: "192.168.1.1",
        baseDir: "app"
    }
  }
}

Jenseits von CSS-Injektion

Da es sich um einen Gastbeitrag auf CSS-Tricks handelt, habe ich mich hauptsächlich auf die Einrichtung des CSS-Injektionsteils meines Tools konzentriert. Aber Browser-sync kann noch viel mehr! Es hat etwas Großartiges namens Ghost-Mode.

Ghost Mode verfolgt alle verbundenen Browser und hält die folgenden synchron:

1. Scroll-Position – äußerst hilfreich bei der Entwicklung mit mehreren Monitoren
2. Formularfelder – füllen Sie ein Formular in einem Browser aus und alle anderen werden mit diesen Daten gefüllt.
3. Links – Überprüfen Sie ein paar Seiten einer neu erstellten Website? Öffnen Sie sie auf all Ihren Geräten und wenn Sie von Seite zu Seite navigieren, folgen Ihnen alle Browser!

Fazit

Ich hoffe, das klingt alles ziemlich cool für Sie. Ich habe es geliebt, Browser-sync zu bauen. Ich freue mich über Feedback und Fehlerberichte, damit wir es als Gemeinschaft verbessern können.

Denken Sie daran, dass Browser-sync auf zwei Arten verwendet werden kann:

• Standalone – global installiert, überall verwendbar
• Grunt Plugin – lokal installiert, als Grunt-Task konfiguriert