Jetzt ist es an der Zeit, mit dem zweiten Teil der Schluckübung fortzufahren.
Wir führen ähnliche Schritte wie im
zweiten Teil der NPM-Skript-Übung und in der aktuellen Übung fort.
Also, wir arrangieren das Löschen des Distributionsordners dann das Kopieren der Schriftarten,
dann auch den Distributionsordner neu zu erstellen,
indem wir ähnliche Knotenmodule verwenden,
wie wir für Grant und auch die NPM-Skripte verwendet haben.
Unser nächster Schritt besteht darin, die Aufgaben zum Löschen des
Distributionsordners und zum Kopieren der Schriftarten in den Distributionsordner einzurichten.
Also lassen Sie uns ein paar Knotenmodule einrichten.
Der erste, den wir einrichten werden, heißt del. Mit
diesem Knotenmodell können Sie einen Ordner löschen.
Und lasst uns weitermachen und die Gulp-Aufgaben einrichten.
Mit Gulp müssen wir zum Glück kein weiteres Modul zum Kopieren installieren,
da die Gulp-Streams es uns erlauben, die Dateien mit geringem Aufwand zu kopieren.
Wenn ich zur Gulp-Datei gehe,
werde ich das gemischte Gulp-Modul vorstellen,
was ich sagen werde, del.
Und dann benötigen Sie das del-Modul hier.
Wenn wir also das del-Modul dort benötigen,
können wir voran gehen und die Aufgaben einrichten.
Also, wir werden zuerst die saubere Aufgabe hier einrichten.
Also gleich nach der Standardaufgabe
werde ich die saubere Aufgabe einrichten.
Also werde ich sagen, Gulp Aufgabe sauber.
Und wie Sie sehen können,
ist dies als Funktion dort eingerichtet.
Und innerhalb, dass wir sagen würden, zurück del.
Und dann ist der angegebene Parameter der Distributionsordner hier.
Dies wird also die saubere Aufgabe einrichten.
Und sobald diese Aufgabe ausgeführt wird,
wird der Distributionsordner gelöscht.
Unsere nächste Aufgabe besteht darin, die Schriftarten in ihren Distributionsordner zu kopieren.
Also, ich würde sagen, kopieren Sie Schriftarten.
Und wie Sie sehen können,
richten wir die Funktion dort ein und schließen dann die Funktion aus.
Und dann hier würde ich einfach sagen,
Gulp Quell- und
Knotenmodule, Schriftart genial, Schriftarten.
Du kannst mich mit den Globbing-Mustern sehen, genau da.
Und wenn wir dann alle Quelldateien ausgewählt
haben, übergeben wir sie einfach in die Zieldatei.
Sie bemerken also, dass wir kein
spezielles Modul benötigen, um das Kopieren der Dateien zu arrangieren.
Wir verwenden einfach die Gulp-Quell- und Zielströme, um
die Dateien vom Quellspeicherort an den Zielort pipe zu können.
Diese beiden werden also die Aufgabe „Clean“ und „Copy Fonts“ einrichten.
Als Nächstes richten wir das NPM-Modul für die Imagemin-Task ein.
So das Minimieren und Komprimieren der Bilder.
Um dies zu tun, fügen Sie die Eingabeaufforderung Gulp imagemin ein.
Dies ist das Gulp-Plugin, das dem imagemin-Knotenmodul entspricht.
So haben wir als Gulp Plugin installiert,
das auch Knotenmodul ist.
Sobald die Installation abgeschlossen ist,
lassen Sie uns diese Imagemin-Aufgabe einrichten. Wenn wir
zu unserer Gulp-Datei gehen,
richten wir hier die Imagemin-Aufgabe ein.
Also richten wir die Imagemin-Aufgabe als Funktion ein.
Wie Sie sehen können, ist die Strukturierung des Codes für
die Gulp-Aufgabendefinition ziemlich Standard.
Also würden Sie sagen, Gulp Quelle.
Wir spezifizieren die Quelldateien dort und die Quelldateien im
Bild-Ordner die JPG-,
GIF- und PNG-Dateien von dort.
Und dann leiten Sie sie durch die Imagemin-Aufgabe.
Und dann werde ich hier einige Parameter einrichten.
Also werde ich
die Optimierungsstufe auf drei einrichten, progressiv als wahr.
Dies wird sie in progressiven und interlaced Bilder verwandeln.
Sobald dies eingerichtet ist, besteht
der nächste Schritt darin, sie an ihr Ziel zu leiten.
Und das Ziel hier, wie Sie sehen können, ist der Image-Ordner im Distributionsordner.
Damit ist nun die Imagemin-Aufgabe eingerichtet.
Jetzt werden wir hier die Build-Aufgabe aufbauen.
Lassen Sie mich also die Build-Aufgabe einrichten.
Also für den Build die Aufgabe,
was Sie tun möchten, ist, zuerst
die saubere Aufgabe auszuführen, bevor
die verbleibenden Aufgaben ausgeführt werden,
weil wir zuerst den Verteilungsordner bereinigen möchten.
Und das muss abgeschlossen werden, bevor die restlichen Aufgaben erledigt sind.
Mit Gulp werden die Aufgaben parallel automatisch ausgeführt.
Und so kann es passieren, dass,
wenn Sie die Säuberungsaufgabe parallel zur verbleibenden Aufgabe ausführen,
die Säuberungsaufgabe später beendet
wird und dann einige der von den verbleibenden Aufgaben erledigten Arbeiten löscht.
Wenn Sie also die Aufgabe „Schlucken“ angeben,
wenn Sie „clean“ als den ersten
Parameter hier als zweiten Parameter angeben,
dann bedeutet dies, dass diese Aufgabe zuerst abgeschlossen wird.
Und dann werden die verbleibenden Aufgaben ausgeführt.
Also, ich würde sagen, Gulp beginnt.
Mit dem Gulp Start werden
alle Aufgaben, die wir hier angeben, parallel ausgeführt.
Also werde ich die Aufgabe zum Kopieren von Schriftarten und auch die Imagemin-Aufgabe zusammen ausführen.
Später werden wir die Usemin-Aufgabe einrichten und diese dann
auch zusammen mit den Kopierschriftarten und Imagemin ausführen.
Eine letzte Sache, die ich hinzufügen muss, bevor wir voran gehen und
die Aufgaben ausführen, ist, hier nach oben zu gehen und dann das Imagemin zu benötigen.
Ich würde sagen, Imagemin benötigt Gulp Imagemin.
Und dann speichern Sie die Änderungen.
Lassen Sie uns jetzt voran und überprüfen Sie die Build-Aufgabe.
An der Eingabeaufforderung, wenn Ihr Typ Gulp bauen,
dann sollte es alle drei Aufgaben ausführen.
Sie werden also sehen, dass es die saubere Aufgabe startet und
sie abschließt und dann die eigentliche Build-Aufgabe startet.
Sie können also sehen, dass durch
die Angabe der Säuberung abgeschlossen werden soll, bevor der eigentliche Build stattfindet,
dann stellen Sie sicher, dass Sie zuerst den Distributionsordner bereinigen und
dann die Build-Aufgabe, die die Kopierschriftarten und das Imagemin umfasst,
alle parallel abgeschlossen werden, ausgeführt werden danach. Wenn Sie
zum Editor gehen,
sehen Sie, dass im Distributionsordner
wir sehen, dass die Schriftarten kopiert wurden und Bilder korrekt kopiert wurden.
Der letzte Schritt besteht darin, die Usemin-Aufgabe festzulegen, um den Distributionsordner aufzubauen.
Um sie einzurichten, usemin Aufgabe,
werde ich ein paar Gulp Plugins installieren, so würde ich sagen, NPM installieren.
Und dann würde ich das uglify Gulp File Plugin installieren,
das offensichtlich auch ein Knotenmodul ist.
Und dann werde ich das Usemin-Knotenmodul und dann das Rev-Knotenmodul installieren.
Das Gulp Rev Node Modul ist wie das File Graph Rev Grant-Plugin, das wir früher gesehen haben.
Es unterscheidet sich etwas von der Dateirev, die wir früher gesehen haben,
dient aber dem gleichen Zweck.
Also, Gulp rev, dann werde ich Gulp sauberes CSS einrichten und dann Gulp Flatmap.
Sie werden den Grund dafür sehen, wie wir-
Wir richten unsere usemin Aufgabe, so,
und gulp-html min und wir gehen weiter und installieren diese Module hier.
Sobald die Module installiert sind,
lassen Sie uns fortfahren und benötigen diese Module in unserer gulpfile und richten Sie dann die Usemin-Aufgabe ein.
Wenn ich zu unserem gulpfile direkt an der Spitze gehe,
werde ich die Module benötigen, die ich gerade installiert habe.
Also, der hässliche Schluck hässlich.
Also die hässliche Aufgabe dann
die usemin Aufgabe Schluck usemin,
dann danach hat
die rev dann,
dort vergessen, Komma dort.
Seien Sie sehr vorsichtig, diese Kommas dort nicht zu verpassen.
Benötigen Sie also gulp clean-css, dann flatmap und htmlmin.
Das sind also die Schluckmodule,
die wir installiert haben,
also speichern wir die Änderungen und dann gehen wir nach unten und richten die Usemin-Aufgabe ein. Wenn ich
an den Boden der gulpfile
komme, werde ich dort die usemin-Aufgabe einrichten.
Also, was macht die Usemin-Aufgabe?
Die Usemin-Aufgabe nimmt also
die htmlfiles und sucht dann die CSS- und JavaScript-Blöcke in den htmlfiles
, kombiniert, verkettet und minifiziert und nuglifiziert die Dateien und
ersetzt sie dann mithilfe der verketteten Datei im Distributionsordner.
Um loszulegen,
würde ich zuerst mit der Angabe der Schluckquelle beginnen.
Also, wo sind die Quelldateien?
Die Quelldateien sind also die htmlfiles im aktuellen Ordner.
So schlucken. /start.html, dann werde ich
diese gulpfiles durch dieses Schluckmodul, das als flatmap genannt wird, pippen.
Was macht flatmap?
Flatmap nimmt diese mehrere htmlfiles und
startet dann parallele Pipelines für jede dieser htmlfiles.
Jeder von ihnen durchläuft den gleichen Satz von Schritten und dann schließlich,
konvergieren und kopieren Sie es in den Zielordner.
Wie Sie in unserem aktuellen Ordner sehen können,
haben wir contactus.html, aboutus.html und index.html.
Alle drei von ihnen müssen verarbeitet werden.
Also, die Flatmap ermöglicht es uns, diese parallel
zu verarbeiten und den gleichen Satz Pipe für jede dieser Dateien
zu starten, also verwende ich die Flatmap dort.
Also, flatmap, und dann innerhalb der Flatmap muss ich die Funktion,
die beiden Parameter angeben; stream, file.
Also, die Datei nimmt grundsätzlich jede dieser Quelldateien, die wir dort angegeben haben,
und behandelt sie dann mit den gleichen Satz von Funktionen hier
und startet dann ihren separaten Stream für jeden von ihnen.
Also, ich werde Stream zurückgeben,
und dann werde ich jede von ihnen
durch die Usemin-Aufgabe leiten, die selbst
aus der CSS
und hässlichen JavaScript- und HTML-Aufgabe besteht.
Also für das CSS werde ich den Revisionsteil durchführen.
Also wird der css-Teil offensichtlich die Verkettung und Minifizierung machen und so weiter,
und wendet dann die rev darauf an, so dass es
diese 20-Bit-Zeichenfolge in die Datei main.css dort wirkt.
Also für CSS habe ich das eingerichtet,
und dann für HTML,
weil ich mehrere HTML-Dateien
habe, muss ich dies als eine Funktion angeben,
und innerhalb dieser Funktion würde ich sagen, dass ich htmlmin zurückgibt.
Und dann werde ich ihm den Parameter CollapseWhitespace geben,
und dieser Parameter würde auf true gesetzt werden.
Und so vervollständigt dies im Wesentlichen den HTML-Teil.
Und dann ist der nächste der js-Teil davon,
der JavaScript-Teil
davon, den ich das hässliche und dann die Revision dafür machen muss.
Und dann, wenn ich einen
Inline-Javascript-Code habe, muss ich
die hässliche Aufgabe dafür anwenden,
und dann
werde ich für den Inlinecss-Code die CleanCSS-Aufgabe dort mit concat als Parameter verwenden.
Damit habe ich meine Usemin-Aufgabe eingerichtet.
So wird es für all diese verschiedenen Aktionen in meinem Namen gerecht werden.
Und wenn sie schließlich fertig sind,
werden die resultierenden Streams
an den Distributionsordner weitergeleitet.
Damit ist die Usemin-Aufgabe jetzt alles Setup gesetzt.
Lassen Sie mich die Änderungen speichern.
Und dann werde ich zur Build-Aufgabe gehen und dann nach dem Imagemin werde ich auch
usemin als eine der Aufgaben hinzufügen, die von der Build-Aufgabe ausgeführt werden sollen.
Also, mit diesen Änderungen, also
haben wir die Build-Aufgabe geändert,
lassen Sie uns fortfahren und dann überprüfen, ob der Distributionsordner korrekt erstellt wurde oder nicht.
Gehen Sie zur Eingabeaufforderung, lassen Sie mich Schluck
Build eingeben und dann warten, bis Schluck all die verschiedenen Aufgaben aufbaut.
Es wird ein wenig Zeit dauern, bis der Usemin seine Arbeit abgeschlossen hat,
und wenn die Transformation abgeschlossen ist,
sollte mein Distributionsordner jetzt für die Anzeige bereit sein. Wenn Sie
zum Editor gehen, können Sie jetzt sehen, dass der Distributionsordner
hier vorbereitet wurde und Sie können den Index, contactus und aboutus.htmlfile sehen.
Sie können sehen, dass, wenn Sie die index.html-Datei öffnen,
sie komprimiert wurde.
Und das htmlmin wurde getan,
insbesondere beachten Sie, wie die CSS-Datei durch
css/main- ersetzt wurde und dann sehen Sie eine lange Zeichenfolge there.css.
Das ist also genau wie die Dateirev, die Sie in grunt mit dem Schluckrev-Modul gesehen haben,
das ist, was es mit dem Namen der Datei tut.
Wenn Sie sich also das CSS ansehen, können Sie sehen, dass der Name der Datei Hauptstrich ist und
dann eine Zeichenfolge dort dot css und ähnlich für die javascriptdatei.
Also, das ist, was das Gulp Rev Modul tut,
und dann sind alle diese drei Dateien vorbereitet.
Werfen wir einen Blick auf diese Dateien im Browser. Wenn ich
zum Browser gehe, kann ich sehen, dass dort Quelldateien korrekt gespeichert werden.
Lassen Sie mich den Distributionsordner überprüfen.
Im Distributionsordner
scheint die index.html, die von der Gulp-Build-Aufgabe vorbereitet wurde, korrekt zu funktionieren.
Lassen Sie mich auch die Info Seite überprüfen,
und wir können sehen, dass über Seite auch korrekt gebaut wird,
und auch die Kontaktseite.
So können Sie jetzt sehen, dass unsere Schluckaufgabe abgeschlossen ist.
Damit schließen wir diese Übung ab.
In dieser Übung richten wir die Säuberung und das
Kopieren der Schriftartdateien
in unseren Distributionsordner ein, wir haben die Imagemin-Aufgabe durchgeführt und schließlich haben wir
die Usemin-Aufgabe eingerichtet, um unseren Distributionsordner aufzubauen.
Damit schließen wir diese Übung ab.
Dies kann ein guter Zeitpunkt für Sie, einen guten Kommentar mit der Nachricht Gulp Teil zwei zu tun.