1
00:00:00,000 --> 00:00:05,693
[MUSIC]

2
00:00:05,693 --> 00:00:09,002
Jetzt, da Sie Node.js auf Ihrem Computer haben,

3
00:00:09,002 --> 00:00:13,870
möchten Sie offensichtlich sofort mit der Verwendung beginnen.

4
00:00:13,870 --> 00:00:17,038
Also, in dieser Übung werden wir anfangen, Node zu verwenden.

5
00:00:17,038 --> 00:00:20,921
Wir werden eine verpackte oder benachbarte Datei für

6
00:00:20,921 --> 00:00:25,500
unseren Git-Testordner einrichten, mit dem wir bisher gearbeitet haben.

7
00:00:25,500 --> 00:00:30,400
Dann werden wir ein Knotenmodul als Lite-Server genannt einrichten, die

8
00:00:30,400 --> 00:00:34,519
den Inhalt unseres get-Test-Ordners dienen wird.

9
00:00:34,519 --> 00:00:39,760
Und dann können wir diese index.html Datei und

10
00:00:39,760 --> 00:00:43,320
andere Dateien in einem Browser durchsuchen.

11
00:00:43,320 --> 00:00:48,960
Und wir werden auch sehen, wie der Lite-Server es uns ermöglicht,

12
00:00:50,390 --> 00:00:56,805
automatisch Updates in unserem Browserfenster zu sehen

13
00:00:56,805 --> 00:01:02,333
, während wir Änderungen an unserer index.html Datei oder anderen Dateien in unserem get test Ordner vornehmen.

14
00:01:02,333 --> 00:01:08,916
Der Lite-Server ist etwas, das wir in diesen und

15
00:01:08,916 --> 00:01:14,010
zukünftigen Kursen ausgiebig verwenden werden, um die Änderungen in Echtzeit

16
00:01:14,010 --> 00:01:19,125
in einem Browserfenster sehen zu können, während Sie die Dateien Ihres Projekts bearbeiten.

17
00:01:22,216 --> 00:01:25,650
Wie ich bereits erwähnt habe, möchten wir die package.json-Datei einrichten.

18
00:01:25,650 --> 00:01:29,300
Also, was genau ist diese package.json-Datei, die wir einrichten werden?

19
00:01:29,300 --> 00:01:32,738
Also hier habe ich einige Informationen von

20
00:01:32,738 --> 00:01:38,390
der npmjs.org-Site

21
00:01:38,390 --> 00:01:43,176
, die angibt, was genau die Rolle der package.json-Datei ist.

22
00:01:43,176 --> 00:01:47,781
Die package.json-Datei dient also als Dokumentation darüber, wovon alle

23
00:01:47,781 --> 00:01:51,670
anderen Pakete Ihr Projekt abhängig ist.

24
00:01:51,670 --> 00:01:56,030
Wenn Sie beispielsweise den Lite-Server Ihres Projekts einrichten,

25
00:01:56,030 --> 00:01:58,907
wird dieser in der Datei package.json aufgezeichnet.

26
00:01:58,907 --> 00:02:07,200
Und damit Sie dieses Paket später auch in Zukunft nutzen können.

27
00:02:07,200 --> 00:02:12,460
Außerdem können Sie angeben, von welcher spezifischen Version eines Pakets

28
00:02:12,460 --> 00:02:14,710
Ihr Projekt abhängig ist.

29
00:02:14,710 --> 00:02:19,784
Selbst wenn das Paket, das Sie von Änderungen in der Zukunft abhängen,

30
00:02:19,784 --> 00:02:24,762
können Sie darauf bestehen, dass Sie möchten, dass der Benutzer nur eine bestimmte

31
00:02:24,762 --> 00:02:30,650
Version des Pakets für die Verwendung in Ihrer Knotenanwendung installieren.

32
00:02:30,650 --> 00:02:34,151
Und es macht Ihre Builds reproduzierbar,

33
00:02:34,151 --> 00:02:38,177
was bedeutet, dass, wenn Sie Ihren Code mit anderen teilen,

34
00:02:38,177 --> 00:02:42,552
sie auch die Installation aller Knotenmodule durchführen können,

35
00:02:42,552 --> 00:02:47,128
wie wir später in dieser Übung sehen werden, auf ihrem eigenen Computer.

36
00:02:50,900 --> 00:02:57,610
Also offensichtlich wird Ihre nächste Frage sein, wie erstellen wir diese package.json-Datei?

37
00:02:57,610 --> 00:03:04,473
Wenn Sie ein neues Projekt starten, in dem Sie die

