1
00:00:03,510 --> 00:00:07,990
Nun, da wir ein Verständnis

2
00:00:07,990 --> 00:00:12,965
der verschiedenen Schritte beim Erstellen und Bereitstellen unserer Website haben,

3
00:00:12,965 --> 00:00:18,690
und auch eine kurze Einführung in NPM-Skripte in der vorherigen Vorlesung,

4
00:00:18,690 --> 00:00:22,830
lassen Sie uns einen tiefen Einblick in die Entwicklung von

5
00:00:22,830 --> 00:00:28,755
NPM-Skripten machen, um viele der Aufgaben zu automatisieren, über die wir zuvor gesprochen hatten.

6
00:00:28,755 --> 00:00:31,350
Wie Sie in der vorherigen Vorlesung gesehen haben,

7
00:00:31,350 --> 00:00:38,760
haben wir bereits ein paar NPM-Skripte, die wir in unsere package.json-Datei aufgenommen hatten,

8
00:00:38,760 --> 00:00:41,735
eines zum Starten des Lite-Servers und das zweite

9
00:00:41,735 --> 00:00:46,240
zum Konvertieren des SCSS-Codes in CSS.

10
00:00:46,240 --> 00:00:49,755
In dieser und der nächsten Übung

11
00:00:49,755 --> 00:00:53,055
werden wir NPM-Skripte näher untersuchen.

12
00:00:53,055 --> 00:01:00,810
Um zu beginnen, lassen Sie uns zuerst einige Housekeeping für die Datei index.html durchführen. Wenn wir

13
00:01:00,810 --> 00:01:03,095
zur Datei index.html gehen,

14
00:01:03,095 --> 00:01:09,325
sehen wir, dass wir diesen JavaScript-Code am Ende dieser Datei index.html haben.

15
00:01:09,325 --> 00:01:12,930
Ich würde lieber diesen JavaScript-Code in

16
00:01:12,930 --> 00:01:19,385
einer separaten Datei aufbewahren, die alle unsere Skripte enthält,

17
00:01:19,385 --> 00:01:23,015
und dann diese Datei in meine index.html einfügen.

18
00:01:23,015 --> 00:01:31,155
Um dies zu tun, lassen Sie uns hier einen anderen Ordner mit dem Namen js erstellen.

19
00:01:31,155 --> 00:01:34,210
Und in diesem js-Ordner

20
00:01:34,210 --> 00:01:41,520
werde ich eine neue Datei mit dem Namen scripts.js erstellen.

21
00:01:42,120 --> 00:01:49,060
Und zu index.html

22
00:01:49,060 --> 00:01:54,890
gehe ich einfach diesen JavaScript-Code von hier aus und

23
00:01:54,890 --> 00:02:01,120
füge ihn dann in die Datei scripts.js ein

24
00:02:01,120 --> 00:02:05,305
und speichere dann die Änderungen in der Datei scripts.js.

25
00:02:05,305 --> 00:02:10,915
Jetzt, da wir all unseren JavaScript-Code in eine eigene Datei verschoben haben,

26
00:02:10,915 --> 00:02:20,430
werde ich jetzt diese JavaScript-Datei in meine index.html einfügen.

27
00:02:20,430 --> 00:02:24,540
Ich würde sagen <script src =

28
00:02:24,540 --> 00:02:31,040
„js/scripts.js“ Also auf diese Weise

29
00:02:31,040 --> 00:02:35,005
ist mein ganzer JavaScript-Code jetzt wieder in meine index.html Datei enthalten.

30
00:02:35,005 --> 00:02:40,390
Auf diese Weise enthält meine Datei index.html den gesamten HTML-Code,

31
00:02:40,390 --> 00:02:46,345
und mein CSS- und JavaScript-Code ist in ihren eigenen separaten Dateien deaktiviert.

32
00:02:46,345 --> 00:02:52,590
Lassen Sie mich diese Skriptzeile von der Seite index.html kopieren

33
00:02:52,590 --> 00:02:56,330
und dann zur Seite aboutus.html gehen,

34
00:02:56,330 --> 00:02:59,365
scrollen Sie den ganzen Weg nach unten, wo ich

35
00:02:59,365 --> 00:03:02,540
andere Skripte eingefügt habe, und fügen Sie dies dann ein.

36
00:03:02,540 --> 00:03:07,405
In ähnlicher Weise lassen Sie mich zur Seite contactus.html gehen

37
00:03:07,405 --> 00:03:11,545
und dort wieder zum Ende der Datei scrollen.

38
00:03:11,545 --> 00:03:13,975
Lassen Sie mich diese Zeile einfügen.

39
00:03:13,975 --> 00:03:18,205
Speichern wir die Änderungen und fahren Sie dann mit dem nächsten Schritt fort.

