Lasst uns unser Grunzen fortsetzen.
Wie im zweiten Teil der NPM-Skripte Übung werden
wir in diesem zweiten Teil dieser Grunz-Übung genau die gleichen Aufgaben konfigurieren.
Wir werden den Distributionsordner bereinigen, die
Schriftarten in den Distributionsordner kopieren,
dann werden wir auch die Minifizierung unserer Bilder mit imagemin durchführen
und dann schließlich die Usemin-Aufgabe verwenden, um unseren Distributionsordner zu erstellen und vorzubereiten.
Fortsetzung unserer Übung
werde ich ein paar Grunz-Module installieren.
Also, lassen Sie uns NPM installieren, install-grunt-contrib-copy.
Dies wird zum Kopieren der Dateien und dann grunt-contrib-clean
und minus save-dev verwendet.
Und sobald diese beiden installiert sind,
werden wir fortfahren und die entsprechenden Aufgaben konfigurieren.
Gehen Sie zu Ihrer Grunt-Datei,
werden wir in der Konfiguration für die Kopie und die sauberen Aufgaben hinzufügen.
Also, beginnend mit dem Komma,
denken Sie immer daran, das Komma nicht zu vergessen.
Es wird zurückkommen, um dich in den falschen Momenten zu beißen, wenn du das tust.
Lassen Sie uns also die Kopieraufgabe einrichten.
Für die Kopie erwartet usemin, dass wir auch
unsere HTML-Dateien in den Distributionsordner kopieren
, so dass es die Manipulation daran tun kann.
Also, in diesem Fall
werden wir zuerst
die HTML-Dateien aus unserem Projektordner in den Distributionsordner kopieren.
Also, um das Kopieren zu machen,
werde ich den HTML-Teil davon einrichten.
Also, hier werden wir einige
der grunt-Syntax verwenden, um die Dateien anzugeben, die kopiert werden müssen.
Also, ich sage Dateien und gebe
dort auch die rechten, linken und rechten Klammern an, also
muss ich jetzt bestimmte Konfiguration angeben.
Also, ich würde sagen, erweitern Sie true und dot true, dann CWD,
das aktuelle Arbeitsverzeichnis ist Punkt Schrägstrich
, und danach
werden wir die nächste konfigurieren, die SRC ist, die Quelldateien,
und dann sind
die Quelldateien star.html, alle HTML-Dateien,
und dann werden wir sie kopieren den Ordner „dist“.
Deshalb ist das Ziel auf den Distributionsordner hier festgelegt.
Mit dieser Einrichtung
kopiert meine Kopieraufgabe alle HTML-Dateien in den Distributionsordner.
Nun müssen wir auch die Schriftarten kopieren.
Also werde ich die zweite für die Schriftarten einrichten.
Also, ich gebe Schriftarten an und dann muss ich auch hier
die Dateien angeben, die kopiert werden müssen, und so sagen wir Dateien,
und dann sind dies
einige Konfigurationsparameter, die Sie für die Kopieraufgabe einrichten müssen.
Nun, wenn Sie verstehen müssen,
dann, indem Sie die Dokumentation für das entsprechende Grunt-Plugin lesen,
können Sie dies herausfinden und so oder Sie können
einfach dem Beispiel folgen, das ich hier gebe.
Also, dot true, und dann CWD,
das aktuelle Arbeitsverzeichnis ist Knotenmodule und Schriftart genial.
Also, hier werde ich die Dateien kopieren,
und dann ist die Quelle der Dateien die fontsstar.star, das
sind die Dateien, die ich kopieren muss,
und das Ziel ist der Distributionsordner.
Damit habe ich meine Kopieraufgabe eingerichtet, um
sowohl die HTML-Dateien als auch die Schriftartendateien in meinen Distributionsordner zu kopieren.
Nun, die nächste Aufgabe, die ich einrichten werde, ist die saubere Aufgabe.
Lassen Sie mich also die saubere Aufgabe konfigurieren.
Für die saubere Aufgabe konfiguriere ich den Build,
und dann werde ich sagen, dass die Quelle der Distributionsordner ist.
Im Wesentlichen wird angegeben, dass der Distributionsordner bereinigt werden soll.
Also, jetzt haben wir die Kopie und die sauberen Aufgaben eingerichtet, so lassen Sie uns die Änderungen speichern.
Die nächste Aufgabe, die ich einrichten werde, ist die Imagemin-Aufgabe.
Dies ist, was wir verwenden, um die Bilder zu komprimieren und in den Distributionsordner zu kopieren.
Um mit der Imagemin-Aufgabe zu beginnen,
installieren Sie im ersten Schritt das entsprechende Grunt-Plugin.
Also, grunt-contrib-imagemin, minus save.dev.
Und sobald das installiert ist,
werden wir fortfahren und die entsprechende Imagemin-Task konfigurieren.
Wenn ich nach der Konfiguration für die saubere Aufgabe
zu unserer Grunt-Datei gehe, werde ich die Imagemin-Aufgabe konfigurieren.
Also, ich werde imagemin sagen,
und dann genau da drin
werde ich dynamisch angeben,
und dort werde ich die Dateien angeben, damit Sie
sehen können, dass die Dateispezifikation ähnlich wäre.
Ich würde sagen, erweitern Sie true,
dann ist CWD das aktuelle Verzeichnis.
Dann ist die Quelle der Dateien imagestar.
und dann in Klammern, in Klammern,
gebe ich PNG, GIF und JPG an.
Im Wesentlichen können Sie hier das globale Muster der Datei sehen.
Es sagt also alle PNG-, GIF-
oder JPG-Dateien, die diesem Muster entsprechen und dann
Startpunkt bedeutet, dass alle Dateien dieses Musters
und Quelle und das Ziel, das
ich als Distributionsordner festgelegt habe.
Damit haben wir unsere Kopier-,
Säuberungs- und Imagemin-Aufgabe konfiguriert.
Lassen Sie uns eine Aufgabe konfigurieren, die hier Build genannt wird.
Also, ich würde sagen, registrieren Sie Aufgabe,
grunt registrieren Aufgabe und dann werde ich die Aufgabe als Build benennen,
und dann
werden wir in diesem, die Einrichtungsschritte angeben, die von der Build-Aufgabe durchgeführt werden sollen.
Also, genau da, Semikolon und dann
werde ich die drei Aufgaben in der Reihenfolge angeben, in der sie ausgeführt werden sollen.
Zuerst werde ich sagen, sauber.
Also werden wir den Distributionsordner bereinigen
und dann den Distributionsordner neu erstellen.
Sauber, dann wäre die nächste Aufgabe
kopieren und dann danach würde ich tun, imagemin.
Also diese drei Aufgaben hier konfiguriert werden.
Lassen Sie mich damit die Änderungen speichern.
Mal sehen, wie das Ding funktioniert.
Nun, wenn ich zur Eingabeaufforderung gehe, wenn ich tippe,
grunt und baue, werden Sie sehen, dass es zuerst die Reinigung macht,
dann um die Kopie zu machen und die Imagemin-Aufgabe auszuführen.
Also, es macht all diese drei und dann würden Sie sofort sehen, dass
der Distributionsordner hier in meinem Projektordner aufgebaut ist.
Und innerhalb des Distributionsordners können Sie sehen, dass die Schriftarten kopiert wurden,
die Bilder kopiert wurden und
die drei HTML-Dateien in den Distributionsordner kopiert wurden.
Du bist nur auf halbem Weg da.
Jetzt müssen wir in der Lage sein, diese Dateien mit dem Usemin-Plugin zu verarbeiten.
Also, lasst uns als Nächstes gehen.
Jetzt werde ich ein paar NPM-Module installieren
, die nützlich sind, um den Distributionsordner zu erstellen.
Also, um das zu tun, würde ich sagen, NPM installieren.
Ich kann hier eine Reihe von Modulen angeben, also
würde ich sagen, grunt-contrib-concat.
Also, dies wird zum Verketten von Dateien verwendet, dann grunt-contrib-cssmin,
grunt-contrib-htmlmin, dann sagen wir, grunt-contrib-uglify.
Dann grunt-filerev.
Sie werden den Grund für die Verwendung von filerev in kurzer Zeit sehen,
und dann grunt-usemin, und speichern Sie def und
installieren Sie dann alle diese Grunt-Module.
Sobald alle von ihnen installiert wurden,
ist der nächste Schritt zu gehen und zu konfigurieren,
usemin Aufgabe, die auch
die cssmin Uglify Concat Aufgaben verwendet, um den Aufbau des Distributionsordners durchzuführen.
Jetzt können Sie fortfahren, um die Usemin-Task zu konfigurieren.
Also gehe ich zurück zur Grunt-Datei nach dem Imagemin,
werde ich die nächste Aufgabe hinzufügen, damit Usemin mit dem Grunzen arbeiten kann.
Die erste Aufgabe, die ich konfigurieren muss, heißt UseMinPrepare.
Diese UseMinPreparate-Aufgabe bereitet die Dateien vor und konfiguriert dann auch
die ConCache CSS min und Uglify und file ref Plugins,
so dass sie ihre Arbeit richtig erledigen können.
Also, das ist der Grund für die UseMinPrepare.
So wurde das Grant-Usemin-Plugin entwickelt.
Etwas anders als die Art und Weise, wie der Usemin, den wir mit den Endspiel-Skripten verwendet Wooks.
Also, in der UseMinPrepare,
nur ein zufälliger Name, den ich verwenden werde und dann sagen, Ziel ist dist.
Und dann würde ich die Quelle als alle HTML-Dateien hier angeben.
Also würde ich sagen contactus.html
, aboutus.html und index.html.
Also, alle diese drei Dateien müssen verarbeitet werden.
Im nächsten Teil dieser
UseMinPrepare-Konfiguration gebe ich die Optionen an.
Das ist etwas, was ich durch Versuch und Irrtum herausgefunden habe.
Folgen Sie einfach den Schritten entlang.
Also muss ich
hier ein paar Dinge konfigurieren, wo ich etwas namens Flow konfigurieren muss.
Und dann muss ich dort einen anderen Teil namens Steps konfigurieren,
und dann gebe ich hier die Schritte an und sage dann cssmin,
und dann werde ich sagen, js ist hässlich.
Also, das ist etwas, das ich hier und dann danach angeben muss, sage ich Post,
und hier kann ich zulassen, dass dies
einige Optionen für ihre spezifischen Aufgaben bereitstellt, die ich konfiguriert habe.
Also, ich bereitstelle einige zusätzliche Optionen für CSS zur Verfügung.
Also, das wird innerhalb der Post hier geliefert.
Jetzt wieder, so muss die Konfiguration durchgeführt werden.
Also haben wir es gerade gelernt, indem wir uns die Dokumentation dort ansehen.
Also, hier in der Post CSS,
würde ich einen Namen als cssmin angeben.
Bisher ist dies hier cssmin Aufgabe.
Ich würde sagen CreateConfig:
Funktionskontextblock, und dann innerhalb dieser Funktion
muss ich bestimmte Parameter angeben.
Also würde ich sagen, var
generierte Kontextoptionen Generator.
Das ist also eine JavaScript-Variable, die ich
dort angeben muss, JavaScript-Objekt im Wesentlichen.
Also, dieses Objekt enthält diese Eigenschaft namens Optionen,
wo ich einige Optionen angeben kann, die in die
CSS-Min übergeben werden, die von der usemin-Vorbereitungsaufgabe beauftragt wird.
Also, da drin, halten Sie
spezielle Kommentare und dann,
Rebase ist falsch.
Anscheinend muss ich dies bereitstellen, damit meine cssmin-Aufgabe derzeit
die Schriftartänderung und Aufnahme in die verkettete Datei behandelt.
Wenn ich das nicht mache,
scheint es die Schriftart großartig zu brechen, und das ist etwas, das ich herausgefunden habe,
indem ich ein wenig
über Stapelüberlauf und einige dieser Orte recherchierte und herausgefunden habe
, dass ihr Problem, das mit Schriftart großartig verursacht wird,
behoben werden kann, indem dies in meine Grunz-Konfiguration.
Also, wieder habe ich gerade
die Vorschläge von einigen Leuten nachgeschaut, die versucht haben und das Problem zu beheben.
Wenn Sie also auf Probleme wie diese stoßen,
ist dies eine Möglichkeit, Probleme zu lösen, die auftreten können, wenn Sie
mit diesen verschiedenen Tools arbeiten.
Lassen Sie mich die nächste Aufgabe für Concat hinzufügen.
Ich werde hier einige Dinge und Optionen angeben.
Ich gebe dieses Semikolon an,
also muss ich dies für das Concat angeben,
und dann auch nach
Optionen gebe ich dist als leer an.
Jetzt werden diese Concat-Optionen von der UseMinPrepare konfiguriert, die früher ausgeführt wird.
So können wir das meiste davon leer lassen,
und dann würde das von der UseMinPreparate neu konfiguriert werden.
Der nächste ist hässlich.
Innerhalb hässlich muss ich auch diese Dist nur als leer angeben.
Wenn ich diese nicht spezifiziere
, funktioniert die Usemin-Aufgabe nicht korrekt.
Deshalb muss ich all diese Dinge explizit angeben.
Also für cssmin würde ich auch dist leer sagen.
Und dann wird die nächste Aufgabe, die ich konfigurieren werde, filerev genannt.
Also, Sie haben gesehen, wie ich das filerev Plugin für Grunt installiert habe.
Was macht dieses filerev?
Was die filerev tut, ist, wenn usemin die Datei main.css und main.js vorbereitet,
was filerev tut, ist es eine zusätzliche Erweiterung zu diesem Hauptnamen hinzuzufügen,
so dass, wenn Sie eine neue Version Ihrer Website vorbereiten und sie auf die Webseite hochladen,
falls jemand Ihre Website früher gesehen hat,
dann Ihr Browser könnte die Dateien main.css und main.js eingelöst haben.
Wenn Sie diese Datei nicht anhängen, was passiert, ist
das, der Browser darunter lädt die neue Version Ihrer Webseite herunter.
Die Datei main.js und main.css wird möglicherweise nicht heruntergeladen
, da sie bereits im lokalen Cache gefunden wurde.
Daher wird Ihre Webseite möglicherweise nicht korrekt gerendert.
Also, um mit dem Problem umzugehen,
was wir tun, ist jedes Mal, wenn wir einen neuen Distributionsordner vorbereiten,
werden wir eine Dateirevision hinzufügen.
Dafür steht die filerev,
die Dateirevisionsnummer,
als zusätzliche Erweiterung für den Namen dieser css- und js-Datei.
Die main.ss und main.js Dateien die vorbereiteten.
Das ist also, was der filerev tut.
Nun, wie kann dieser filerev diesen Wert berechnen?
Es nimmt den Inhalt dieser Dateien und dann einige Verarbeitung und erzeugt dann
eine md5 komprimierte 20 Zeichen Nummer, die an die Hauptdatei angehängt wird.
Also, ich werde diesen Teil hier konfigurieren.
Also, in den Optionen,
gebe ich hier an und sage, wie es diese Zahl dort berechnen soll.
Also, ich sage Codierung utf8,
und dann sage ich Algorithmus, den er verwendet, um diesen Hash zu berechnen,
was wir als Hash nennen, ist md5.
Jetzt wird es klarer, wenn wir
die Usemin-Task tatsächlich ausführen und dann sehen, was sie tut, Länge 20.
Also werde ich zurückkommen und erklären, was dieses Ding
tut, wenn wir die Usemin-Aufgabe tatsächlich ausführen.
Also, lassen Sie mich die Optionen hier beenden und dann würde ich sagen, Release.
Also, ich muss hier ein paar weitere Dinge einrichten und dann freigeben,
und dann muss ich die Dateien angeben, für die mein filerev handeln soll.
Also würde ich sagen, filerev Dateien.
Also, drinnen hier Akte.
Sie beginnen also, ein Muster in der Art und Weise zu sehen, wie die Dinge hier angegeben werden.
Also, wenn Sie die Dateien hier angeben,
werden Sie die Quelle sagen,
und dann werden Sie dist CSS
und dann Stern Punkt CSS angeben,
und dann die nächste dist js*.js.
Damit haben Sie das filerev konfiguriert.
Also, der filerev Teil ist konfiguriert.
Und schließlich müssen wir die Usemin-Aufgabe konfigurieren.
Also, um die Usemin-Aufgabe zu konfigurieren,
gehe ich hier nach unten und sage usemin,
und hier lassen Sie mich einige Optionen für die usemin-Aufgabe angeben.
Also, hier gebe ich html an.
Also, hier gebe ich an, welche Dateien es ändern muss,
es muss aktualisiert werden.
Also, die Dateien, die in den Distributionsordner kopiert wurden.
Und der letzte ist „dist/index.html“.
Das sind also die drei Dateien, die es verarbeiten soll,
und dann einige Optionen dafür hier.
Also, die Optionen werde ich angeben „AssetsDirs.“
Also, hier gibt es alle Vermögenswerte, die ich verwende.
So existieren die CSS und die JavaScript-Dateien.
Also werde ich „dist/css“ und „dist/js“ angeben.
Damit haben Sie die Konfiguration der Aufgabe „usemin“ abgeschlossen.
Als nächstes konfigurieren wir die Aufgabe „htmlmin“.
Für die Aufgabe „htmlmin“
haben wir das Ziel „dist“, den Distributionsordner
und das „htmlmin“ angegeben,
das für alle HTML-Dateien in diesem Distributionsordner ausgeführt werden soll.
Die Optionen, die wir für diesen Zustand angeben, dass, wir sagen,
„CollapsedWhitespace: True“ bedeutet, dass
der gesamte Leerraum in den HTML-Dateien alle reduziert werden würde,
so dass die [unhörbar] nur den minimalen HTML-Code dort enthalten.
Die Änderung entfernt im Wesentlichen
alle fremden Zeichen aus den „htmlmin“ -Dateien.
Jetzt geben wir auch das Wörterbuch von Dateien an,
die Dateien, die konfiguriert werden müssen.
Dies wird als Ziel, Doppelpunkt, Quelle angegeben.
Also geben wir „dist/index.html“ an: „dist/index.html“,
was bedeutet, dass die „index.html“ im Distributionsordner
[unhörbar] ist und dann in die „index.html“ -Datei
auch im Distributionsordner zurückgesetzt wird.
In ähnlicher Weise wird die dort angegebene „contactus.html“ und dann die
„aboutus.html“ auch angegeben, wie in dieser Liste von Dateien gezeigt.
Der Grund, warum wir „htmlmin“ ausführen, nachdem wir „usemin“ beendet haben,
ist, weil „usemin“ alle Skripte durch
die Hauptdatei „.js“ ersetzt und auch all diesen
CSS-Code verkettet und kombiniert und durch die Hauptdatei „.css“ ersetzt wird.
So wird das „htmlmin“ auf
den resultierenden HTML-Dateien ausgeführt, nachdem „usemin“ seine Arbeit abgeschlossen hat.
So funktioniert das in Grunt.
Das Grunt „htmlmin“ muss also angewendet werden, nachdem das „Usemin“ seine Arbeit abgeschlossen hat.
Also, sobald alle diese konfiguriert sind,
dann ist ein kleiner Schritt, den ich tun muss, hier zurück zu gehen,
und dann, wo wir für die „jit-grunt“ angeben,
müssen wir angeben, dass diese „jit-grunt“,
Sie erinnern sich, dass wir etwas namens
„UseMinPreparate“ [unhörbar] eingeführt haben, so dass Sie informieren Sie das „jit-grunt“
sagen, dass die „UseMinPrepare“ -Konfiguration, die wir eingeführt haben
, von diesem „grunt-usemin“ -Plugin selbst behandelt wird.
Also muss ich explizit angeben,
sonst wird sich „jit-grunt“ nach einem „UseMinPrepare“ Grunt-Plugin umsehen.
Um das zu spezifizieren,
würde ich „UseMinPrepare“ sagen und „grunt-usemin“ sagen,
im Wesentlichen „jit-grunt“ sagen, dass „UseMinPrepare“
vom „grunt-usemin“ -Plugin dort behandelt wird.
Lassen Sie uns schließlich die „Build“ -Task am unteren Rand neu konfigurieren.
Ich gehe zu dieser „Build“ -Aufgabe nach „Imagemin“.
Also haben wir „sauber“, „kopieren“, „imagemin“ gemacht,
dann ist die nächste Aufgabe, die ich ausführen sollte, „UseMinPrepare“ und dann nach
„UseMinPrepare“ führen Sie „contact“ aus, dann führe ich „cssmin“ aus,
dann führe ich „uglify“ aus.
Sie sehen also, dass wir sie in einem bestimmten Satz von Schritten tun müssen.
Sobald die „cssmin“ und „uglify“ ausgeführt
werden, würden die Hauptdateien „.css“ und die Hauptdateien „.js“ erstellt.
An diesem Punkt werde ich den
„filerev“ ausführen und dann schließlich die „usemin“ -Task ausführen.
So sehen Sie die Geheimnisse: „sauber“, „kopieren“,
„imagemin“, „UseMinPreparate“, „concat“, „cssmin“, „hässlich“.
An diesem Punkt sind die Dateien „.css“ und „.js“,
die Hauptdateien „.css“ und „.js“ bereit.
Ich kann das „filerev“ auf ihnen machen und dann endlich das „usemin“ ausführen.
Aber das, speichern wir die Änderungen und dann gehen und
sehen, wie die „Build“ -Aufgabe tatsächlich die Verteilung vorbereitet.
[ unhörbar] Gehe zu unserem Terminal,
tippe ich an der Eingabeaufforderung „grunt build“ und warte dann, bis alle Aufgaben ausgeführt werden.
Sie würden also sehen, dass es alle Aufgaben durchlaufen wird,
und dann, wenn es fertig ist,
wird es einfach angeben, dass alle Aufgaben erledigt sind.
Wenn Sie also zurückgehen und sich die Reihenfolge der erledigten Aufgaben ansehen möchten,
können Sie einfach zurückscrollen und sehen, was es tut.
Es reinigt zuerst,
dann kopiert es die HTML-Dateien,
dann kopiert es die Schriftdateien,
dann macht es die Aufgabe „imagemin“,
dann macht es die „UseMinPreparate“,
dann macht es das „concat“,
dann macht es die „cssmin“,
sowohl die Verteilung als auch die generierte,
und dann macht es die“ uglify“,
dann „uglify“ Aufgabe, dann führt es die „filerev“ und dann schließlich die „usemin“ Aufgabe aus.
Und dann sollte unser Distributions-Ordner jetzt bereit sein. Wenn Sie
zu unserem Editor gehen,
sehen Sie jetzt, dass der Distributionsordner vorbereitet wurde.
Schauen wir uns speziell die Hauptdateien „.css“ und „.js“ an.
Notieren Sie sich die Namen dieser Dateien.
Beachten Sie, dass
es nach main einen Punkt gibt und dann
einen 20-stelligen Hash gibt, der hier von „filerev“ hinzugefügt wurde.
Was passiert, ist, wenn ich einen neuen Distributionsordner
vorbereite, ändert sich dieser Hash jedes Mal, wenn ich den neuen Distributionsordner vorbereite,
was bedeutet, dass jedes Mal, wenn ich eine neue Version meiner Website bereitstelle,
wenn irgendwelche Browser zuvor meine Website angesehen haben, ihre Cache-Einträge,
wo sie könnte das Haupt „.css“ zwischengespeichert haben und Haupt „.js“ ist
ungültig geworden, weil wir eine neue Version der Haupt „.css“ und „.js“ haben.
So wird der Browser diese Dinge erneut herunterladen.
Ich habe das „filerev“ nicht mit den NPM-Skripten gezeigt,
aber ich habe es gerade hier hinzugefügt, nur um Ihnen zu zeigen, wie es mit dem Grunt gemacht wird.
Damit schließen wir diese Übung ab.
Werfen wir einen kurzen Blick auf die Website in unserem Browser. Wenn Sie
zu Ihrem Browser gehen,
können Sie sehen, dass ich jetzt in „dist/index.html“ lade.
Das ist also aus dem Distributionsordner,
also schaue ich aus und es sieht gut aus.
Die „aboutus.html“ sieht auch gut aus, genau wie zuvor.
Und die Kontaktseite sieht auch gut vorbereitet für die Bereitstellung aus.
Damit schließen wir diese Übung ab.
Nach all dem Grunzen
musst du dir sicher den Atem holen.
Bevor Sie das tun, stellen Sie sicher, einen guten Kommentar mit der Nachricht „Grunzen Teil zwei“ zu machen.