38
00:03:04,473 --> 00:03:10,425
Datei package.json initialisieren möchten, geben Sie einfach npm init an der Eingabeaufforderung im Projektordner ein.

39
00:03:10,425 --> 00:03:14,789
Und dann führt Sie das durch eine Reihe von Schritten, mit denen Sie

40
00:03:14,789 --> 00:03:17,150
Ihre package.json-Datei konfigurieren können.

41
00:03:17,150 --> 00:03:20,910
Also lassen Sie uns damit für unser Git-Testprojekt fortfahren.

42
00:03:22,290 --> 00:03:28,200
Also hier bin ich im Git-Test-Ordner in meinem Terminal-Fenster.

43
00:03:28,200 --> 00:03:32,615
Stellen Sie sicher, dass Sie auch ein Terminalfenster oder ein Befehlsfenster öffnen und

44
00:03:32,615 --> 00:03:34,791
dann zum Ordner git-test gehen. Geben

45
00:03:34,791 --> 00:03:38,831
Sie an der Eingabeaufforderung npm init ein.

46
00:03:38,831 --> 00:03:43,235
Und dann folgen Sie den Fragen, die gestellt werden.

47
00:03:43,235 --> 00:03:48,275
Für den Namen des Projekts belassen wir es einfach als Standard, git-Test.

48
00:03:48,275 --> 00:03:51,546
Für Version lassen wir es einfach als 1.0.0. Das

49
00:03:51,546 --> 00:03:53,135
können wir später bearbeiten.

50
00:03:53,135 --> 00:03:58,252
Zur Beschreibung

51
00:03:58,252 --> 00:04:04,647
ist dies ein Testverzeichnis,

52
00:04:04,647 --> 00:04:10,740
um Git und Node zu lernen.

53
00:04:10,740 --> 00:04:13,400
Es spielt keine Rolle, geben Sie dort eine Beschreibung ein.

54
00:04:13,400 --> 00:04:16,994
Und dann der Einstiegspunkt, würde ich nur sagen index.html.

55
00:04:18,260 --> 00:04:24,508
Normalerweise ist der Einstiegspunkt index.js, wenn es sich um ein Knotenpaket handelt.

56
00:04:24,508 --> 00:04:28,623
Jetzt ist dieser Ordner, den wir eingerichtet haben

57
00:04:28,623 --> 00:04:34,280
, ein index.html basierter Ordner, also habe ich gerade index.html eingegeben.

58
00:04:34,280 --> 00:04:35,972
Testbefehl, nichts.

59
00:04:35,972 --> 00:04:40,994
Git-Repository, wenn wir bereits das Git-Repository in der vorherigen

60
00:04:40,994 --> 00:04:45,297
Übung eingerichtet haben, wird es automatisch aufgefordert, dass für Sie, wenn nicht,

61
00:04:45,297 --> 00:04:50,318
dies wäre leer und Ihnen eine Option geben, die Git-Repository-URL einzugeben,

62
00:04:50,318 --> 00:04:53,920
falls Sie ein Online-Git-Repository verwenden.

63
00:04:53,920 --> 00:04:56,980
Einige Schlüsselwörter für Ihr Projekt, die ich leer lassen werde.

64
00:04:56,980 --> 00:04:58,760
Autor, geben Sie Ihren Namen ein.

65
00:04:58,760 --> 00:05:00,214
Lass uns narzisstisch sein.

66
00:05:04,497 --> 00:05:06,590
Und die Lizenz.

67
00:05:06,590 --> 00:05:15,050
Und dann zeigt es Ihnen die Konfiguration der package.json-Datei im JSON-Format an.

68
00:05:15,050 --> 00:05:18,860
Also, wenn Ihre Familie ein JSON hat, sieht es Ihnen sehr, sehr vertraut aus.

69
00:05:18,860 --> 00:05:22,210
Wenn das also alles gut aussieht, sagen wir einfach OK und

70
00:05:22,210 --> 00:05:27,790
dann führt das zur Erstellung der package.json-Datei.

71
00:05:27,790 --> 00:05:30,970
Wenn Sie also jetzt den Ordnerinhalt auflisten,

72
00:05:30,970 --> 00:05:34,680
würden Sie die Datei package.json im Ordnerinhalt sehen.

73
00:05:36,430 --> 00:05:42,210
Öffnen Sie diesen Git-Testordner in Ihrem bevorzugten Editor,

74
00:05:42,210 --> 00:05:47,270
und werfen Sie einen Blick auf den Inhalt der package.json-Datei in Ihrem Editor.

