Jetzt, wo wir genug gewährt haben,
ist es Zeit, Gulp.
Wir werden versuchen, die gleichen
Aufgaben auszuführen, die wir sowohl mit NPM-Skripten als auch mit Grunt durchgeführt haben,
aber jetzt werden wir versuchen, dasselbe mit Gulp- und Gulp-Plug-Ins zu tun.
Um zu beginnen, lassen Sie uns zuerst Gulp als globales Modul installieren.
Um dies zu tun, geben Sie an der
Eingabeaufforderung npm -g install gulp
ein, dies wird Gulp als globales Modul installieren und
es für die Verwendung in der Befehlszeile zur Verfügung stellen.
Nachdem wir dies abgeschlossen haben, besteht
der nächste Schritt darin, Gulp lokal in unserem Projekt zu installieren. Geben
Sie dazu an der
Eingabeaufforderung npm install gulp —save-dev ein.
Sobald wir diese beiden abgeschlossen haben,
ist es an der Zeit, unsere Gulp-Aufgaben zu konfigurieren.
Bevor wir das tun, in unserem nächsten Schritt,
werden wir das Gulp Sass Plug-in installieren, so dass wir
die Sass konfigurieren können, um als Konvertierungsaufgabe in unserer Gulp Datei zu sehen.
Also, um das zu tun,
geben Sie npm install
gulp sass —save-dev ein.
Auch während wir dabei sind,
könnten wir ebenso gut die Browser Sync Gulp Task installieren,
so dass wir beide diese nacheinander konfigurieren können.
Also, ich werde installieren, npm installieren browser-sync —save-dev.
Sobald diese beiden installiert sind,
dann lassen Sie uns voran und erstellen Sie unsere Gulp Datei und konfigurieren Sie dann unsere Gulp Tasks hier.
Gehen Sie zu unserem Projektordner,
lassen Sie uns eine neue Datei erstellen und dann nennen Sie es gulpfile.js,
und in dieser Datei werden wir unsere Gulp Tasks konfigurieren.
Also, sobald die gulpfile.js bereit ist,
konfigurieren Sie die Gulp Tasks hier, indem Sie zuerst
mit „use strict“ und dann var gulp beginnen.
Also müssen wir die Gulp-Knoten-Module benötigen,
und auch während wir dabei sind,
benötigen wir das Sass-Knoten-Modul.
Wie ich in der vorherigen Übung erwähnt habe,
wird es Ihnen klarer, warum der Code so geschrieben wird,
wenn Sie mehr über Knotenmodule in einem späteren Kurs verstehen.
BrowserSync, was wir getan haben, ist, die Gulp
Contrast und BowserSync Knotenmodule in unsere Gulp Datei aufzunehmen.
Und wenn Sie das getan haben,
ist es an der Zeit, unsere Gulp Tasks zu konfigurieren.
Wie wir zuvor gelernt haben,
ist Gulp eine code-basierte Art und Weise der Konfiguration von
Aufgaben im Gegensatz zu Grunt, die mehr auf die Konfiguration der Aufgaben angewiesen ist.
Also, im Falle von Gulp,
wird das Baby unsere Aufgaben einrichten, um
gulp.task einzugeben, und dann lassen Sie uns einen Task-Namen „sass“
einrichten, und dann für diese Aufgabe werden wir dies als eine Funktion einrichten,
und so wird der Code vorbereitet.
Also, Gulp Tasks Sass Funktion und hier,
wir richten die Gulp Tasks ein,
also geben wir return gulp.src ('. /css/ *.scss') Wie wir gelernt haben,
ist Gulp ein tool-basiertes um Code über Konfiguration.
Also bereiten wir diese Aufgabe als solche vor.
Also, Sie sehen, dass wir Gulp Source Pipe sass auf angegeben haben,
und dann hier, Fehler.
Wenn also ein Fehler auftritt,
verwenden wir die Sass-Methode, um den Fehler zu protokollieren und diesen dann
durch gulp.dest ('. /css '), und das
schließt die Konfiguration der Gulp Sass Tasks ab.
Sie müssen sich fragen, warum wir den Code so schreiben.
Es sagt Schluck Quelle und dann etwas dort angeben,
und dann sagt der nächste Rohr und dann sagt der nächste Rohr.
Lassen Sie uns die Gulp Art verstehen, Dinge etwas detaillierter zu tun.
Um zu erklären, warum wir Tasks so konfigurieren,
habe ich eine Erklärung dessen, was wir Gulp Streams nennen.
Die Art, wie Gulp funktioniert, ist wie Sie eine Reihe von Dateien nehmen und Sie die Menge von
Dateien angeben, indem Sie Gulp Quelle sagen, wie wir es mit den Sass Tasks dort getan haben.
Also, hier ist dies die Funktion, die die Dateien nimmt.
Sie könnten sogar die Dateien mit den Globbing-Mustern angeben, die wir in Grunt gelernt haben,
und dann erstellt es einen Strom von Objekten, die diese Dateien darstellen.
Jetzt, sobald der Stream erstellt wurde
, kann der Stream durch eine Reihe von
Funktionen nacheinander geleitet werden, um diese Dateien zu transformieren.
Und schließlich können die resultierenden transformierten Dateien an einem Zielort abgelegt werden.
Deshalb geben wir Gulp Quelle an,
dann geben wir Pipe an.
Also, das Rohr erlaubt den Strom durch eine Funktion geleitet werden,
und so, das ist, warum wir dot-pipe gesagt,
und dann sagten wir Schluck.
Und dann sagten wir Sass auf Irrtum.
Und dann sagt der nächste Pipe Gulp Dest.
Und so gibt der gulp dest das Ziel der Dateien an, die verarbeitet wurden.
So wird eine typische Aufgabe in Schluck angegeben, weil aber Schluck auf Streams arbeitet.
Also, Ihre Stream-Dateien durch die Pipes, bis sie
übertragen werden und dann werden sie am angegebenen Ziel hinterlegt werden.
So werden Sie eine ähnliche Struktur für viele der Schluckaufgaben sehen, die wir
in dieser Übung und in der nächsten Übung konfigurieren würden.
Jetzt, da Sie ein wenig darüber verstanden haben, wie Schluck mit Streams funktioniert und wie
die Schluckaufgabe die Pipe verwendet, um Dateien über eine Reihe von Funktionen zu verarbeiten,
und es wird Ihnen klarer, warum wir diese sass-Aufgabe einrichten, wie in diesem Code hier zu sehen.
Die nächste Aufgabe, die wir konfigurieren werden, heißt Schluck,
und wir werden diese Aufgabe als Sass Watch konfigurieren.
Also, dies ist eine Watch-Aufgabe, die wir konfigurieren werden,
und dann würden Sie Funktion angeben.
Und so hier drin,
die Schlucksass-Watch-Aufgabe,
was wir tun, ist, die Dateien zu spezifizieren, die wir beobachten werden.
Also verwenden wir die Gick-Watch-Aufgabe, um die Datei zu beobachten.
Also, die Uhr ist bereits in Schluck eingebaut.
Also, es wird Gulp Watch nehmen und dann geben wir die Dateien dort *.SCSS.
Also, wie Sie sehen können, wird die Gulp Watch
diese Dateien beobachten und dann, wenn Änderungen an diesen Dateien auftreten,
dann wird es diese Sass-Task ausführen,
die wir zuvor angegeben haben.
Also, so ist diese Sass-Watch-Aufgabe eingerichtet.
Nun, da wir diese beiden getan haben,
lassen Sie uns die Browser-Synchronisierungsaufgabe als nächstes einrichten.
Schließen Sie das also mit dem Semikolon und dann
ist die nächste Aufgabe, die wir einrichten werden, die Browser-Synchronisierungsaufgabe.
Also werde ich dort Browser-Synchronisierungsaufgabe angeben.
Und dann
werde ich für die Browser-Synchronisierungsaufgabe diese Funktion angeben.
Notieren Sie sich erneut die Struktur, in der wir den Code schreiben,
schlucken Aufgabe und dann geben Sie etwas an, das gefolgt ist, aber mit einer Funktion.
Wie gesagt,
lernen wir Knotenmodule im letzten Kurs dieser Spezialisierung,
es wird Ihnen klarer, warum nicht Module mit dieser Struktur geschrieben werden,
und warum die Funktionen so geschrieben werden.
Also, wir sagen Schluck Aufgabe Browser-Synchronisierung.
Hier werde ich eine Variable definieren,
eine JavaScript-Variable namens Dateien,
die nichts anderes als im Array ist,
und dass ich innerhalb dieses Dateiarrays alle Dateien angeben würde, die
bei einer Änderung die Browser-Synchronisierung
das Neuladen oder die Datei verursachen muss.
Also, HTML-Dateien, die CSS-Dateien im CSS-Ordner,
und dann werde ich auch die Bilddateien
und die JavaScript-Dateien beobachten.
Alle diese Dateien, wenn sich eine von ihnen ändert.
Also, danach werde ich hier die Browser-Synchronisierung konfigurieren.
Also, ich werde sagen, Browser-Synchronisierung.
Wir haben diese Variable bereits definiert, die Browser-Synchronisierung genannt wurde.
Also, wir müssen die Browser-Synchronisierung initialisieren
, und so
ist der erste Parameter dazu die Dateien, die überwacht werden müssen,
und dann gibt der zweite Parameter die Optionen an, die wir dem Browser geben.
Die Option, die ich angebe, ist also für den Server.
Ich werde das Basisverzeichnis als das aktuelle Verzeichnis angeben,
und dann schließt das die Spezifikation der Browser-Synchronisierungsaufgabe ab.
Damit haben wir die Angabe der Browser-Synchronisierungsaufgabe hier abgeschlossen.
So können Sie sehen, dass, wie wir Browser-Synchronisierungs-Task konfiguriert
haben, haben wir die Dateien angegeben und speichern Sie dann
Browser-Synchronisierung darin und liefern die Dateien als ersten Parameter.
Der zweite Parameter sind die Optionen für das Browser-Synchronisations-Plugin.
Dann schließlich werden wir planen oder
wir konfigurieren die Aufgabe Standard genannt.
Genau wie ich die Standardaufgabe in Grunt
habe, können wir auch eine ähnliche Standardaufgabe für Schluck definieren.
Also, hier sagen wir Gulp Aufgabe Standard-Browser-Synchronisierung,
und geben Sie dann Funktion.
Und da drinnen werden wir Schluckstart angeben.
Also, dies gibt an, dass ich
diese andere Aufgabe starten sollte, die sass watch Aufgabe. Die sass watch Aufgabe muss gestartet werden.
Stellen Sie sicher, dass der Browser-Synchronisierungs-Task ausgeführt wird, bevor der Sass-Watch-Task gestartet wird.
Dies ist also die Syntax, um dies in Gulp anzugeben.
Also, mit diesem haben wir alles konfiguriert, was wir brauchen, in Gulp-Datei.
Also, wieder zurück zu gehen,
gibt es Schritte, die wir getan haben.
Wir haben zuerst benötigt, um alle ihre Schluck-Plugins dort einzuschließen,
dann haben wir die Sass-Task konfiguriert
und dann Sass-Watch-Aufgabe angegeben.
Hier benutzen wir die Schluckuhr, die uns wie von Schluck zur Verfügung steht.
Dann haben wir die Browser-Synchronisierungsaufgabe festgelegt und dann schließlich
die Standardaufgabe mit dem Browser Sync und dem Schluckstart mit Sass Watch neu geplant.
Nun, lassen Sie uns die Änderungen sehen,
und dann gehen wir vor und führen Sie die Schluck-Datei hinzufügen,
und die Eingabeaufforderung Typ gulp.
Sie werden sehen, dass Schluck mit der Browser-Synchronisierung beginnt und die Sass-Watch-Aufgabe gestartet wird,
und dann wird Ihre Browser-Synchronisierung beginnen, die Dateien zu servieren.
Wenn Sie Ihre Website über einen Browser aufrufen,
können Sie sehen, dass die Website im Browser bereitgestellt wird.
Lassen Sie mich auch die Funktionsweise der Uhraufgabe erläutern.
Also, ich werde die style.css hochziehen und
nur versuchen, die Änderung zu speichern, und Sie werden feststellen, dass auf der linken Seite
die Sass-Aufgabe sofort aufgerufen
wird und die style.scss-Datei in die CSS-Dateien neu kompilieren wird.
Und dann wird dieser Browser an dieser Stelle neu geladen.
Damit schließen wir den ersten Teil der Schluckübung ab.
Im zweiten Teil bereiten wir den Distributionsordner vor.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht Gulp Teil 1 zu machen.