40
00:03:18,205 --> 00:03:23,075
Der nächste Schritt, den ich gerne tun würde, ist, ein paar

41
00:03:23,075 --> 00:03:29,905
NPM-Module zu installieren, die ich verwenden werde, um einige Aufgaben zu automatisieren.

42
00:03:29,905 --> 00:03:34,310
Das erste NMP-Modul, das ich installieren werde, heißt onchange.

43
00:03:34,310 --> 00:03:42,335
Dieses onchange-Modul wird Dateien in meinem Projektordner überwachen,

44
00:03:42,335 --> 00:03:44,445
und dann, wenn sich diese Dateien ändern,

45
00:03:44,445 --> 00:03:48,865
löst es automatisch eine Aufgabe aus, die ausgeführt werden soll.

46
00:03:48,865 --> 00:03:50,660
Auf diese Weise, zum Beispiel,

47
00:03:50,660 --> 00:03:56,860
wenn ich ein Zitat unquote Watch

48
00:03:56,860 --> 00:03:59,305
für einige Dateien, zum Beispiel meine SCSS-Datei, einrichte,

49
00:03:59,305 --> 00:04:02,270
wird

50
00:04:02,270 --> 00:04:07,220
es jedes Mal, wenn ich Änderungen an meiner SCSS-Datei vornehme, automatisch in die entsprechende CSS-Datei kompiliert.

51
00:04:07,220 --> 00:04:11,565
Wir haben bereits das Skript, das die Neukompilierung durchführt.

52
00:04:11,565 --> 00:04:16,080
Alles, was ich tun muss, ist eine Uhr für diese bestimmte Datei einzurichten.

53
00:04:16,080 --> 00:04:20,675
Nun, hier werde ich das NPM-Modul namens Onchange verwenden.

54
00:04:20,675 --> 00:04:23,170
Es gibt ein anderes NPM-Modell namens Watch,

55
00:04:23,170 --> 00:04:25,945
das Sie auch für den gleichen Zweck verwenden können.

56
00:04:25,945 --> 00:04:29,240
In dieser Übung werde ich das Onchange-Modul verwenden,

57
00:04:29,240 --> 00:04:34,765
dann beschäftigen wir uns mit Grant und Schluck in den späteren Lektionen,

58
00:04:34,765 --> 00:04:37,580
wir werden das Watch-Modul für den gleichen Zweck verwenden.

59
00:04:37,580 --> 00:04:42,845
Darüber hinaus werde ich auch ein anderes NPM-Modul namens parallele Shell installieren.

60
00:04:42,845 --> 00:04:46,250
Dieses Parallelshell-Modul ermöglicht es mir,

61
00:04:46,250 --> 00:04:51,320
mehrere NPM-Skripte in Parallelshells auszuführen, wie der Name schon sagt.

62
00:04:51,320 --> 00:04:55,095
Auf diese Weise können mehrere NPM-Skripte gleichzeitig

63
00:04:55,095 --> 00:04:59,785
ausgeführt werden und es mir ermöglichen, verschiedene Dateien zu überwachen

64
00:04:59,785 --> 00:05:03,835
und auch andere Aufgaben auszuführen.

65
00:05:03,835 --> 00:05:06,340
Also lassen Sie diese beiden NPM-Module installieren.

66
00:05:06,340 --> 00:05:09,645
Wir werden sie lokal in diesem speziellen Projekt installieren.

67
00:05:09,645 --> 00:05:14,555
Also, um das zu tun, gebe ich npm install ein.

68
00:05:14,555 --> 00:05:20,420
Ich muss —save-dev und dann würde ich onchange

69
00:05:20,420 --> 00:05:27,540
und parallelshell sagen und dann warten, bis diese beiden NPM-Module installiert werden.

70
00:05:27,540 --> 00:05:29,755
Sobald die beiden Module installiert sind,

71
00:05:29,755 --> 00:05:35,745
füge ich ein paar NPM-Skripte in meine package.json-Datei ein.

72
00:05:35,745 --> 00:05:40,930
Und ich werde Ihnen den Grund erklären, weil wir diese Skripte dort einbeziehen.

73
00:05:40,930 --> 00:05:43,650
Zurück zu meiner package.json-Datei,

74
00:05:43,650 --> 00:05:46,270
gleich nach diesem SCSS,

75
00:05:46,270 --> 00:05:52,565
werde ich ein anderes Skript namens „watch:scss“ einfügen.

76
00:05:52,565 --> 00:05:55,125
Und wie der Name schon sagt,

77
00:05:55,125 --> 00:05:59,290
wird dies die SCSS-Dateien überwachen.

78
00:05:59,290 --> 00:06:07,435
Also hier werde ich das onchange NPM-Modul aufrufen, das ich gerade installiert habe,

79
00:06:07,435 --> 00:06:12,610
und dann würde ich sagen, einzelner Code 'css/*.scss“.