75
00:05:48,950 --> 00:05:54,470
Im nächsten Schritt werden wir lernen, wie wir ein Knotenmodul

76
00:05:54,470 --> 00:05:57,950
mit NPM, dem Node Package Manager, installieren können.

77
00:05:57,950 --> 00:06:02,750
Also, wir werden dieses Knotenmodul als Light-Server zu installieren.

78
00:06:02,750 --> 00:06:07,890
Der Light-Server stellt den Inhalt dieses Git-Test-Ordners in

79
00:06:07,890 --> 00:06:13,150
einem Server bereit, den er startet, damit Sie den Inhalt in einem Browser anzeigen können.

80
00:06:13,150 --> 00:06:15,753
Angesichts der Tatsache, dass wir eine index.html Datei haben,

81
00:06:15,753 --> 00:06:19,580
wenn wir diesen Ordner aufstellen, dann wird es eine Website sein.

82
00:06:19,580 --> 00:06:24,130
Und Sie können die index.html in einem Browser anzeigen.

83
00:06:24,130 --> 00:06:28,460
Also, lassen Sie uns den Light-Server einrichten und dann werden wir sehen, wie wir

84
00:06:28,460 --> 00:06:31,820
den Light-Server nutzen können, um den Inhalt dieses Ordners zu servieren.

85
00:06:31,820 --> 00:06:36,530
Dies ist sehr, sehr nützlich, denn wenn Sie an einem

86
00:06:36,530 --> 00:06:42,240
Web-Entwicklungsprojekt arbeiten, Sie möchten sehen, wo Live-Version Ihres Web-Entwicklungsprojekts.

87
00:06:42,240 --> 00:06:45,060
So

88
00:06:45,060 --> 00:06:49,400
können Sie, wenn Sie Änderungen an Ihrem Projekt vornehmen, die Änderungen sofort im Browser widergespiegelt werden.

89
00:06:49,400 --> 00:06:53,840
Dies ist also ein sehr gutes Knotenpaket, das für diesen Zweck sehr nützlich ist.

90
00:06:53,840 --> 00:06:55,980
Also lassen Sie uns diesen Light-Server einrichten. Fügen

91
00:06:55,980 --> 00:06:58,190
Sie dazu die Eingabeaufforderung hinzu.

92
00:06:58,190 --> 00:07:01,120
Geben Sie NPM-Installation ein.

93
00:07:01,120 --> 00:07:05,244
Beachten Sie also, wenn Sie möchten, dass NPM ein Knotenpaket installiert,

94
00:07:05,244 --> 00:07:10,686
so werden Sie es aufrufen und dann sagen Sie lite-server.

95
00:07:10,686 --> 00:07:16,685
Und dann wollen wir auch die Tatsache speichern, dass unser Projekt den Lite-Server verwendet.

96
00:07:16,685 --> 00:07:20,587
Also werden wir diese Informationen in der package.json-Datei speichern.

97
00:07:20,587 --> 00:07:27,492
Also, um das zu tun, werden Sie eingeben - save-dev.

98
00:07:27,492 --> 00:07:33,398
Nun gibt die Option save-dev an, dass dieser Lite-Server für die

99
00:07:33,398 --> 00:07:37,820
Entwicklungsabhängigkeit für unser Projekt verwendet wird.

100
00:07:37,820 --> 00:07:43,230
Wenn Sie ein Knotenmodul installieren, von dem Ihr Projekt direkt

101
00:07:43,230 --> 00:07:48,680
abhängig ist, dann würden Sie es installieren, indem Sie einfach die Option —save sagen.

102
00:07:49,680 --> 00:07:52,110
Also, lassen Sie uns voran und installieren es.

103
00:07:52,110 --> 00:07:56,990
Und Sie warten geduldig auf die Installation.

104
00:08:00,140 --> 00:08:06,890
Es wird alle ein paar Minuten dauern, bis die Installation abgeschlossen ist.

105
00:08:06,890 --> 00:08:11,830
Sobald das installiert ist, werden Sie sofort

106
00:08:11,830 --> 00:08:16,771
bemerken, wenn Sie sich den Inhalt Ihres Ordners ansehen,

107
00:08:16,771 --> 00:08:25,099
werden Sie sofort feststellen, dass dort ein Ordner namens node_modules erstellt wurde.

108
00:08:25,099 --> 00:08:30,251
Wenn Sie nun in das node_module gehen, sehen Sie

109
00:08:30,251 --> 00:08:35,120
dort eine ganze Reihe anderer Unterordner, die Knotenmodule enthalten,

