Verwendung von Browser-Sync mit Yeoman Webapp

Aktualisieren!

Dieser Beitrag ist super alt . Gehen Sie stattdessen einfach zu bowsersync.io .

Jeder mit einer Testsuite für mehrere Geräte kennt den Schmerz beim Testen von Formularen oder beim einfachen Navigieren durch eine Website mit einem Browser nach dem anderen. Geben Sie grunt-browser-sync ein, eine GruntJS -Aufgabe, die Dinge verarbeitet wie:

  • Links: Durch Klicken auf einen Link werden alle Browser mit der neuen URL aktualisiert
  • Scrollen: Scrollen Sie in einem Browser oder Gerät und beobachten Sie, wie die anderen Ihrem Befehl folgen
  • Formulare: Geben Sie Text in ein Formular ein und, ja, alle anderen Gerätebrowser folgen diesem Beispiel!

Anschließen

Hier erfahren Sie, wie Sie die Browser-Synchronisierung mit dem Webapp-Generator von Yeoman zum Laufen bringen. Ich nehme an, Sie wissen, wie man die grundlegende Webapp zum Laufen bringt, also überspringe ich diesen Teil. Wenn nicht, folgen Sie der großartigen Dokumentation auf Yeoman.io .

Lassen Sie uns zunächst grunt-browser-sync installieren:

$ npm install grunt-browser-sync --save-dev

Gruntfile.js bearbeiten

Als nächstes bearbeiten wir die Gruntfile.js, die mit webapp geliefert wurde. Dazu sind nur zwei Bearbeitungen erforderlich. Die erste besteht darin, die browser_sync-Aufgabenoptionen hinzuzufügen:

 browser_sync: { files: { src : [ '/*.html', '.tmp/styles/{,*/}*.css', '{.tmp,}/scripts/{,*/}*.js', '/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}' ], }, options: { watchTask: true, ghostMode: { scroll: true, links: true, forms: true }, server: { baseDir: '' } } }

Diese Konfiguration ist so eingerichtet, dass alle Dateien überwacht werden, die sich in der App ändern können, was nur ein Kopieren und Einfügen aus dem Livereload-Bereich ist. Wir haben auch die Option „watchTask“ auf „true“ gesetzt, damit die Browser-Synchronisierung mit der Grunt-Watch-Aufgabe funktioniert, den Geistermodus zum Scrollen, Verlinken usw. aktiviert und das Stammverzeichnis auf unser App-Verzeichnis festgelegt. Weitere Optionen finden Sie in der README-Datei zur Browser-Synchronisierung .

Fügen Sie die Aufgabe hinzu

Der letzte Schritt besteht darin, die Aufgabe selbst hinzuzufügen. Die Dokumentation weist an, die browser_sync-Aufgabe vor der Überwachungsaufgabe zu platzieren:

 grunt.registerTask('serve', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'connect:dist:keepalive']); } grunt.task.run([ 'clean:server', 'concurrent:server', 'autoprefixer', 'connect:livereload', 'browser_sync', 'watch' ]); });

Erster Start

Sie sollten in der Lage sein, den grunt server von hier aus zu starten. Richten Sie alle Ihre Geräte auf die URL aus, die Browser Sync automatisch als Ihre lokale URL ermittelt hat, und beobachten Sie, wie pure Magie direkt vor Ihren Augen geschieht.

Sehen Sie sich die vollständige Gruntfile.js an

Anmerkungen

Eine Sache, die ich über die Funktion zur Formularsynchronisierung herausgefunden habe, ist, dass jedes Feld ein ID-Attribut haben muss. Natürlich haben Sie das bereits für alle Ihre barrierefreien Formularbeschriftungen, oder?

Zurück zum Blog