80
00:06:13,960 --> 00:06:20,465
Was bedeutet, dass alle SCSS-Dateien, die sich im CSS-Ordner befinden, überwacht werden.

81
00:06:20,465 --> 00:06:22,095
Wenn sich einer von ihnen ändert,

82
00:06:22,095 --> 00:06:29,535
werden Sie dieses bestimmte Skript auslösen und das Skript ist „—npm

83
00:06:29,535 --> 00:06:35,915
run scss“, weil

84
00:06:35,915 --> 00:06:42,380
dies das Skript ist, das die Neukompilierung meines SCSS-Codes in den entsprechenden CSS-Code durchführen wird.

85
00:06:42,380 --> 00:06:46,075
Damit habe ich eine Uhr für mein SCSS eingerichtet.

86
00:06:46,075 --> 00:06:49,160
Offensichtlich kann ich „nmp watch: scss“ eingeben.

87
00:06:49,160 --> 00:06:56,700
Und dann wird es das Skript dort mit dem onchange-Modul auslösen,

88
00:06:56,700 --> 00:06:58,690
also wird es darauf achten.

89
00:06:58,690 --> 00:07:06,345
Wenn Sie diese Übung auf einem Windows-Computer durchführen,

90
00:07:06,345 --> 00:07:10,760
sollten Sie diese anstelle des einfachen Anführungszeichens im Skript durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen ersetzen.

91
00:07:10,760 --> 00:07:13,660
In ähnlicher Weise

92
00:07:13,660 --> 00:07:16,490
ersetzt das andere einfache Anführungszeichen auch das durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen.

93
00:07:16,490 --> 00:07:22,770
So wird das Skript auf einem Windows-Computer aussehen.

94
00:07:22,770 --> 00:07:28,385
Jetzt werde ich die Parallelshell verwenden,

95
00:07:28,385 --> 00:07:35,765
um mehrere dieser Skripte gleichzeitig aktiv zu sein.

96
00:07:35,765 --> 00:07:39,670
Also würde ich „parallelshell“ sagen,

97
00:07:39,990 --> 00:07:42,660
und dann

98
00:07:42,660 --> 00:07:49,150
würde ich in Anführungszeichen sagen „npm run watch: scss“.

99
00:07:49,590 --> 00:07:55,605
Die Parallelshell nimmt also mehrere dieser Parameter als Parameter,

100
00:07:55,605 --> 00:07:58,380
jeder in einfachen Anführungszeichen dort.

101
00:07:58,380 --> 00:08:05,380
Und der zweite ist 'npm run lite'.

102
00:08:05,550 --> 00:08:11,630
So können Sie sehen, dass diese Parallelshell mir erlaubt, zwei Skripte gleichzeitig auszuführen,

103
00:08:11,630 --> 00:08:14,370
eines, um meine SCSS-Datei zu überwachen,

104
00:08:14,370 --> 00:08:17,745
das andere, um die Lite-Shell auszuführen.

105
00:08:17,745 --> 00:08:25,245
Wenn Sie diese Übung auf einem Windows-Computer durchführen,

106
00:08:25,245 --> 00:08:29,665
sollten Sie anstelle des einzelnen Codes im Skript diesen durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen ersetzen.

107
00:08:29,665 --> 00:08:32,560
In ähnlicher Weise

108
00:08:32,560 --> 00:08:35,390
ersetzt das andere einfache Anführungszeichen auch das durch den umgekehrten Schrägstrich und das doppelte Anführungszeichen.

109
00:08:35,390 --> 00:08:41,685
So wird das Skript auf einem Windows-Computer aussehen.

110
00:08:41,685 --> 00:08:44,335
Nachdem Sie diese Änderungen vorgenommen haben,

111
00:08:44,335 --> 00:08:48,160
lassen Sie mich die Änderungen speichern und dann gehe ich

112
00:08:48,160 --> 00:08:52,890
hier hoch und starte dann ein Skript, das ich hier habe.

113
00:08:52,890 --> 00:08:59,480
Ich werde das von „npm run lite“ zu „npm run watch:all“ ändern.

114
00:09:01,950 --> 00:09:05,145
Und speichern Sie die Änderungen hier.

115
00:09:05,145 --> 00:09:10,460
Damit sind die Skripte, die ich brauche, jetzt eingerichtet.

116
00:09:10,460 --> 00:09:15,745
Also, jetzt kann ich voran gehen und

117
00:09:15,745 --> 00:09:21,124
„npm start“ machen und das wird im Grunde diese beiden Skripte gleichzeitig starten,

118
00:09:21,124 --> 00:09:24,850
eines hält eine Beobachtung auf meinen SCSS Dateien, die wiederum

119
00:09:24,850 --> 00:09:28,825
die Kompilierung des SCSS zu CSS auslösen,