110
00:08:35,120 --> 00:08:40,098
die für Ähnlichkeiten wie unser Knotenmodul usw. notwendig sind.

111
00:08:40,098 --> 00:08:44,873
Lassen Sie uns also einen kurzen Rundgang durch den Ordner „Knotenmodule“ machen, um zu sehen,

112
00:08:44,873 --> 00:08:47,515
was der Inhalt dieser sind.

113
00:08:50,764 --> 00:08:55,713
Wenn Sie in meinen Git-Test-Ordner gehen,

114
00:08:55,713 --> 00:09:00,130
würden Sie, wie gesagt, eine ganze Reihe von Unterordnern sehen.

115
00:09:00,130 --> 00:09:04,972
Normalerweise müssen Sie sich nicht in den Ordner „Knotenmodule“ wagen.

116
00:09:04,972 --> 00:09:09,222
Sie existieren nur dort, weil sie für die [UNHÖRBLICH] benötigt werden.

117
00:09:09,222 --> 00:09:16,470
Wenn Sie also durchblättern, sollten Sie hier einen Ordner mit dem Namen lite-server bemerken.

118
00:09:16,470 --> 00:09:18,970
Wenn Sie in den lite-server Ordner gehen,

119
00:09:18,970 --> 00:09:23,860
beachten Sie insbesondere das Vorhandensein der Datei index.js und

120
00:09:23,860 --> 00:09:27,690
dann Ihre package.json Datei und einige andere Dinge.

121
00:09:27,690 --> 00:09:33,538
Dieser Inhalt des Ordners umfasst also das Lite-Server-Knotenmodul.

122
00:09:33,538 --> 00:09:38,010
Dieses Lite-Server-Knotenmodul ist jedoch von anderen Knotenmodulen abhängig

123
00:09:38,010 --> 00:09:41,120
, um ihm zusätzliche Funktionen zur Verfügung zu stellen.

124
00:09:41,120 --> 00:09:45,190
Das ist also der Grund, wenn Sie das Light-Server-Knotenmodul

125
00:09:45,190 --> 00:09:51,590
installieren, wird es wiederum viele andere Knotenmodule installieren, von denen der Light-Server selbst abhängig ist.

126
00:09:51,590 --> 00:09:56,239
Das ist der Grund, warum Sie diese Explosion

127
00:09:56,239 --> 00:10:00,800
dieser Ordner in den Knotenmodulen sehen.

128
00:10:00,800 --> 00:10:04,670
Seien Sie nicht allzu besorgt darüber, die Summe der Ordner wird nicht

129
00:10:04,670 --> 00:10:08,620
mehr als ein paar Dutzend Megabyte sein.

130
00:10:08,620 --> 00:10:12,310
Also wird es Ihr Verzeichnis nicht mit Müll füllen.

131
00:10:13,400 --> 00:10:17,680
Dies ist alles unerlässlich, damit der Knoten Ihnen helfen kann.

132
00:10:19,420 --> 00:10:24,280
Falls Sie neugierig auf den Lite-Server sind und wie er funktioniert und so weiter,

133
00:10:24,280 --> 00:10:29,780
können Sie immer zu dieser GitHub-Site gehen, auf der der Lite-Server gehostet wird.

134
00:10:29,780 --> 00:10:35,260
Und dann suchen Sie die Dokumentation für Lite-Server.

135
00:10:35,260 --> 00:10:40,040
Ich werde Ihnen vorstellen, was Sie über lite-server wissen müssen, während wir

136
00:10:40,040 --> 00:10:42,830
diesen Kurs und die restlichen Kurse durchlaufen.

137
00:10:42,830 --> 00:10:47,223
Sie müssen sich also nicht zu sehr darum kümmern, aber nur für den Fall, dass Sie neugierig sind,

138
00:10:47,223 --> 00:10:51,306
können Sie immer auf die Website gehen, um mehr Details über lite-server zu erfahren.

139
00:10:51,306 --> 00:10:56,651
Der Link befindet sich in Ihren Übungsanweisungen und

140
00:10:56,651 --> 00:11:01,307
zusätzliche Ressourcen sind Teil dieser Lektion.

141
00:11:03,640 --> 00:11:08,556
Sobald Sie das abgeschlossen haben, dann gehen Sie über zum.

142
00:11:10,139 --> 00:11:15,050
Editor, in dem Sie den Ordner Git-Test Ordner geöffnet haben und

143
00:11:15,050 --> 00:11:18,925
dann den Inhalt der Datei package.json anzeigen.

