Share
In der letzten Lektion haben Sie gelernt, wie Sie Ihr gesamtes Projekt zusammenstellen oder mit kurzen Befehlen wie grunzen, grunzen beobachten, Schluck und schluck zu sehen.
In dieser Lektion erfahren Sie, wie Sie Befehle erstellen, mit denen Sie Ihren Projekten eine zusätzliche, beeindruckende Ebene hinzufügen können. So wird Live-Laden und Browsersynchronisierung ermöglicht.
Wenn Sie die anderen Tutorials dieser Serie noch nicht abgeschlossen haben, gehen Sie bitte zurück und schließen Sie sie ab, bevor Sie hier beginnen.
Hinweis: Um Verwirrung zu vermeiden, gibt es eine Desktop-App und eine Chrome-Plugin-Kombination mit dem Namen LiveReload, die häufig in Verbindung mit vielen npm-Paketen für automatisiertes Neuladen verwendet wird. Bei der Art und Weise, wie wir uns einrichten, sind die Desktop-Apps und das Browser-Plugin nicht erforderlich.
Damit Live-Nachladen funktionieren kann, muss ein localhost vorhanden sein, der aktualisiert werden kann, d. H. Eine Möglichkeit, Ihre Site lokal anzuzeigen, mit der ein Webhost mit einem Server simuliert wird http: // Protokoll statt Datei://.
Bei Ihrem Grunt-Projekt sorgen wir dafür, dass ein localhost die statischen Dateien Ihres Projekts bereitstellt und diesen localhost mithilfe des grunt-express-Plug-ins live lädt.
Installieren Sie grunt-express in Ihr Projekt mit:
npm install grunt-express --save-dev
Aktivieren Sie dann das Plugin in Ihrer Gruntfile, indem Sie es unter Ihrem bestehenden hinzufügen grunt.loadNpmTasks Zeilen:
Accentsconagua
grunt.loadNpmTasks ('grunt-express'); Konfigurieren Sie die Express-Task, indem Sie diesen Code hinzufügen:
express: alle: Optionen: Bases: 'build', Leberlast: true, offen: 'http: // localhost: 3000',
Das merken Sie in unserem ausdrücken Task Konfiguration haben wir die Leberlast Option eingestellt auf wahr, Nachdem unsere lokale Vorschau gestartet wurde, wird sie automatisch neu geladen, sobald Änderungen festgestellt werden.
Jetzt fügen wir eine neue Aufgabe mit dem Namen hinzu Start. Wir werden diese Aufgabe verwenden, um beide auszulösen ausdrücken Aufgabe und die sehen Aufgabe sofort.
Fügen Sie dies unter Ihrem bestehenden hinzu grunt.registerTask Linie:
grunt.registerTask ('start', ['express', 'watch']); Führen Sie nun den Befehl aus:
grunzen beginnen
… Und Sie sollten sehen, dass Ihr Standardbrowser geöffnet wird und Ihre Projektvorschau darin angezeigt wird.
Das sehen Die Task läuft jetzt und kompiliert Ihre Änderungen an Stylus und Jade in den Ordner "build".
Express überwacht wiederum den Ordner "build" auf Änderungen. Wenn Ihre HTML-, CSS- oder JS-Dateien neu kompiliert werden, wird die Vorschau automatisch erneut geladen.
Als nächstes gehen wir weiter und erreichen dieselbe Art von localhost-Vorschau in Ihrem Gulp-Projekt. Dieses Mal verwenden wir stattdessen das gulp-connect Plugin.
Installieren Sie gulp-connect mit diesem Befehl in Ihr Projekt:
npm install --save-dev gulp-connect
Machen Sie es in Ihrer Gulpfile verfügbar, indem Sie diese Zeile unter den anderen Zeilen einfügen, in denen Sie die verwendet haben benötigen() Funktion:
var connect = erfordern ('gulp-connect'); Richten Sie eine neue Aufgabe mit dem Namen ein verbinden indem Sie diesen Code unter Ihrem anderen Taskcode hinzufügen:
gulp.task ('connect', function () connect.server (root: 'build', livereload: true, offen: true););Wie bei Grunt erstellen wir jetzt eine benutzerdefinierte Aufgabe mit dem Namen Start Dies wird sowohl unsere localhost-Vorschau starten als auch unsere Überwachungsaufgabe initiieren.
Fügen Sie diese Zeile am Ende Ihrer Gulpfile hinzu:
gulp.task ('start', ['connect', 'watch']));Um ein erneutes Laden der Localhost-Vorschau zu ermöglichen, verbinden wir eine weitere "Pipe" mit dem Ende der beiden css und html Aufgaben.
Fügen Sie diesen Reload-Auslöser am Ende von jedem hinzu:
.pipe (connect.reload ())
Die Aufgaben werden zu:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus']) (autoprefixer ()) .pipe (minifyCSS ()) .pipe (umbenennen ('style.css')) .pipe (gulp.dest ('build')) .pipe (connect.reload ()));… und:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')) .pipe (connect. neu laden()) );Führen Sie nun den Befehl aus:
Schluck starten
… Dann gehen Sie zu http: // localhost: 8080 und Sie sehen die Vorschau Ihrer lokalen Site.
Speichern Sie eine Änderung in einer Ihrer Jade- oder Stylus-Dateien und beobachten Sie, wie der Blitz schnell neu kompiliert und erneut geladen wird!
Nachdem Sie jetzt Ihre localhost-Vorschau automatisch neu geladen haben, können Sie es dabei belassen und trotzdem einen erstklassigen Entwicklungsprozess für Ihr Projekt einrichten. Wenn Sie jedoch Browser- und geräteübergreifende Tests durchführen möchten, lohnt es sich auch, BrowserSync im Bild zu haben.
Mit BrowserSync erhalten Sie eine Vorschau-URL, die Sie in jeden Browser Ihres Computers sowie in Browser auf jedem anderen Gerät mit derselben Internetverbindung einbinden können.
Alle von Ihnen ausgeführten Vorschauen werden dann neu geladen, wenn Sie Änderungen vornehmen, sodass Sie die Ergebnisse auf der ganzen Linie sehen können. Alle Ihre Interaktionen werden in jeder Instanz gespiegelt. Wenn Sie in einem Browser blättern oder ein Menü öffnen, sehen Sie, wie alle anderen Browser und Geräte gleichzeitig reagieren.
Um das grunt-browser-sync-Plugin in Ihrem Grunt-Projekt zu installieren, führen Sie den folgenden Befehl aus:
npm install grunt-browser-sync --save-dev
Kommentieren oder löschen Sie die Zeile, die Sie zum Aktivieren von Grunt-Express verwendet haben:
// grunt.loadNpmTasks ('grunt-express');Fügen Sie dann diese Zeile hinzu, um stattdessen Grunt-Browser-Sync zu aktivieren:
grunt.loadNpmTasks ('grunt-browser-sync');Kommentieren oder löschen Sie das ausdrücken Aufgabe, die Sie zuvor erstellt haben, und fügen Sie diesen Konfigurationscode für die Aufgabe hinzu browserSync stattdessen:
browserSync: bsFiles: src: ['build / *. css', 'build / *. html'], Optionen: watchTask: true, Server: baseDir: "build",
Finde deinen Start Aufgabe und ändern Sie es so, dass es läuft browserSync Aufgabe statt der ausdrücken Aufgabe, von:
grunt.registerTask ('start', ['express', 'watch']);… An:
grunt.registerTask ('start', ['browserSync', 'watch']);Wenn Sie jetzt den Befehl ausführen:
grunzen beginnen
Es wird immer noch eine localhost-Vorschau geöffnet, und es wird weiterhin geladen, wenn Sie die Änderungen speichern. Der Unterschied besteht jedoch darin, dass die Browsersynchronisierung aktiviert ist, da Sie die Vorschau auf anderen Geräten anzeigen können.
Nachdem Sie Ihren BrowserSync-Server gestartet haben, sehen Sie Folgendes:
- Local: http: // localhost: 3000 External: http://192.168.1.3:3000 - UI: http: // localhost: 3001 UI External: http://192.168.1.3:3001 -
Nimm die Adresse mit der Aufschrift Lokal, Geben Sie die Adresse in einige andere Browser Ihres Computers ein und geben Sie die Adresse ein Externe in andere Geräte, die Sie dieselbe Verbindung haben. Beobachten Sie dann die synchronisierten Antworten, die Sie über alle Instanzen erhalten, während Sie mit einer von ihnen interagieren.
Weitere Informationen zu BrowserSync via Grunt finden Sie unter: http://www.browsersync.io/docs/grunt/
Nun richten wir den gleichen Prozess ein, diesmal mit dem Browser-Sync-Plugin für Gulp.
Installieren Sie das Plugin in Ihrem Gulp-Projekt mit:
npm install browser-sync gulp --save-dev
Kommentieren oder löschen Sie diese Zeile:
// var connect = required ('gulp-connect');… Und ersetzen Sie es mit:
var browserSync = required ('browser-sync');Bestehendes auskommentieren oder löschen verbinden Aufgabe und fügen Sie in diesem neuen Browser-Sync stattdessen Aufgabe:
gulp.task ('browser-sync', function () browserSync (server: baseDir: "build"););Suchen Sie am Ende der Aufgaben css und html die beiden Stellen, an denen Sie die Zeile hinzugefügt haben:
.pipe (connect.reload ())
… Und ersetzen Sie jede dieser beiden Zeilen durch:
.Pipe (browserSync.reload (stream: true))
Und schließlich finden Sie Ihre bestehenden Start Aufgabe und bearbeiten Sie es, um das auszuführen Browser-Sync Aufgabe statt der verbinden Aufgabe, diese zu ersetzen:
gulp.task ('start', ['connect', 'watch']));… mit diesem:
gulp.task ('start', ['browser-sync', 'watch']);Wenn Sie jetzt den Befehl ausführen:
Schluck starten
… Öffnet sich ein Browserfenster mit Ihrer Vorschau. Genau wie bei der Verwendung von BrowserSync über Grunt werden die URLs der Vorschau jetzt über jeden Browser auf jedem Gerät synchronisiert, auf dem Ihre Internetverbindung läuft.
Weitere Informationen zu BrowserSync via Gulp finden Sie unter: http://www.browsersync.io/docs/gulp/
Sie haben jetzt alle wesentlichen Schritte durchlaufen, um Ihre eigenen Projekte von Grund auf zu erstellen und die Befehlszeile während der Entwicklung zu nutzen. Aber was ist, wenn Sie nicht bei Null anfangen wollen. Was ist, wenn Sie vorhandene Frameworks von Drittanbietern verwenden oder einfach nur einen Vorsprung erzielen möchten?
Im nächsten Lernprogramm erfahren Sie, wie Sie mithilfe von Befehlszeilen in nur wenigen Augenblicken völlig neue Projekte erstellen können, einschließlich des erforderlichen Drittanbietercodes sowie der gesamten Einrichtung von Grunt- oder Gulp-Aufgaben.
Wir sehen uns im nächsten Tutorial!
