[MUSIK]
Wir werden nun unsere Reise mit NPM-Skripten in dieser nächsten Übung fortsetzen.
Hier lernen wir, wie man
einen Distributionsordner erstellen kann, der alle Dateien für
unser Projekt enthält, die wir einfach auf einem Webserver bereitstellen können, der unsere Website hostet.
Angesichts der HTML-, CSS- und JavaScript-Dateien
, die wir bereits in unserem Projektordner vorbereitet haben, werden wir
sie verarbeiten, indem wir die verschiedenen Aufgaben, über die wir gesprochen haben.
Das macht eine CSS-Änderung,
Verkettung und JavaScript-Hässlichkeit, Verkleinerung
und HTML-Minifizierung und
generiert dann einen Verteilungsordner mit allen Dateien.
Aber im Wesentlichen bildet die Menge von Dateien, die
auf unserem Webserver bereitgestellt werden können, der unsere Website hostet.
Um Ihnen zu helfen, zu verstehen, was wir in dieser speziellen Übung tun werden,
wie wir von unserer Seite index.html bemerken, haben wir eine Reihe von
CSS-Dateien, die Sie hier mit diesem Link-Tag enthalten haben.
In ähnlicher Weise haben Sie eine Reihe von Skripten,
die Sie am Ende dieser Seite mit dem Skript-Tag eingefügt haben.
Wir haben eine Reihe von JavaScript-Code enthalten.
Nun, was wir in dieser Übung tun werden, ist, alle diese
Dateien in einer einzigen JavaScript-Datei zu kombinieren, die
von unserem Webserver an einen Browser geliefert wird, der versucht, unsere Website anzuzeigen.
Auf diese Weise minimieren wir die Anzahl der Downloads, die der Browser durchführen muss,
um unsere Website zu rendern.
In ähnlicher Weise werden wir den gesamten CSS-Code in einer einzigen CSS-Datei kombinieren,
so dass er geliefert werden kann.
Die kombinierte CSS-Datei enthält also den gesamten Code für
Bootstrap plus Bootstrap social und auch die Font Awesome und
auch den CSS-Code, den wir selbst geschrieben haben.
In ähnlicher Weise wird es eine einzelne JavaScript-Datei
geben, die den jQuery-Tether, Bootstrap und den JavaScript-Code enthält, den wir
selbst geschrieben haben, alle in einer einzigen Datei zusammengefasst.
Nun, so können Sie die Bereitstellung Ihrer Webseiten durchführen.
Und anstatt mehrere solcher Dateien dort zu
haben, besteht eine Möglichkeit, diese in einer einzigen Datei zu kombinieren, so dass
Sie mit einem einzigen Download den gesamten JavaScript-Code erhalten, der für das Rendern Ihrer Webseite notwendig ist.
Ein einziger Download erhalten Sie den gesamten CSS-Code, der für das
Rendern Ihrer Webseite notwendig ist.
Und dann wird natürlich die HTML-Datei selbst heruntergeladen.
Um diese Aufgaben zu erledigen, müssen wir
einen bestimmten Satz von NPM-Modulen verwenden, um dies zu erreichen.
Nun, was wir am Ende tun werden, ist, einen Ordner
in unserer Projektdatei zu erstellen, und dann nennen wir diesen Ordner als dist, D-I-S-T.
Ich benenne das nur zufällig als Dist Ordner.
In meinem Fall ist das, was ich mit dem dist-Ordner meine, ein Distributionsordner.
Am Ende der Reihe von Schritten, die wir tun werden, enthält dieser Ordner alle
Dateien, die einfach auf den Webserver kopiert werden können, der unsere Website hostet.
Um zu beginnen, was wir tun werden, ist,
hier eine Reihe von Skripten einzurichten, die uns helfen, diesen Prozess zu automatisieren.
Also zuerst, wir könnten
den Distributionsordner einmal vorbereiten, dann vielleicht können wir einige Änderungen
an unseren Quelldateien vornehmen, dann müssen wir möglicherweise unseren Distributionsordner neu kompilieren.
Im ersten Schritt würden wir das Skript einrichten, um diesen Distributionsordner zu bereinigen, was
im Wesentlichen bedeutet, löschen Sie den Distributionsordner.
Um das zu tun, werde ich die Hilfe eines NPM-Moduls namens rimfraf nehmen.
Also werde ich npm —save-dev rimfraf installieren.
Dieses Modul hilft uns, einen Ordner vollständig zu säubern.
Sobald ich das installiert habe, werde ich ein Skript
in meiner package.json-Datei einrichten, um alle Dateien zu bereinigen.
Wenn ich zur package.json-Datei gehe, werde ich hinzufügen, also
denken Sie immer daran, dass Koma in diesen Skripten sehr, sehr wichtig ist.
Manchmal werden Sie auf Probleme stoßen, nur weil Sie das Komma vergessen haben.
Stellen Sie also sicher, dass Sie diese Kommas bei Bedarf setzen.
Die nächste Beschreibung, die ich hinzufügen werde, ist, sauber,
offensichtlich, wie der Name schon sagt, dies wird meinen Ordner säubern.
Also werde ich sagen, rimraf dist.
Dies bedeutet, dass dies, wenn er ausgeführt
wird, den Distributionsordner bereinigt.
Also werde ich das in hinzufügen, und
dann werde ich dieses Komma dort setzen, weil ich weitere Skripte darunter hinzufügen werde.
Lassen Sie mich also die Änderungen speichern, der nächste Schritt, den ich tun werde, ist
ein npm-Modul namens Kopierdateien zu installieren, die verwendet werden, um
einige Schriftdateien aus meinem Knotenmodulordner in meinen Distributionsordner zu kopieren.
So dass, wenn es bereitgestellt wird, auch die Schriftdateien bereitgestellt werden.
Gehen Sie zum Terminal, das nächste Paket, das ich installieren werde, ist
npm -g, erinnern Sie sich, dass dies bedeutet, dass es global installiert werden sollte.
Da ich das auf einem Mac mache,
sollte ich sudo npm -g sagen, wenn du es unter Windows machst, brauchst du das Sudo nicht.
sudo npm -g installieren kopierdateien.
Und sobald das installiert ist, hilft mir dieses NPM-Modul,
Dateien von einem Ordner in einen anderen Ordner zu kopieren.
Lassen Sie mich hier ein weiteres NPM-Skript vorstellen.
Wenn ich zu meiner package.json-Datei
gehe, werde ich einen neuen Scrip hier Namen Copyfonts erstellen.
Dieses Skript wird es mir ermöglichen, alle Schriftartendateien aus meinem
Font Awesome Ordner in meinen Distributionsordner zu kopieren.
Damit beim Rendern meiner Website
auch all diese Schriftarten Dateien verschickt werden können, so dass
meine Webseiten mit den Font Awesome Schriftarten korrekt wiedergegeben werden.
Um dies zu tun, werde ich sagen, kopieren Sie Dateien -f,
-f bedeutet, dass es einfach die Dateien ohne die volle Hierarchie
kopiert und einfach die Dateien von einem Speicherort an einen anderen Speicherort kopiert.
Also werde ich sagen, kopieren Sie Dateien -f
node_modules/font_awesome/fonts/star
und dist/fonts,
und speichern Sie dann die Änderungen.
Lassen Sie mich nun illustrieren, wie diese beiden npm-Skripte zusammenarbeiten. Wenn ich
in mein Befehlsfenster gehe, werde ich
npm run copyfonts eingeben.
Wenn dies ausgeführt wird, wird ein Ordner mit
dem Namen dist in meiner Projektordnerhierarchie erstellt.
Und dann innerhalb der dist
wird es einen Unterordner namens fonts geben, der die Schriftdateien enthält. Wenn Sie
dies ausführen,
werden Sie sofort feststellen, dass der Distributionsordner hier erstellt wird.
Und innerhalb des Distributionsordners
können Sie sehen, dass es einen Unterordner namens Schriftarten gibt.
Und da drin wurden alle Fontawesome-Dateien kopiert.
So funktioniert das Copyfonts-Skript.
Ich werde Ihnen zeigen, wie das saubere Skript funktioniert.
Also, wenn ich npm run clean eintippe, wird dies diesen Distributionsordner löschen.
Wenn ich das ausführe, würden Sie bemerken, dass
der Distributionsordner aus meiner Projektordnerhierarchie gelöscht wird.
So funktioniert das Saubere.
Nun, da wir diese beiden Skripte eingerichtet haben,
müssen wir nun in der Lage sein, die verbleibenden Distributionsdateien aufzubauen.
Im nächsten Schritt installieren wir ein Knotenmodul namens imagemin-cli,
welches die Befehlszeilenschnittstelle für das imagemin-Modul ist.
Das imaginemin-Modul nimmt eine Sekte von Bilddateien und komprimiert sie dann nach unten.
So gestapelt die Größe dieser Dateien werden so weit wie möglich minimiert,
aber immer noch richtig gerendert werden, wenn unsere Website gerendert wird.
Auf diese Weise reduzieren wir die Menge an Daten, die
vom Browser heruntergeladen werden müssen, wenn er unsere Webseite rendern muss.
Wenn Sie also Bilder in Ihre Webseite einbinden, dann ist imagemin-Aufgabe
etwas, das Sie lernen sollten, um die Größe Ihrer Bilddateien zu reduzieren.
Um das zu tun, werde ich dieses imagemin-Knotenmodul als globales Modul installieren.
Also tippe ich sudo ein, da ich einen Mac verwende,
npm -g installiere imagemin-cli
und installiere dann dieses Knotenmodul.
Manchmal werden einige der imagemin-Plugins auf einem Mac nicht korrekt installiert.
Deshalb gebe ich dem Befehl diese zusätzlichen Flags,
sie sagen —unsafe-perm=true und —allow-root.
Sobald diese Installation abgeschlossen ist,
lassen Sie mich ein Skript einrichten, um diese Vergrößerung meiner Bilder zu machen.
Wenn ich wieder zu package.json gehe, werde ich hier das nächste Skript einrichten.
Also würde ich sagen, imagemin ist der Skriptname, den ich tun werde,
und ich würde sagen imagemin.
Und dann, da alle meine Bilder im IMG-Ordner sind, würde ich sagen, img/*,
und dann werden viele Dateien in das dist image kopiert.
Die ursprünglichen Bilddateien aus dem Bildordner, den ich habe, werden also
in den Distributionsordner und in den Bildunterordner dort kopiert.
Das vervollständigt also mein Imagemin.
Lassen Sie mich mit der restlichen Einrichtung fortfahren, und
dann werden wir sehen, wie wir die Skripte verwenden, die wir bereits dort eingerichtet haben.
Jetzt, da ich den Testordner drin habe, den ich möglicherweise erstellen könnte,
möchte ich den Ordner dist nicht in mein Git-Repository einchecken.
Deshalb werde ich in meine .gitignore Datei auch in den Ordner dist hinzufügen.
Der Ordner dist wird also ignoriert, wenn ich in das Git-Repository einchecke.
Speichern wir also die Änderungen und gehen zurück zu package.json.
Nun, was ich als nächstes tun werde, ist, drei verschiedene
Knotenmodule zu installieren, die es mir ermöglichen, die Änderungen
an meiner index.html Datei und den restlichen HTML-Dateien dort durchzuführen.
Geben Sie an der Eingabeaufforderung npm install —save dev ein.
Ich werde ein Modul namens usemin-cli installieren.
Dieser usemin-cli ist derjenige, der mir erlaubt, die Transformation aus meiner
HTML-Datei durchzuführen.
Und dann verketten und kombinieren Sie alle
CSS-Dateien in einer einzigen CSS-Datei und legen Sie sie dann in den Distributionsordner.
In ähnlicher Weise werden alle JS-Dateien verkettet und in einen einzigen Ordner abgelegt.
Also ist dieser Usemin-cli nützlich.
Aber dieser usemin-cli nimmt die Hilfe
von drei anderen Knotenmodulen namens cssmin,
dann uglifyjs und htmlmin.
Also muss ich diese drei Knotenmodule zusätzlich zu usemin-cli installieren.
Und ich werde dies lokal in meinem Projekt installieren,
deshalb npm install —save-def.
Auf diese Weise werden sie in meiner package.json-Datei gespeichert.
Gehen wir also weiter und schließen Sie die Installation ab.
Jetzt, da ich das Usemin und
die zugehörigen Knotenmodule installiert habe, muss ich eine Transformation in
meine index.html Datei und die restlichen HTML-Dateien durchführen.
So dass das usemin node_module erkennt, dass es sich bei dieser Gruppe
um eine Reihe von CSS-Dateien handelt, die komprimiert, berechnet und verifiziert werden müssen.
In ähnlicher Weise ist dies die Gruppe von JavaScript-Dateien, die uglyfiziert
, kombiniert und miteinander verkettet werden müssen.
Um dem Usemin-Paket
zu helfen, muss ich ein wenig Code in meine index.html Datei hinzufügen.
Also gleich vor dem ersten Link dort,
werde ich hier oben eine Markierung hinzufügen,
die besagt! — Build:css.
Jetzt, das! —, wie Sie erkennen werden,
ist ein Kommentar aus HTML-Perspektive.
In diesem Kommentar werde ich also einschließen, dass diese bestimmte Zeile
vom Verwendungsmenü verwendet wird, um den
Codeblock zu erkennen, der alle CSS-Dateien angibt, die übertragen werden müssen.
Also sage ich build.css, und dann werde ich
den Dateinamen als css/main.css angeben.
Dies ist die Syntax für die Angabe.
Was das bedeutet, ist, dass diese Block von CSS-Dateien alle miteinander kombiniert
und dann verkettet, verkleinert und dann in diese Datei namens main.css eingefügt werden.
Und dann wird dieser Block auf der anderen Seite identifiziert, indem er sagt:
Bindestrich —, okay, tut mir leid.
Ich habe vergessen, am Ende einen doppelten Bindestrich einzuschließen.
Das ist der Grund, warum dies keine Farben drehte.
Manchmal sind Sie also glücklich, dass Ihr
Redakteur auf diese potenziellen Fehler hinweist, die Sie begehen könnten.
Also genau da würde ich sagen, endbuild und
dann — rechte Klammer dort.
Nun, was auch immer zwischen diesem Build und
Endbuild ist, diese Gruppe wird als eine Einheit behandelt,
um von unserem usemin npm Modul dort kombiniert zu werden.
Sehen Sie sich die Syntax an, die das Usemin-Modul dort verwendet.
Ich muss die gleiche Transformation zu contactus.html und aboutus.html auch machen.
Also werde ich diese
hier kopieren, die Faule, die ich bin.
Ich werde einfach kopieren und
einfügen in contactus.html und
dann auch aboutus.html dort.
In ähnlicher Weise,
wenn ich zur index.html zurückgehe, kopiere ich diesen Inbuild und kopiere ihn dann auch in
contactus.html und aboutus.html Daten.
Okay, lassen Sie uns die Änderungen an allen Dateien speichern.
Gehen Sie dann zurück zu index.html.
Ich werde das Gleiche unten für meine
JavaScript-Skripte wiederholen, die ich dort aufgenommen habe.
Also, hier nach unten zu gehen,
was ich hier tun muss,
ist <! — Build js,
und ich werde js/main.js sagen.
Doppelter Bindestrich, Schrägstrich.
Also das ist der Anfang des Blocks und dann wird das Ende durch,
Build, okay?
Mit diesen Änderungen ist jetzt meine Datei index.html bereit,
und ich muss die gleiche Transformation zu contactus.html am unteren Ende durchführen.
Und aboutus.html auch an der Unterseite.
In ähnlicher Weise wurde dieses Enbuild kopiert.
In contactus.html und aboutus.html und speichern Sie dann alle Dateien.
Und das bereitet unsere HTML-Dateien für die
Umwandlung vor, um den Distributionsordner vorzubereiten.
Diese Dateien bleiben als solche, aber dann werden die transformierten Dateien in den
Distributionsordner gespeichert, der aus diesen Dateien erstellt wurde.
Nun, sobald wir das abgeschlossen haben, lassen Sie uns ein paar Skripte einrichten. Wenn ich
zu package.json gehe, werde ich mein nächstes Skript namens usemin einrichten.
Und dann sagt dies usemin,
contactus.html -d dist, dies ist die Syntax für
angeben -d dist, was bedeutet, dass das Ziel für
diese Verteilung dist Ordner.
Und dann würde ich sagen htmlmin, dies wird auch die HTML-Datei minimieren.
Es werden also alle fremden Leerzeichen und Kommentare aus der HTML-Datei entfernt.
Aber sie komprimieren es so
, dass es die minimale Anzahl von Zeichen enthält.
Wir werden uns das Ergebnis ansehen, nachdem wir abgeschlossen haben und die Transformation dort durchführen.
Also, das und dann, nicht nur das,
und dann htmlmin, und dann sagen
-o dist/contactus.html und
&&, das bedeutet, dass es
danach noch mehr kommen wird.
Dann werde ich sagen, usemin
dann aboutus.html
-d dist —htmlmin
-o dist/aboutus.html.
Das ist also die zweite zum Umwandeln der Datei aboutus.html.
Und dann &&, dies ist ein langes Skript,
usemin index.html,
wir müssen alle Dateien transformieren.
Deshalb muss ich jeden explizit dort angeben.
usemin nimmt keine Platzhalter, also
muss ich das Halten wie [UNHÖRBAR] angeben.
Und so verwende index.html
-d dist —htmlmin
-o dist/index.html.
Und danach habe ich ein Komma gesetzt, weil ich das nächste Skript einführen werde, das
heißt, Aufgerufene Build.
Dieses Build-Skript erstellt also meinen Distributionsordner.
Also, um meinen Distributionsordner zu erstellen,
ist das erste, was ich tun werde, npm run clean.
Und dann npm führen Copyfonts aus.
Sie haben diese beiden bereits früher in Aktion gesehen,
dann werde ich sagen, npm laufen imagemin, um die minimierten Bilder zu erstellen,
und dann würde ich sagen, npm run usemin.
Und dieses spezielle Skript wird meinen Distributionsordner aufbauen,
dessen Inhalt dann auf meinen Webserver kopiert werden kann, um meine Tonhöhe zu lösen.
Speichern Sie die Änderungen.
Lassen Sie uns jetzt sehen, wie wir die Website aufbauen.
An diesem Punkt, um unsere Website aufzubauen und
die Eingabeaufforderung einfach npm run build eingeben und dann einfach ausführen.
Dieses Skript, das wiederum eine Reihe
von beiden Skripten ausführt, die wiederum den gesamten Satz
von Aufgaben abschließen, die ausgeführt werden müssen, um meinen Distributionsordner vorzubereiten.
Also, lasst uns weitermachen und dieses Ding ausführen und
dann wird das durch alle verschiedenen Skripte laufen.
Es dauert ein paar Minuten, bis es abgeschlossen ist, und wenn es abgeschlossen ist,
ist Ihr Distributionsordner jetzt bereit für die Bereitstellung auf Ihrem Webserver. Wenn Sie
zu unserem Editor gehen,
sehen Sie jetzt, dass der Distributionsordner jetzt bereit ist.
Innerhalb des Distributionsordners sehen Sie die drei Indexdateien,
und im CSS-Ordner sehen Sie die einzelne Datei mit dem Namen m ain.css,
die alle Bootstraps CSS, Bootstraps CSS
und den CSS-Code enthält, den Sie erstellt haben.
Und der JS-Ordner
enthält die main.js, die das Bootstrap, die jQuery und
die ganze Reihe von JavaScript-Code in einer einzigen Datei zusammengefasst enthält.
Das Bild enthält die optimierten Bilder, und die Schriftarten, die
Sie früher gesehen haben, enthalten die Schriftartdateien.
Lassen Sie uns nun einen kurzen Blick auf index.html werfen, die hier erstellt wurde.
Wenn Sie sich also die index.html ansehen, die hier erstellt wurde,
werden Sie feststellen, dass das Ganze buchstäblich unlesbar ist,
denn wenn Sie HTML min gemacht haben, hat es alle fremden
Kommentare entfernt, es hat alle Leerzeichen entfernt und
dann diesen ganzen laufenden Satz von Zeichen.
Für den Computer macht es keinen Unterschied, weil es diese
Webseite genauso gut rendert.
Für dich und mich macht das einen Unterschied, weil wir das nicht leicht lesen können.
Das ist also, was die Verminderung für Ihre HTML-Datei verursacht.
Werfen wir einen Blick auf die main.css.
Wenn Sie sich die main.css ansehen, sehen Sie, dass das Ganze
in eine einzige Einheit zerquetscht wird, wie Sie nach unten gehen.
Wenn Sie mutig genug sind, gehen Sie nach unten und dann werden Sie sehen, die,
Sie werden Stunden speziell geschrieben
CSS-Klassen rechts unten unten unten hier sehen.
Genau dort erkennt man Karussellknopf und andere Dinge,
nabber-dunkel und andere Dinge dort, also ist alles kaputt in.
Also, das ist, was Minification, und Kosten.
Main.js, dasselbe.
Unlesbarer Code dort.
Ihr Computer, kein Unterschied.
Damit ist unser Distributionsordner nun komplett.
Schauen wir uns unseren Distributionsordner an.
Zum Glück haben wir unseren Light-Server bereits laufen.
Was ich also tun werde, ist, zum Browser zu gehen und
dann die indexfähige CLM-Datei in diesem Distributionsordner auszuchecken, um zu
sehen, ob sie richtig gerendert wird oder nicht. Wenn ich
zum Browser gehe, werde ich in meiner Adressleiste tippe,
dist index.html und
merke, dass diese bestimmte Datei die
Distributionsdatei ist, die erstellt wurde, und sie enthält genau die gleiche Sache und
rendert genau die gleiche Weise wie unsere ursprüngliche Webseite, die wir erstellt haben.
Ähnlich, beachten Sie, dass diese aboutus.html aus dem
Distributionsordner stammt und dies genau wie zuvor gerendert wird,
und auch die Datei contactus.html.
Alles funktioniert einwandfrei.
Alles, was Sie noch tun müssen, um Ihre Webseite
oder Ihre Website bereitzustellen, ist einfach den Inhalt aus dem Ordner dist zu kopieren
und dann auf Ihren Webserver hochzuladen, und
dann ist Ihr Webserver einsatzbereit und dient Ihrer Website.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie wir
NBM-Skripte verwenden können, um unsere Website zu erstellen und bereitzustellen.
Dies kann ein guter Zeitpunkt für
Sie sein, einen Kommentar abrufen mit der Nachricht NPM-Skripte, Teil 2 zu tun.
( MUSIK)