144
00:11:18,925 --> 00:11:23,876
Sie würden also sehen, dass die package.json-Datei genau die Informationen enthält, die

145
00:11:23,876 --> 00:11:25,722
Sie mit Ihrem NPM konfiguriert haben.

146
00:11:25,722 --> 00:11:30,937
Sie würden also die Namensversion und den Repository-Autor sehen und

147
00:11:30,937 --> 00:11:35,096
insbesondere diese Informationen hier beachten.

148
00:11:35,096 --> 00:11:41,211
Es sagt DevDependencies, also gibt es den lite-sever an

149
00:11:41,211 --> 00:11:44,931
und bemerkt auch, dass er hat 2.2.2 sagt.

150
00:11:44,931 --> 00:11:50,643
Das bedeutet, dass dieses bestimmte Projekt von

151
00:11:50,643 --> 00:11:58,056
Lite-Server abhängt, der mindestens Version 2.2.2 oder höher ist.

152
00:11:58,056 --> 00:12:00,472
Das ist also sehr nützlich für uns.

153
00:12:00,472 --> 00:12:04,110
Warum brauchen wir diese Informationen hier?

154
00:12:04,110 --> 00:12:07,331
Später, wenn Sie zu den anderen Übungen gehen,

155
00:12:07,331 --> 00:12:11,874
werden Sie feststellen, dass Sie, wenn Sie dies in einem Online-Repository speichern,

156
00:12:11,874 --> 00:12:16,765
nicht alles in Ihrem Knotenmodulordner speichern möchten.

157
00:12:16,765 --> 00:12:23,950
Sie speichern nur Informationen über alle Dateien, die wir erstellt haben.

158
00:12:23,950 --> 00:12:28,849
Der Ordner „Knotenmodule“ kann immer neu erstellt werden,

159
00:12:28,849 --> 00:12:33,056
indem Sie NPM install an unserer Eingabeaufforderung eingeben.

160
00:12:33,056 --> 00:12:35,905
Und dann basierend auf den Entwicklungsabhängigkeiten und

161
00:12:35,905 --> 00:12:40,602
Abhängigkeiten, die in der Packager-Datei aufgeführt sind,

162
00:12:40,602 --> 00:12:45,306
werden alle Knotenmodule, von denen Ihr Projekt abhängt, automatisch installiert.

163
00:12:45,306 --> 00:12:50,194
Wir werden das später sehen, wie Sie

164
00:12:50,194 --> 00:12:54,389
NPM installieren in diesem Kurs verwenden.

165
00:12:56,473 --> 00:13:02,098
Jetzt, da wir bei package.json Datei sind, machen wir ein paar Änderungen

166
00:13:02,098 --> 00:13:08,431
, so dass wir in der Lage sein werden, den lite-server zu nutzen, um diesen Inhalt zu servieren.

167
00:13:08,431 --> 00:13:14,520
Also genau hier, in dieser Option namens Skripte,

168
00:13:14,520 --> 00:13:18,181
lassen Sie uns hier ein weiteres hinzufügen.

169
00:13:18,181 --> 00:13:20,806
Also werden wir sagen „Start“.

170
00:13:20,806 --> 00:13:26,673
So start ist ein Befehl, den NPM unterstützt, mit

171
00:13:26,673 --> 00:13:32,682
dem Sie eine Reihe von Dingen angeben können, die gestartet werden.

172
00:13:32,682 --> 00:13:35,264
Später werden wir sehen, wie wir das nutzen.

173
00:13:35,264 --> 00:13:39,512
Also hier werde ich sagen „npm run lite“.

174
00:13:43,557 --> 00:13:48,462
Und nach diesem Test werde ich

175
00:13:48,462 --> 00:13:53,059
einen weiteren Eintrag namens „lite“ hinzufügen

176
00:13:53,059 --> 00:13:59,971
, den ich als „lite-server“ konfigurieren werde, okay?

177
00:13:59,971 --> 00:14:04,889
Mit diesen Änderungen speichern wir die Datei package.json.

178
00:14:04,889 --> 00:14:11,170
Und dann, jetzt ist unser Projekt konfiguriert, so dass jetzt, wenn Sie den Lite-Server starten,

179
00:14:11,170 --> 00:14:16,682
der Inhalt Ihres Ordners jetzt in Ihrem bevorzugten Browser bereitgestellt wird. Gehen

180
00:14:21,306 --> 00:14:24,890
Sie zurück zu unserer Eingabeaufforderung und fügen Sie die Eingabeaufforderung hinzu.

