Nun, da wir ein Verständnis
der verschiedenen Schritte beim Erstellen und Bereitstellen unserer Website haben,
und auch eine kurze Einführung in NPM-Skripte in der vorherigen Vorlesung,
lassen Sie uns einen tiefen Einblick in die Entwicklung von
NPM-Skripten machen, um viele der Aufgaben zu automatisieren, über die wir zuvor gesprochen hatten.
Wie Sie in der vorherigen Vorlesung gesehen haben,
haben wir bereits ein paar NPM-Skripte, die wir in unsere package.json-Datei aufgenommen hatten,
eines zum Starten des Lite-Servers und das zweite
zum Konvertieren des SCSS-Codes in CSS.
In dieser und der nächsten Übung
werden wir NPM-Skripte näher untersuchen.
Um zu beginnen, lassen Sie uns zuerst einige Housekeeping für die Datei index.html durchführen. Wenn wir
zur Datei index.html gehen,
sehen wir, dass wir diesen JavaScript-Code am Ende dieser Datei index.html haben.
Ich würde lieber diesen JavaScript-Code in
einer separaten Datei aufbewahren, die alle unsere Skripte enthält,
und dann diese Datei in meine index.html einfügen.
Um dies zu tun, lassen Sie uns hier einen anderen Ordner mit dem Namen js erstellen.
Und in diesem js-Ordner
werde ich eine neue Datei mit dem Namen scripts.js erstellen.
Und zu index.html
gehe ich einfach diesen JavaScript-Code von hier aus und
füge ihn dann in die Datei scripts.js ein
und speichere dann die Änderungen in der Datei scripts.js.
Jetzt, da wir all unseren JavaScript-Code in eine eigene Datei verschoben haben,
werde ich jetzt diese JavaScript-Datei in meine index.html einfügen.
Ich würde sagen <script src =
„js/scripts.js“ Also auf diese Weise
ist mein ganzer JavaScript-Code jetzt wieder in meine index.html Datei enthalten.
Auf diese Weise enthält meine Datei index.html den gesamten HTML-Code,
und mein CSS- und JavaScript-Code ist in ihren eigenen separaten Dateien deaktiviert.
Lassen Sie mich diese Skriptzeile von der Seite index.html kopieren
und dann zur Seite aboutus.html gehen,
scrollen Sie den ganzen Weg nach unten, wo ich
andere Skripte eingefügt habe, und fügen Sie dies dann ein.
In ähnlicher Weise lassen Sie mich zur Seite contactus.html gehen
und dort wieder zum Ende der Datei scrollen.
Lassen Sie mich diese Zeile einfügen.
Speichern wir die Änderungen und fahren Sie dann mit dem nächsten Schritt fort.
Der nächste Schritt, den ich gerne tun würde, ist, ein paar
NPM-Module zu installieren, die ich verwenden werde, um einige Aufgaben zu automatisieren.
Das erste NMP-Modul, das ich installieren werde, heißt onchange.
Dieses onchange-Modul wird Dateien in meinem Projektordner überwachen,
und dann, wenn sich diese Dateien ändern,
löst es automatisch eine Aufgabe aus, die ausgeführt werden soll.
Auf diese Weise, zum Beispiel,
wenn ich ein Zitat unquote Watch
für einige Dateien, zum Beispiel meine SCSS-Datei, einrichte,
wird
es jedes Mal, wenn ich Änderungen an meiner SCSS-Datei vornehme, automatisch in die entsprechende CSS-Datei kompiliert.
Wir haben bereits das Skript, das die Neukompilierung durchführt.
Alles, was ich tun muss, ist eine Uhr für diese bestimmte Datei einzurichten.
Nun, hier werde ich das NPM-Modul namens Onchange verwenden.
Es gibt ein anderes NPM-Modell namens Watch,
das Sie auch für den gleichen Zweck verwenden können.
In dieser Übung werde ich das Onchange-Modul verwenden,
dann beschäftigen wir uns mit Grant und Schluck in den späteren Lektionen,
wir werden das Watch-Modul für den gleichen Zweck verwenden.
Darüber hinaus werde ich auch ein anderes NPM-Modul namens parallele Shell installieren.
Dieses Parallelshell-Modul ermöglicht es mir,
mehrere NPM-Skripte in Parallelshells auszuführen, wie der Name schon sagt.
Auf diese Weise können mehrere NPM-Skripte gleichzeitig
ausgeführt werden und es mir ermöglichen, verschiedene Dateien zu überwachen
und auch andere Aufgaben auszuführen.
Also lassen Sie diese beiden NPM-Module installieren.
Wir werden sie lokal in diesem speziellen Projekt installieren.
Also, um das zu tun, gebe ich npm install ein.
Ich muss —save-dev und dann würde ich onchange
und parallelshell sagen und dann warten, bis diese beiden NPM-Module installiert werden.
Sobald die beiden Module installiert sind,
füge ich ein paar NPM-Skripte in meine package.json-Datei ein.
Und ich werde Ihnen den Grund erklären, weil wir diese Skripte dort einbeziehen.
Zurück zu meiner package.json-Datei,
gleich nach diesem SCSS,
werde ich ein anderes Skript namens „watch:scss“ einfügen.
Und wie der Name schon sagt,
wird dies die SCSS-Dateien überwachen.
Also hier werde ich das onchange NPM-Modul aufrufen, das ich gerade installiert habe,
und dann würde ich sagen, einzelner Code 'css/*.scss“.
Was bedeutet, dass alle SCSS-Dateien, die sich im CSS-Ordner befinden, überwacht werden.
Wenn sich einer von ihnen ändert,
werden Sie dieses bestimmte Skript auslösen und das Skript ist „—npm
run scss“, weil
dies das Skript ist, das die Neukompilierung meines SCSS-Codes in den entsprechenden CSS-Code durchführen wird.
Damit habe ich eine Uhr für mein SCSS eingerichtet.
Offensichtlich kann ich „nmp watch: scss“ eingeben.
Und dann wird es das Skript dort mit dem onchange-Modul auslösen,
also wird es darauf achten.
Wenn Sie diese Übung auf einem Windows-Computer durchführen,
sollten Sie diese anstelle des einfachen Anführungszeichens im Skript durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen ersetzen.
In ähnlicher Weise
ersetzt das andere einfache Anführungszeichen auch das durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen.
So wird das Skript auf einem Windows-Computer aussehen.
Jetzt werde ich die Parallelshell verwenden,
um mehrere dieser Skripte gleichzeitig aktiv zu sein.
Also würde ich „parallelshell“ sagen,
und dann
würde ich in Anführungszeichen sagen „npm run watch: scss“.
Die Parallelshell nimmt also mehrere dieser Parameter als Parameter,
jeder in einfachen Anführungszeichen dort.
Und der zweite ist 'npm run lite'.
So können Sie sehen, dass diese Parallelshell mir erlaubt, zwei Skripte gleichzeitig auszuführen,
eines, um meine SCSS-Datei zu überwachen,
das andere, um die Lite-Shell auszuführen.
Wenn Sie diese Übung auf einem Windows-Computer durchführen,
sollten Sie anstelle des einzelnen Codes im Skript diesen durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen ersetzen.
In ähnlicher Weise
ersetzt das andere einfache Anführungszeichen auch das durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen.
So wird das Skript auf einem Windows-Computer aussehen.
Nachdem Sie diese Änderungen vorgenommen haben,
lassen Sie mich die Änderungen speichern und dann gehe ich
hier hoch und starte dann ein Skript, das ich hier habe.
Ich werde das von „npm run lite“ zu „npm run watch:all“ ändern.
Und speichern Sie die Änderungen hier.
Damit sind die Skripte, die ich brauche, jetzt eingerichtet.
Also, jetzt kann ich voran gehen und
„npm start“ machen und das wird im Grunde diese beiden Skripte gleichzeitig starten,
eines hält eine Beobachtung auf meinen SCSS Dateien, die wiederum
die Kompilierung des SCSS zu CSS auslösen,
das andere, das meinen Lite-Server startet.
Jetzt habe ich unter der Tabellen-Registerkarte begonnen und dann in den Projektordner verschoben
und dann die Eingabeaufforderung hinzugefügt.
Ich werde „npm start“ eingeben.
Und dies sollte
sowohl meinen Lite-Server auslösen, der die Dateien aus meinem Verwirrungsordner speichert, als
auch das Onchange-Modul auslösen, um die SCSS-Dateien zu überwachen.
Um Ihnen zu helfen zu zeigen, wie diese Onchange eine Uhr auf meinen SCSS-Dateien hält,
was ich tun werde, ist, hier zu meiner styles.scss-Datei zu gehen,
und dann werde ich die Datei einfach wieder speichern.
Jetzt, wenn diese Datei gespeichert wird,
werde ich keine Änderungen daran vornehmen.
Ich werde nur das Speichern auf der Akte treffen.
Jedes Mal, wenn diese Datei geändert
wird, werden Sie sehen, dass Onchange sofort das auszuführende Knoten-SAS-Skript auslöst,
das die Datei von SCSS zu CSS kompiliert und die CSS-Datei hier erstellt
und dann die Datei speichert, die auch
meine Webseite auslöst, um sie in die -Browser.
Dies ist im Wesentlichen das, was wir erreicht haben, indem wir das Onchange-Modul verwenden, um
die Dateien zu beobachten, die dann geändert
werden, werden einige der NPM-Skripte automatisch auslösen.
Nun, das befreit uns von den Bedenken, diese Aufgaben manuell auslösen zu müssen.
Wenn Sie beispielsweise eine Reihe von Aufgaben haben, die Sie automatisch auslösen
möchten, treten bestimmte Änderungen auf.
Sie können solche Überwachungsaufgaben ganz einfach einrichten, um diese Änderungen zu überwachen.
Nun habe ich das mit einem einzigen Beispiel illustriert.
In meinem Beispiel hier
modifiziere ich nur die CSS-Dateien, die kompiliert werden müssen.
Aber später arbeiten wir mit JavaScript-Frameworks.
Sie würden sehen, dass Sie Kompilierungen auslösen möchten, wenn sich verschiedene Dateien geändert haben.
Und all diese können mit diesen Watch-Aufgaben einfach verwaltet werden.
Wird dies, wir schließen diese Übung ab.
Hier haben wir gelernt, wie Sie ein paar weitere NPM-Skripte einrichten
und automatisch einige der Skripte auslösen, indem Sie das onchange NPM-Modul verwenden.
Wir sahen auch die Verwendung des parallelen Shell-Moduls, um
mehrere NPM-Skripte gleichzeitig in unserem Terminal-Fenster auszuführen.
Dies ist ein guter Punkt für Sie, einen Git-Kommentar mit der Meldung „NPM-Skripte Part 1" zu machen.