120
00:09:28,825 --> 00:09:32,150
das andere, das meinen Lite-Server startet.

121
00:09:32,150 --> 00:09:41,125
Jetzt habe ich unter der Tabellen-Registerkarte begonnen und dann in den Projektordner verschoben

122
00:09:41,125 --> 00:09:42,665
und dann die Eingabeaufforderung hinzugefügt.

123
00:09:42,665 --> 00:09:44,705
Ich werde „npm start“ eingeben.

124
00:09:44,705 --> 00:09:46,585
Und dies sollte

125
00:09:46,585 --> 00:09:54,435
sowohl meinen Lite-Server auslösen, der die Dateien aus meinem Verwirrungsordner speichert, als

126
00:09:54,435 --> 00:10:02,290
auch das Onchange-Modul auslösen, um die SCSS-Dateien zu überwachen.

127
00:10:02,290 --> 00:10:09,100
Um Ihnen zu helfen zu zeigen, wie diese Onchange eine Uhr auf meinen SCSS-Dateien hält,

128
00:10:09,100 --> 00:10:14,705
was ich tun werde, ist, hier zu meiner styles.scss-Datei zu gehen,

129
00:10:14,705 --> 00:10:18,675
und dann werde ich die Datei einfach wieder speichern.

130
00:10:18,675 --> 00:10:20,860
Jetzt, wenn diese Datei gespeichert wird,

131
00:10:20,860 --> 00:10:22,620
werde ich keine Änderungen daran vornehmen.

132
00:10:22,620 --> 00:10:25,755
Ich werde nur das Speichern auf der Akte treffen.

133
00:10:25,755 --> 00:10:30,620
Jedes Mal, wenn diese Datei geändert

134
00:10:32,750 --> 00:10:40,495
wird, werden Sie sehen, dass Onchange sofort das auszuführende Knoten-SAS-Skript auslöst,

135
00:10:40,495 --> 00:10:47,555
das die Datei von SCSS zu CSS kompiliert und die CSS-Datei hier erstellt

136
00:10:47,555 --> 00:10:50,335
und dann die Datei speichert, die auch

137
00:10:50,335 --> 00:10:55,450
meine Webseite auslöst, um sie in die -Browser.

138
00:10:55,450 --> 00:11:03,285
Dies ist im Wesentlichen das, was wir erreicht haben, indem wir das Onchange-Modul verwenden, um

139
00:11:03,285 --> 00:11:07,660
die Dateien zu beobachten, die dann geändert

140
00:11:07,660 --> 00:11:12,395
werden, werden einige der NPM-Skripte automatisch auslösen.

141
00:11:12,395 --> 00:11:20,790
Nun, das befreit uns von den Bedenken, diese Aufgaben manuell auslösen zu müssen.

142
00:11:20,790 --> 00:11:25,390
Wenn Sie beispielsweise eine Reihe von Aufgaben haben, die Sie automatisch auslösen

143
00:11:25,390 --> 00:11:27,395
möchten, treten bestimmte Änderungen auf.

144
00:11:27,395 --> 00:11:35,100
Sie können solche Überwachungsaufgaben ganz einfach einrichten, um diese Änderungen zu überwachen.

145
00:11:35,100 --> 00:11:37,785
Nun habe ich das mit einem einzigen Beispiel illustriert.

146
00:11:37,785 --> 00:11:39,985
In meinem Beispiel hier

147
00:11:39,985 --> 00:11:45,260
modifiziere ich nur die CSS-Dateien, die kompiliert werden müssen.

148
00:11:45,260 --> 00:11:50,125
Aber später arbeiten wir mit JavaScript-Frameworks.

149
00:11:50,125 --> 00:11:57,335
Sie würden sehen, dass Sie Kompilierungen auslösen möchten, wenn sich verschiedene Dateien geändert haben.

150
00:11:57,335 --> 00:12:02,964
Und all diese können mit diesen Watch-Aufgaben einfach verwaltet werden.

151
00:12:02,964 --> 00:12:07,560
Wird dies, wir schließen diese Übung ab.

152
00:12:07,560 --> 00:12:13,685
Hier haben wir gelernt, wie Sie ein paar weitere NPM-Skripte einrichten

153
00:12:13,685 --> 00:12:20,855
und automatisch einige der Skripte auslösen, indem Sie das onchange NPM-Modul verwenden.

154
00:12:20,855 --> 00:12:24,550
Wir sahen auch die Verwendung des parallelen Shell-Moduls, um

155
00:12:24,550 --> 00:12:32,050
mehrere NPM-Skripte gleichzeitig in unserem Terminal-Fenster auszuführen.

156
00:12:32,200 --> 00:12:42,890
Dies ist ein guter Punkt für Sie, einen Git-Kommentar mit der Meldung „NPM-Skripte Part 1" zu machen.