181
00:14:24,890 --> 00:14:29,531
Wenn ich tippe, npm start, jetzt sehen Sie, warum ich diesen

182
00:14:29,531 --> 00:14:34,181
Einstiegskartenstart in meine package.json-Datei lege.

183
00:14:34,181 --> 00:14:41,222
Wenn ich npm start sage, was auch immer der Start wie in der Package.json-Datei konfiguriert ist,

184
00:14:41,222 --> 00:14:47,472
geben wir an, dass npm run light, und die lite wurde als lite server angegeben.

185
00:14:47,472 --> 00:14:50,420
Im Wesentlichen sagen wir, Starten Sie den Lite-Server.

186
00:14:50,420 --> 00:14:54,821
Also, sobald ich npm start tippe, startet es den lite-server, und

187
00:14:54,821 --> 00:14:57,931
es wird den Inhalt dieses Ordners bereitstellen.

188
00:14:57,931 --> 00:15:00,889
Wie greifen Sie nun auf den Inhalt dieses Ordners zu?

189
00:15:00,889 --> 00:15:04,812
Wenn Sie lokal darauf

190
00:15:04,812 --> 00:15:12,056
zugreifen möchten, greifen Sie darauf zu, indem Sie die Sie als localhost sind: 3000 angeben.

191
00:15:12,056 --> 00:15:15,389
Dies sind die Standardeinstellungen für den Lite-Server.

192
00:15:15,389 --> 00:15:19,831
Darüber hinaus sollte dies automatisch

193
00:15:19,831 --> 00:15:24,382
das Browserfenster Ihres Standardbrowsers öffnen und

194
00:15:24,382 --> 00:15:29,722
den Inhalt von Index oder HTML im Browserfenster anzeigen.

195
00:15:29,722 --> 00:15:34,480
Hier können Sie sehen, dass ich meinen Editor und

196
00:15:34,480 --> 00:15:39,849
mein Browserfenster, das auf localhost gerichtet ist,

197
00:15:39,849 --> 00:15:44,730
gleichzeitig nebeneinander geöffnet habe, so dass wir sehen können,

198
00:15:44,730 --> 00:15:49,733
wie das Browserfenster sofort

199
00:15:49,733 --> 00:15:54,760
alle Änderungen widerspiegelt, die wir an unserem Git-Testordner vornehmen.

200
00:15:54,760 --> 00:15:57,780
Also lassen Sie mich zu index.html gehen.

201
00:15:57,780 --> 00:16:03,060
Und dann, um des Weltraums willen, werde ich das umdrehen.

202
00:16:03,060 --> 00:16:07,680
Und dann, so hier, können Sie sehen, dass dies der Inhalt davon ist.

203
00:16:07,680 --> 00:16:11,554
Und dann, jetzt, lassen Sie mich noch einen weiteren Absatz hinzufügen.

204
00:16:21,328 --> 00:16:27,338
Und speichern Sie die Änderungen, und dann werden Sie sofort bemerken, dass

205
00:16:27,338 --> 00:16:34,980
die Änderung, die ich an meiner Datei index.html vorgenommen habe, in meinem Browser widergespiegelt wird.

206
00:16:34,980 --> 00:16:40,560
Dies bietet eine sehr schöne Möglichkeit, die

207
00:16:40,560 --> 00:16:45,890
Änderungen, die Sie an Ihrem Code vornehmen, in Echtzeit zu beobachten, die in Ihrem Browser widergespiegelt werden.

208
00:16:45,890 --> 00:16:49,920
Wenn Sie also an einem Projekt arbeiten, ist es sehr angemessen,

209
00:16:49,920 --> 00:16:52,175
dass Sie die Änderungen sofort sehen können.

210
00:16:52,175 --> 00:16:54,895
Wenn Sie also eine Änderung vornehmen und dann die Datei speichern,

211
00:16:54,895 --> 00:16:59,185
wird der geänderte Code sofort in Ihren Browser geladen.

212
00:16:59,185 --> 00:17:04,420
So können Sie sofort sehen, wie sich die Änderung in Ihrem Browserfenster widerspiegelt.

213
00:17:04,420 --> 00:17:12,400
Dies ist ein sehr nützliches Werkzeug, während Sie die Entwicklung Ihres Projekts durchführen.

214
00:17:12,400 --> 00:17:18,026
Das ist der Grund, warum ich Ihnen diesen Lite-Server vorgestellt und

215
00:17:18,026 --> 00:17:24,791
eingerichtet habe, damit wir ihn nutzen können, während wir die Website in diesem Kurs entwickeln.

216
00:17:27,033 --> 00:17:32,092
Wenn Sie sich erinnern, hatten wir unseren Git-Test-Ordner bereits als Git-Repository eingerichtet.

217
00:17:32,092 --> 00:17:37,435
So überprüfen Sie erneut, Wir

218
00:17:37,435 --> 00:17:40,805
werden sehen, dass wir bereits drei Commits in unserem Git-Repository haben.

219
00:17:40,805 --> 00:17:45,885
Und dieses Git-Repository ist bereits in unser Online-Git-Repository gespiegelt

220
00:17:45,885 --> 00:17:51,015
, das wir in der vorherigen Übung entweder bei Bitbucket oder GitHub eingerichtet haben.

221
00:17:51,015 --> 00:17:55,665
Mein Git-Test-Ordner wird

222
00:17:55,665 --> 00:18:02,380
in dieser speziellen Übung mit meinem Bitbucket-Repository synchronisiert.

223
00:18:02,380 --> 00:18:08,220
Was ich jetzt tun werde, ist Ihnen zu zeigen, wie Sie einige

224
00:18:08,220 --> 00:18:13,830
Ordner aus Ihrem Projektordner ausschließen können,

225
00:18:13,830 --> 00:18:19,760
und stellen Sie dann sicher, dass sie nicht mit Ihrem Online-Repository synchronisiert sind.

226
00:18:19,760 --> 00:18:24,480
Wie gesagt, kann der Ordner node_modules immer neu erstellt werden,

227
00:18:24,480 --> 00:18:27,840
indem Sie an der Eingabeaufforderung npm install eingeben.

228
00:18:27,840 --> 00:18:31,490
Wenn Sie also

229
00:18:31,490 --> 00:18:36,690
den Inhalt Ihres Ordners in ein Online-Git-Repository hochladen

230
00:18:36,690 --> 00:18:42,320
oder wenn Sie einen Commit des Ordners in Ihr Git-Repository durchführen,

231
00:18:42,320 --> 00:18:47,230
möchten Sie nicht, dass der Ordner node_modules oder alle Unterordner darunter

232
00:18:47,230 --> 00:18:52,280
in das Commit aufgenommen werden.

233
00:18:52,280 --> 00:18:55,950
Wie schließen wir also einige Ordner oder

234
00:18:55,950 --> 00:19:02,380
Dateien aus unserem Ordner aus, die in unser Git-Repository eingecheckt werden?

235
00:19:02,380 --> 00:19:08,680
Um dies zu tun, werden wir eine Datei namens .gitignore einrichten.

236
00:19:08,680 --> 00:19:11,860
Das ist also der Name der Datei, .gitignore.

237
00:19:11,860 --> 00:19:17,220
Also, um diese .gitignore Datei zu erstellen, gehen wir zu unserem Editor.

238
00:19:18,550 --> 00:19:23,956
Also im Editor, im Git-Test-Ordner,

239
00:19:23,956 --> 00:19:31,300
werde ich eine neue Datei erstellen und ich werde sie benennen. gitignore.

240
00:19:31,300 --> 00:19:34,650
Beachten Sie, dass der Name mit einem Punkt beginnt und

241
00:19:34,650 --> 00:19:39,840
dann, der Rest des Namens ist g-i-t-i-g-n-o-r-e.

242
00:19:39,840 --> 00:19:44,492
Das ist also sehr wichtig, dass Sie die Datei mit genau diesem Namen,

243
00:19:44,492 --> 00:19:45,329
.gitignore, einrichten.

244
00:19:46,500 --> 00:19:51,070
Also lassen Sie uns diese Datei namens .gitignore erstellen, und

245
00:19:51,070 --> 00:19:57,360
die erste Zeile dieser Datei werden wir als node_modules eingeben.

246
00:19:57,360 --> 00:20:01,450
Das bedeutet also, dass der Ordner node_modules

247
00:20:01,450 --> 00:20:04,410
von unserem git Commit ausgeschlossen wird.

248
00:20:05,850 --> 00:20:08,896
Sobald ich also diese .gitignore Datei erstellt und

249
00:20:08,896 --> 00:20:14,900
dann node_modules in die Datei .gitignore hinzugefügt habe, speichern wir die Änderungen.

250
00:20:14,900 --> 00:20:19,735
Und dann werden wir jetzt einen Commit des aktuellen Status unseres Projekts

251
00:20:19,735 --> 00:20:24,700
in unser Git-Repository machen.

252
00:20:24,700 --> 00:20:27,220
Ich hoffe, du erinnerst dich an deine Git-Befehle.

253
00:20:27,220 --> 00:20:31,310
Lassen Sie uns einen Git-Status machen, und wenn Sie das tun,

254
00:20:31,310 --> 00:20:36,194
werden Sie sofort bemerken, dass Sie die

255
00:20:36,194 --> 00:20:42,070
Datei index.html als geändert markiert haben, und dann die beiden neuen Dateien, .gitignore und package.json.

256
00:20:42,070 --> 00:20:49,500
Also, wir machen ein git add. und dann einen Git-Status machen.

257
00:20:49,500 --> 00:20:54,120
Und dann sehen Sie, dass alle diese neuen Dateien in Ihr Commit eingecheckt wurden.

258
00:20:54,120 --> 00:21:01,090
Lassen Sie uns einen Git-Commit machen. git commit -m „viertes Commit“.

259
00:21:01,090 --> 00:21:05,440
Und die Dateien sind festgeschrieben.

260
00:21:05,440 --> 00:21:09,303
Lassen Sie uns das neue Commit in unser Online-Repository schieben.

261
00:21:09,303 --> 00:21:13,905
Also, um diesen git zu tun, schieben Sie -u

262
00:21:13,905 --> 00:21:18,510
origin master und warten Sie

263
00:21:18,510 --> 00:21:23,750
, bis es auf unseren Server geschoben wird.

264
00:21:23,750 --> 00:21:27,403
Wenn Sie nun zu Ihrem Online-Git-Repository gehen,

265
00:21:27,403 --> 00:21:30,871
werden Sie sehen, dass die package.json-Datei und

266
00:21:30,871 --> 00:21:36,132
.gitignore in Ihr Git-Repository eingecheckt worden wären. Wenn Sie

267
00:21:36,132 --> 00:21:41,195
aus dem Git-Test zu meinem Bitbucket-Repository gehen, werden Sie sehen, dass,

268
00:21:41,195 --> 00:21:47,320
wenn ich die Quelle betrachte, Sie sehen werden, dass die package.json-Datei hinzugefügt wurde.

269
00:21:47,320 --> 00:21:54,600
Die Datei .gitignore wurde hinzugefügt und die neue Datei index.html wurde eingecheckt.

270
00:21:54,600 --> 00:21:57,570
Damit ist diese Übung abgeschlossen.

271
00:21:57,570 --> 00:21:58,770
In dieser Übung

272
00:21:58,770 --> 00:22:03,586
haben wir gelernt, wie man eine package.json-Datei mit npm init einrichtet.

273
00:22:03,586 --> 00:22:07,310
Wir haben gelernt, wie man ein npm-Modul installiert.

274
00:22:07,310 --> 00:22:11,900
Und wir haben gelernt, wie man das lite-server npm Modul verwendet, um

275
00:22:11,900 --> 00:22:18,100
den Inhalt unseres Projektordners so zu bedienen, dass er in einem Browser angezeigt werden kann.

276
00:22:18,100 --> 00:22:21,920
Dies ist also eine nette Möglichkeit, Ihre Webinhalte, Ihre

277
00:22:21,920 --> 00:22:25,360
Webanwendung oder Ihre Website bereitzustellen, so

278
00:22:25,360 --> 00:22:31,680
dass Sie Änderungen in Echtzeit sehen können, die in Ihrem Browserfenster widergespiegelt werden.

279
00:22:31,680 --> 00:22:37,280
Und dann haben wir auch gesehen, wie wir den .gitignore so einrichten können, dass einige

280
00:22:37,280 --> 00:22:42,790
Ordner davon ausgeschlossen werden können, in unser Git-Repository eingecheckt zu werden.

281
00:22:42,790 --> 00:22:45,450
Damit ist diese Übung abgeschlossen.

282
00:22:45,450 --> 00:22:50,450
Damit bin ich sicher, dass Sie einen guten Griff bei

283
00:22:50,450 --> 00:22:56,280
der Verwendung von Git und dann auch von Knoten- und Knotenmodulen bekommen haben.

284
00:22:56,280 --> 00:23:02,020
Keine Sorge, wir werden Knoten ausgiebig verwenden, auf verschiedene Arten,

285
00:23:02,020 --> 00:23:05,610
während Sie durch die Kurse dieser Spezialisierung gehen.

286
00:23:05,610 --> 00:23:06,497
Das ist nur ein Anfang.

287
00:23:06,497 --> 00:23:13,270
( MUSIK)