1
00:00:00,000 --> 00:00:04,535
[MUSIK]

2
00:00:04,535 --> 00:00:10,479
Wir werden nun unsere Reise mit NPM-Skripten in dieser nächsten Übung fortsetzen.

3
00:00:10,479 --> 00:00:15,182
Hier lernen wir, wie man

4
00:00:15,182 --> 00:00:20,335
einen Distributionsordner erstellen kann, der alle Dateien für

5
00:00:20,335 --> 00:00:27,970
unser Projekt enthält, die wir einfach auf einem Webserver bereitstellen können, der unsere Website hostet.

6
00:00:27,970 --> 00:00:33,050
Angesichts der HTML-, CSS- und JavaScript-Dateien

7
00:00:33,050 --> 00:00:39,010
, die wir bereits in unserem Projektordner vorbereitet haben, werden wir

8
00:00:39,010 --> 00:00:44,895
sie verarbeiten, indem wir die verschiedenen Aufgaben, über die wir gesprochen haben.

9
00:00:44,895 --> 00:00:49,246
Das macht eine CSS-Änderung,

10
00:00:49,246 --> 00:00:54,740
Verkettung und JavaScript-Hässlichkeit, Verkleinerung

11
00:00:54,740 --> 00:00:59,230
und HTML-Minifizierung und

12
00:00:59,230 --> 00:01:04,895
generiert dann einen Verteilungsordner mit allen Dateien.

13
00:01:04,895 --> 00:01:09,520
Aber im Wesentlichen bildet die Menge von Dateien, die

14
00:01:09,520 --> 00:01:13,200
auf unserem Webserver bereitgestellt werden können, der unsere Website hostet.

15
00:01:15,165 --> 00:01:21,005
Um Ihnen zu helfen, zu verstehen, was wir in dieser speziellen Übung tun werden,

16
00:01:22,085 --> 00:01:29,102
wie wir von unserer Seite index.html bemerken, haben wir eine Reihe von

17
00:01:29,102 --> 00:01:34,352
CSS-Dateien, die Sie hier mit diesem Link-Tag enthalten haben.

18
00:01:34,352 --> 00:01:38,742
In ähnlicher Weise haben Sie eine Reihe von Skripten,

19
00:01:38,742 --> 00:01:42,847
die Sie am Ende dieser Seite mit dem Skript-Tag eingefügt haben.

20
00:01:42,847 --> 00:01:46,152
Wir haben eine Reihe von JavaScript-Code enthalten.

21
00:01:46,152 --> 00:01:51,150
Nun, was wir in dieser Übung tun werden, ist, alle diese

22
00:01:51,150 --> 00:01:56,760
Dateien in einer einzigen JavaScript-Datei zu kombinieren, die

23
00:01:56,760 --> 00:02:03,710
von unserem Webserver an einen Browser geliefert wird, der versucht, unsere Website anzuzeigen.

24
00:02:03,710 --> 00:02:08,480
Auf diese Weise minimieren wir die Anzahl der Downloads, die der Browser durchführen muss,

25
00:02:08,480 --> 00:02:10,930
um unsere Website zu rendern.

26
00:02:10,930 --> 00:02:16,960
In ähnlicher Weise werden wir den gesamten CSS-Code in einer einzigen CSS-Datei kombinieren,

27
00:02:16,960 --> 00:02:18,325
so dass er geliefert werden kann.

28
00:02:18,325 --> 00:02:24,353
Die kombinierte CSS-Datei enthält also den gesamten Code für

29
00:02:24,353 --> 00:02:31,751
Bootstrap plus Bootstrap social und auch die Font Awesome und

30
00:02:31,751 --> 00:02:36,697
auch den CSS-Code, den wir selbst geschrieben haben.

31
00:02:36,697 --> 00:02:40,351
In ähnlicher Weise wird es eine einzelne JavaScript-Datei

32
00:02:40,351 --> 00:02:45,297
geben, die den jQuery-Tether, Bootstrap und den JavaScript-Code enthält, den wir

33
00:02:45,297 --> 00:02:49,790
selbst geschrieben haben, alle in einer einzigen Datei zusammengefasst.

34
00:02:49,790 --> 00:02:53,610
Nun, so können Sie die Bereitstellung Ihrer Webseiten durchführen.

35
00:02:53,610 --> 00:02:58,190
Und anstatt mehrere solcher Dateien dort zu

36
00:02:59,560 --> 00:03:03,750
haben, besteht eine Möglichkeit, diese in einer einzigen Datei zu kombinieren, so dass

37
00:03:03,750 --> 00:03:08,840
Sie mit einem einzigen Download den gesamten JavaScript-Code erhalten, der für das Rendern Ihrer Webseite notwendig ist.

38
00:03:08,840 --> 00:03:11,810
Ein einziger Download erhalten Sie den gesamten CSS-Code, der für das

39
00:03:11,810 --> 00:03:13,200
Rendern Ihrer Webseite notwendig ist.

40
00:03:13,200 --> 00:03:16,590
Und dann wird natürlich die HTML-Datei selbst heruntergeladen.

41
00:03:18,530 --> 00:03:23,390
Um diese Aufgaben zu erledigen, müssen wir

42
00:03:23,390 --> 00:03:29,070
einen bestimmten Satz von NPM-Modulen verwenden, um dies zu erreichen.

43
00:03:29,070 --> 00:03:33,810
Nun, was wir am Ende tun werden, ist, einen Ordner

44
00:03:33,810 --> 00:03:38,760
in unserer Projektdatei zu erstellen, und dann nennen wir diesen Ordner als dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Ich benenne das nur zufällig als Dist Ordner.

46
00:03:42,580 --> 00:03:47,100
In meinem Fall ist das, was ich mit dem dist-Ordner meine, ein Distributionsordner.

47
00:03:47,100 --> 00:03:51,270
Am Ende der Reihe von Schritten, die wir tun werden, enthält dieser Ordner alle

48
00:03:51,270 --> 00:03:59,510
Dateien, die einfach auf den Webserver kopiert werden können, der unsere Website hostet.

49
00:03:59,510 --> 00:04:03,930
Um zu beginnen, was wir tun werden, ist,

50
00:04:05,140 --> 00:04:10,960
hier eine Reihe von Skripten einzurichten, die uns helfen, diesen Prozess zu automatisieren.

51
00:04:10,960 --> 00:04:13,930
Also zuerst, wir könnten

52
00:04:13,930 --> 00:04:18,850
den Distributionsordner einmal vorbereiten, dann vielleicht können wir einige Änderungen

53
00:04:18,850 --> 00:04:23,310
an unseren Quelldateien vornehmen, dann müssen wir möglicherweise unseren Distributionsordner neu kompilieren.

54
00:04:24,420 --> 00:04:29,370
Im ersten Schritt würden wir das Skript einrichten, um diesen Distributionsordner zu bereinigen, was

55
00:04:29,370 --> 00:04:33,050
im Wesentlichen bedeutet, löschen Sie den Distributionsordner.

56
00:04:33,050 --> 00:04:37,950
Um das zu tun, werde ich die Hilfe eines NPM-Moduls namens rimfraf nehmen.

57
00:04:37,950 --> 00:04:47,760
Also werde ich npm —save-dev rimfraf installieren.

58
00:04:47,760 --> 00:04:51,920
Dieses Modul hilft uns, einen Ordner vollständig zu säubern.

59
00:04:51,920 --> 00:04:56,370
Sobald ich das installiert habe, werde ich ein Skript

60
00:04:56,370 --> 00:05:01,550
in meiner package.json-Datei einrichten, um alle Dateien zu bereinigen.

61
00:05:01,550 --> 00:05:05,360
Wenn ich zur package.json-Datei gehe, werde ich hinzufügen, also

62
00:05:05,360 --> 00:05:11,380
denken Sie immer daran, dass Koma in diesen Skripten sehr, sehr wichtig ist.

63
00:05:11,380 --> 00:05:15,200
Manchmal werden Sie auf Probleme stoßen, nur weil Sie das Komma vergessen haben.

64
00:05:15,200 --> 00:05:18,230
Stellen Sie also sicher, dass Sie diese Kommas bei Bedarf setzen.

65
00:05:18,230 --> 00:05:21,800
Die nächste Beschreibung, die ich hinzufügen werde, ist, sauber,

66
00:05:23,410 --> 00:05:29,000
offensichtlich, wie der Name schon sagt, dies wird meinen Ordner säubern.

67
00:05:29,000 --> 00:05:32,510
Also werde ich sagen, rimraf dist.

68
00:05:32,510 --> 00:05:35,610
Dies bedeutet, dass dies, wenn er ausgeführt

69
00:05:35,610 --> 00:05:39,860
wird, den Distributionsordner bereinigt.

70
00:05:39,860 --> 00:05:42,215
Also werde ich das in hinzufügen, und

71
00:05:42,215 --> 00:05:46,780
dann werde ich dieses Komma dort setzen, weil ich weitere Skripte darunter hinzufügen werde.

72
00:05:46,780 --> 00:05:51,814
Lassen Sie mich also die Änderungen speichern, der nächste Schritt, den ich tun werde, ist

73
00:05:51,814 --> 00:05:57,048
ein npm-Modul namens Kopierdateien zu installieren, die verwendet werden, um

74
00:05:57,048 --> 00:06:03,206
einige Schriftdateien aus meinem Knotenmodulordner in meinen Distributionsordner zu kopieren.

75
00:06:03,206 --> 00:06:07,430
So dass, wenn es bereitgestellt wird, auch die Schriftdateien bereitgestellt werden.

76
00:06:07,430 --> 00:06:12,840
Gehen Sie zum Terminal, das nächste Paket, das ich installieren werde, ist

77
00:06:12,840 --> 00:06:19,860
npm -g, erinnern Sie sich, dass dies bedeutet, dass es global installiert werden sollte.

78
00:06:19,860 --> 00:06:23,900
Da ich das auf einem Mac mache,

79
00:06:23,900 --> 00:06:30,670
sollte ich sudo npm -g sagen, wenn du es unter Windows machst, brauchst du das Sudo nicht.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g installieren kopierdateien.

81
00:06:42,837 --> 00:06:47,493
Und sobald das installiert ist, hilft mir dieses NPM-Modul,

82
00:06:47,493 --> 00:06:50,360
Dateien von einem Ordner in einen anderen Ordner zu kopieren.

83
00:06:51,390 --> 00:06:54,650
Lassen Sie mich hier ein weiteres NPM-Skript vorstellen.

84
00:06:56,110 --> 00:06:59,534
Wenn ich zu meiner package.json-Datei

85
00:06:59,534 --> 00:07:05,046
gehe, werde ich einen neuen Scrip hier Namen Copyfonts erstellen.

86
00:07:05,046 --> 00:07:09,666
Dieses Skript wird es mir ermöglichen, alle Schriftartendateien aus meinem

87
00:07:09,666 --> 00:07:13,650
Font Awesome Ordner in meinen Distributionsordner zu kopieren.

88
00:07:13,650 --> 00:07:17,510
Damit beim Rendern meiner Website

89
00:07:17,510 --> 00:07:21,500
auch all diese Schriftarten Dateien verschickt werden können, so dass

90
00:07:21,500 --> 00:07:26,110
meine Webseiten mit den Font Awesome Schriftarten korrekt wiedergegeben werden.

91
00:07:26,110 --> 00:07:30,949
Um dies zu tun, werde ich sagen, kopieren Sie Dateien -f,

92
00:07:30,949 --> 00:07:36,530
-f bedeutet, dass es einfach die Dateien ohne die volle Hierarchie

93
00:07:36,530 --> 00:07:40,550
kopiert und einfach die Dateien von einem Speicherort an einen anderen Speicherort kopiert.

94
00:07:40,550 --> 00:07:43,594
Also werde ich sagen, kopieren Sie Dateien -f

95
00:07:43,594 --> 00:07:53,594
node_modules/font_awesome/fonts/star

96
00:08:03,367 --> 00:08:09,416
und dist/fonts,

97
00:08:12,386 --> 00:08:14,970
und speichern Sie dann die Änderungen.

98
00:08:14,970 --> 00:08:20,620
Lassen Sie mich nun illustrieren, wie diese beiden npm-Skripte zusammenarbeiten. Wenn ich

99
00:08:20,620 --> 00:08:25,605
in mein Befehlsfenster gehe, werde ich

100
00:08:25,605 --> 00:08:30,300
npm run copyfonts eingeben.

101
00:08:30,300 --> 00:08:34,650
Wenn dies ausgeführt wird, wird ein Ordner mit

102
00:08:34,650 --> 00:08:38,640
dem Namen dist in meiner Projektordnerhierarchie erstellt.

103
00:08:38,640 --> 00:08:39,880
Und dann innerhalb der dist

104
00:08:39,880 --> 00:08:44,730
wird es einen Unterordner namens fonts geben, der die Schriftdateien enthält. Wenn Sie

105
00:08:44,730 --> 00:08:46,310
dies ausführen,

106
00:08:46,310 --> 00:08:50,480
werden Sie sofort feststellen, dass der Distributionsordner hier erstellt wird.

107
00:08:50,480 --> 00:08:52,190
Und innerhalb des Distributionsordners

108
00:08:52,190 --> 00:08:55,000
können Sie sehen, dass es einen Unterordner namens Schriftarten gibt.

109
00:08:55,000 --> 00:08:58,760
Und da drin wurden alle Fontawesome-Dateien kopiert.

110
00:09:00,070 --> 00:09:03,700
So funktioniert das Copyfonts-Skript.

111
00:09:04,790 --> 00:09:08,720
Ich werde Ihnen zeigen, wie das saubere Skript funktioniert.

112
00:09:08,720 --> 00:09:15,275
Also, wenn ich npm run clean eintippe, wird dies diesen Distributionsordner löschen.

113
00:09:15,275 --> 00:09:17,805
Wenn ich das ausführe, würden Sie bemerken, dass

114
00:09:17,805 --> 00:09:22,435
der Distributionsordner aus meiner Projektordnerhierarchie gelöscht wird.

115
00:09:22,435 --> 00:09:25,055
So funktioniert das Saubere.

116
00:09:25,055 --> 00:09:28,075
Nun, da wir diese beiden Skripte eingerichtet haben,

117
00:09:28,075 --> 00:09:32,735
müssen wir nun in der Lage sein, die verbleibenden Distributionsdateien aufzubauen.

118
00:09:33,745 --> 00:09:39,034
Im nächsten Schritt installieren wir ein Knotenmodul namens imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
welches die Befehlszeilenschnittstelle für das imagemin-Modul ist.

120
00:09:43,182 --> 00:09:51,032
Das imaginemin-Modul nimmt eine Sekte von Bilddateien und komprimiert sie dann nach unten.

121
00:09:51,032 --> 00:09:57,550
So gestapelt die Größe dieser Dateien werden so weit wie möglich minimiert,

122
00:09:57,550 --> 00:10:01,650
aber immer noch richtig gerendert werden, wenn unsere Website gerendert wird.

123
00:10:01,650 --> 00:10:05,060
Auf diese Weise reduzieren wir die Menge an Daten, die

124
00:10:05,060 --> 00:10:09,870
vom Browser heruntergeladen werden müssen, wenn er unsere Webseite rendern muss.

125
00:10:09,870 --> 00:10:16,250
Wenn Sie also Bilder in Ihre Webseite einbinden, dann ist imagemin-Aufgabe

126
00:10:16,250 --> 00:10:21,950
etwas, das Sie lernen sollten, um die Größe Ihrer Bilddateien zu reduzieren.

127
00:10:21,950 --> 00:10:29,740
Um das zu tun, werde ich dieses imagemin-Knotenmodul als globales Modul installieren.

128
00:10:29,740 --> 00:10:36,145
Also tippe ich sudo ein, da ich einen Mac verwende,

129
00:10:36,145 --> 00:10:41,270
npm -g installiere imagemin-cli

130
00:10:41,270 --> 00:10:46,770
und installiere dann dieses Knotenmodul.

131
00:10:50,730 --> 00:10:56,670
Manchmal werden einige der imagemin-Plugins auf einem Mac nicht korrekt installiert.

132
00:10:56,670 --> 00:11:02,979
Deshalb gebe ich dem Befehl diese zusätzlichen Flags,

133
00:11:02,979 --> 00:11:09,310
sie sagen —unsafe-perm=true und —allow-root.

134
00:11:09,310 --> 00:11:12,497
Sobald diese Installation abgeschlossen ist,

135
00:11:12,497 --> 00:11:18,183
lassen Sie mich ein Skript einrichten, um diese Vergrößerung meiner Bilder zu machen.

136
00:11:18,183 --> 00:11:23,650
Wenn ich wieder zu package.json gehe, werde ich hier das nächste Skript einrichten.

137
00:11:23,650 --> 00:11:32,350
Also würde ich sagen, imagemin ist der Skriptname, den ich tun werde,

138
00:11:32,350 --> 00:11:36,610
und ich würde sagen imagemin.

139
00:11:36,610 --> 00:11:43,930
Und dann, da alle meine Bilder im IMG-Ordner sind, würde ich sagen, img/*,

140
00:11:43,930 --> 00:11:49,913
und dann werden viele Dateien in das dist image kopiert.

141
00:11:49,913 --> 00:11:54,997
Die ursprünglichen Bilddateien aus dem Bildordner, den ich habe, werden also

142
00:11:54,997 --> 00:12:00,300
in den Distributionsordner und in den Bildunterordner dort kopiert.

143
00:12:00,300 --> 00:12:03,616
Das vervollständigt also mein Imagemin.

144
00:12:03,616 --> 00:12:07,460
Lassen Sie mich mit der restlichen Einrichtung fortfahren, und

145
00:12:07,460 --> 00:12:13,070
dann werden wir sehen, wie wir die Skripte verwenden, die wir bereits dort eingerichtet haben.

146
00:12:14,260 --> 00:12:19,270
Jetzt, da ich den Testordner drin habe, den ich möglicherweise erstellen könnte,

147
00:12:19,270 --> 00:12:26,450
möchte ich den Ordner dist nicht in mein Git-Repository einchecken.

148
00:12:26,450 --> 00:12:31,640
Deshalb werde ich in meine .gitignore Datei auch in den Ordner dist hinzufügen.

149
00:12:31,640 --> 00:12:37,060
Der Ordner dist wird also ignoriert, wenn ich in das Git-Repository einchecke.

150
00:12:37,060 --> 00:12:43,342
Speichern wir also die Änderungen und gehen zurück zu package.json.

151
00:12:43,342 --> 00:12:49,710
Nun, was ich als nächstes tun werde, ist, drei verschiedene

152
00:12:50,870 --> 00:12:56,080
Knotenmodule zu installieren, die es mir ermöglichen, die Änderungen

153
00:12:56,080 --> 00:13:02,550
an meiner index.html Datei und den restlichen HTML-Dateien dort durchzuführen.

154
00:13:02,550 --> 00:13:09,280
Geben Sie an der Eingabeaufforderung npm install —save dev ein.

155
00:13:09,280 --> 00:13:16,498
Ich werde ein Modul namens usemin-cli installieren.

156
00:13:16,498 --> 00:13:21,166
Dieser usemin-cli ist derjenige, der mir erlaubt, die Transformation aus meiner

157
00:13:21,166 --> 00:13:22,230
HTML-Datei durchzuführen.

158
00:13:22,230 --> 00:13:26,870
Und dann verketten und kombinieren Sie alle

159
00:13:26,870 --> 00:13:30,650
CSS-Dateien in einer einzigen CSS-Datei und legen Sie sie dann in den Distributionsordner.

160
00:13:30,650 --> 00:13:36,700
In ähnlicher Weise werden alle JS-Dateien verkettet und in einen einzigen Ordner abgelegt.

161
00:13:36,700 --> 00:13:38,720
Also ist dieser Usemin-cli nützlich.

162
00:13:38,720 --> 00:13:44,005
Aber dieser usemin-cli nimmt die Hilfe

163
00:13:44,005 --> 00:13:51,051
von drei anderen Knotenmodulen namens cssmin,

164
00:13:51,051 --> 00:13:56,350
dann uglifyjs und htmlmin.

165
00:13:56,350 --> 00:14:01,600
Also muss ich diese drei Knotenmodule zusätzlich zu usemin-cli installieren.

166
00:14:01,600 --> 00:14:04,610
Und ich werde dies lokal in meinem Projekt installieren,

167
00:14:04,610 --> 00:14:08,330
deshalb npm install —save-def.

168
00:14:08,330 --> 00:14:13,910
Auf diese Weise werden sie in meiner package.json-Datei gespeichert.

169
00:14:13,910 --> 00:14:15,890
Gehen wir also weiter und schließen Sie die Installation ab.

170
00:14:17,230 --> 00:14:21,270
Jetzt, da ich das Usemin und

171
00:14:21,270 --> 00:14:26,440
die zugehörigen Knotenmodule installiert habe, muss ich eine Transformation in

172
00:14:26,440 --> 00:14:30,695
meine index.html Datei und die restlichen HTML-Dateien durchführen.

173
00:14:30,695 --> 00:14:35,750
So dass das usemin node_module erkennt, dass es sich bei dieser Gruppe

174
00:14:35,750 --> 00:14:42,330
um eine Reihe von CSS-Dateien handelt, die komprimiert, berechnet und verifiziert werden müssen.

175
00:14:42,330 --> 00:14:47,730
In ähnlicher Weise ist dies die Gruppe von JavaScript-Dateien, die uglyfiziert

176
00:14:47,730 --> 00:14:51,130
, kombiniert und miteinander verkettet werden müssen.

177
00:14:51,130 --> 00:14:54,480
Um dem Usemin-Paket

178
00:14:54,480 --> 00:15:00,430
zu helfen, muss ich ein wenig Code in meine index.html Datei hinzufügen.

179
00:15:00,430 --> 00:15:07,942
Also gleich vor dem ersten Link dort,

180
00:15:07,942 --> 00:15:14,747
werde ich hier oben eine Markierung hinzufügen,

181
00:15:14,747 --> 00:15:21,100
die besagt! — Build:css.

182
00:15:21,100 --> 00:15:25,621
Jetzt, das! —, wie Sie erkennen werden,

183
00:15:25,621 --> 00:15:29,640
ist ein Kommentar aus HTML-Perspektive.

184
00:15:29,640 --> 00:15:33,405
In diesem Kommentar werde ich also einschließen, dass diese bestimmte Zeile

185
00:15:33,405 --> 00:15:38,480
vom Verwendungsmenü verwendet wird, um den

186
00:15:38,480 --> 00:15:43,370
Codeblock zu erkennen, der alle CSS-Dateien angibt, die übertragen werden müssen.

187
00:15:43,370 --> 00:15:49,743
Also sage ich build.css, und dann werde ich

188
00:15:49,743 --> 00:15:54,770
den Dateinamen als css/main.css angeben.

189
00:15:54,770 --> 00:15:57,160
Dies ist die Syntax für die Angabe.

190
00:15:57,160 --> 00:16:04,080
Was das bedeutet, ist, dass diese Block von CSS-Dateien alle miteinander kombiniert

191
00:16:04,080 --> 00:16:10,510
und dann verkettet, verkleinert und dann in diese Datei namens main.css eingefügt werden.

192
00:16:10,510 --> 00:16:15,723
Und dann wird dieser Block auf der anderen Seite identifiziert, indem er sagt:

193
00:16:21,873 --> 00:16:27,090
Bindestrich —, okay, tut mir leid.

194
00:16:27,090 --> 00:16:34,210
Ich habe vergessen, am Ende einen doppelten Bindestrich einzuschließen.

195
00:16:34,210 --> 00:16:37,050
Das ist der Grund, warum dies keine Farben drehte.

196
00:16:37,050 --> 00:16:41,780
Manchmal sind Sie also glücklich, dass Ihr

197
00:16:41,780 --> 00:16:46,540
Redakteur auf diese potenziellen Fehler hinweist, die Sie begehen könnten.

198
00:16:46,540 --> 00:16:51,779
Also genau da würde ich sagen, endbuild und

199
00:16:51,779 --> 00:16:56,206
dann — rechte Klammer dort.

200
00:16:56,206 --> 00:17:00,904
Nun, was auch immer zwischen diesem Build und

201
00:17:00,904 --> 00:17:06,708
Endbuild ist, diese Gruppe wird als eine Einheit behandelt,

202
00:17:06,708 --> 00:17:12,252
um von unserem usemin npm Modul dort kombiniert zu werden.

203
00:17:12,252 --> 00:17:14,890
Sehen Sie sich die Syntax an, die das Usemin-Modul dort verwendet.

204
00:17:16,230 --> 00:17:22,020
Ich muss die gleiche Transformation zu contactus.html und aboutus.html auch machen.

205
00:17:22,020 --> 00:17:26,759
Also werde ich diese

206
00:17:26,759 --> 00:17:31,306
hier kopieren, die Faule, die ich bin.

207
00:17:31,306 --> 00:17:35,149
Ich werde einfach kopieren und

208
00:17:35,149 --> 00:17:39,866
einfügen in contactus.html und

209
00:17:39,866 --> 00:17:44,770
dann auch aboutus.html dort.

210
00:17:44,770 --> 00:17:50,263
In ähnlicher Weise,

211
00:17:50,263 --> 00:17:56,477
wenn ich zur index.html zurückgehe, kopiere ich diesen Inbuild und kopiere ihn dann auch in

212
00:17:56,477 --> 00:18:01,840
contactus.html und aboutus.html Daten.

213
00:18:03,530 --> 00:18:08,990
Okay, lassen Sie uns die Änderungen an allen Dateien speichern.

214
00:18:08,990 --> 00:18:12,190
Gehen Sie dann zurück zu index.html.

215
00:18:12,190 --> 00:18:16,670
Ich werde das Gleiche unten für meine

216
00:18:16,670 --> 00:18:22,220
JavaScript-Skripte wiederholen, die ich dort aufgenommen habe.

217
00:18:22,220 --> 00:18:26,730
Also, hier nach unten zu gehen,

218
00:18:26,730 --> 00:18:30,026
was ich hier tun muss,

219
00:18:30,026 --> 00:18:34,883
ist <! — Build js,

220
00:18:34,883 --> 00:18:39,225
und ich werde js/main.js sagen.

221
00:18:41,216 --> 00:18:43,130
Doppelter Bindestrich, Schrägstrich.

222
00:18:43,130 --> 00:18:47,781
Also das ist der Anfang des Blocks und dann wird das Ende durch,

223
00:18:51,540 --> 00:18:55,034
Build, okay?

224
00:18:55,034 --> 00:19:00,782
Mit diesen Änderungen ist jetzt meine Datei index.html bereit,

225
00:19:00,782 --> 00:19:07,899
und ich muss die gleiche Transformation zu contactus.html am unteren Ende durchführen.

226
00:19:14,090 --> 00:19:18,715
Und aboutus.html auch an der Unterseite.

227
00:19:25,340 --> 00:19:29,505
In ähnlicher Weise wurde dieses Enbuild kopiert.

228
00:19:32,892 --> 00:19:38,649
In contactus.html und aboutus.html und speichern Sie dann alle Dateien.

229
00:19:40,130 --> 00:19:44,550
Und das bereitet unsere HTML-Dateien für die

230
00:19:44,550 --> 00:19:48,940
Umwandlung vor, um den Distributionsordner vorzubereiten.

231
00:19:48,940 --> 00:19:53,540
Diese Dateien bleiben als solche, aber dann werden die transformierten Dateien in den

232
00:19:53,540 --> 00:19:58,380
Distributionsordner gespeichert, der aus diesen Dateien erstellt wurde.

233
00:19:58,380 --> 00:20:02,948
Nun, sobald wir das abgeschlossen haben, lassen Sie uns ein paar Skripte einrichten. Wenn ich

234
00:20:02,948 --> 00:20:07,875
zu package.json gehe, werde ich mein nächstes Skript namens usemin einrichten.

235
00:20:11,930 --> 00:20:15,890
Und dann sagt dies usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, dies ist die Syntax für

237
00:20:24,671 --> 00:20:29,366
angeben -d dist, was bedeutet, dass das Ziel für

238
00:20:29,366 --> 00:20:32,507
diese Verteilung dist Ordner.

239
00:20:32,507 --> 00:20:39,110
Und dann würde ich sagen htmlmin, dies wird auch die HTML-Datei minimieren.

240
00:20:39,110 --> 00:20:43,300
Es werden also alle fremden Leerzeichen und Kommentare aus der HTML-Datei entfernt.

241
00:20:43,300 --> 00:20:45,110
Aber sie komprimieren es so

242
00:20:45,110 --> 00:20:48,350
, dass es die minimale Anzahl von Zeichen enthält.

243
00:20:48,350 --> 00:20:55,165
Wir werden uns das Ergebnis ansehen, nachdem wir abgeschlossen haben und die Transformation dort durchführen.

244
00:20:55,165 --> 00:21:00,528
Also, das und dann, nicht nur das,

245
00:21:00,528 --> 00:21:05,509
und dann htmlmin, und dann sagen

246
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html und

247
00:21:10,684 --> 00:21:15,664
&&, das bedeutet, dass es

248
00:21:15,664 --> 00:21:19,970
danach noch mehr kommen wird.

249
00:21:19,970 --> 00:21:25,730
Dann werde ich sagen, usemin

250
00:21:25,730 --> 00:21:31,171
dann aboutus.html

251
00:21:31,171 --> 00:21:36,932
-d dist —htmlmin

252
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

253
00:21:45,560 --> 00:21:50,078
Das ist also die zweite zum Umwandeln der Datei aboutus.html.

254
00:21:50,078 --> 00:21:55,135
Und dann &&, dies ist ein langes Skript,

255
00:21:55,135 --> 00:21:58,139
usemin index.html,

256
00:21:58,139 --> 00:22:02,890
wir müssen alle Dateien transformieren.

257
00:22:02,890 --> 00:22:08,150
Deshalb muss ich jeden explizit dort angeben.

258
00:22:08,150 --> 00:22:11,910
usemin nimmt keine Platzhalter, also

259
00:22:11,910 --> 00:22:16,080
muss ich das Halten wie [UNHÖRBAR] angeben.

260
00:22:16,080 --> 00:22:21,365
Und so verwende index.html

261
00:22:21,365 --> 00:22:27,426
-d dist —htmlmin

262
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

263
00:22:34,160 --> 00:22:40,656
Und danach habe ich ein Komma gesetzt, weil ich das nächste Skript einführen werde, das

264
00:22:40,656 --> 00:22:45,940
heißt, Aufgerufene Build.

265
00:22:45,940 --> 00:22:50,490
Dieses Build-Skript erstellt also meinen Distributionsordner.

266
00:22:50,490 --> 00:22:54,159
Also, um meinen Distributionsordner zu erstellen,

267
00:22:54,159 --> 00:22:59,328
ist das erste, was ich tun werde, npm run clean.

268
00:22:59,328 --> 00:23:07,090
Und dann npm führen Copyfonts aus.

269
00:23:07,090 --> 00:23:12,347
Sie haben diese beiden bereits früher in Aktion gesehen,

270
00:23:12,347 --> 00:23:18,950
dann werde ich sagen, npm laufen imagemin, um die minimierten Bilder zu erstellen,

271
00:23:18,950 --> 00:23:23,220
und dann würde ich sagen, npm run usemin.

272
00:23:23,220 --> 00:23:29,257
Und dieses spezielle Skript wird meinen Distributionsordner aufbauen,

273
00:23:29,257 --> 00:23:36,171
dessen Inhalt dann auf meinen Webserver kopiert werden kann, um meine Tonhöhe zu lösen.

274
00:23:36,171 --> 00:23:39,238
Speichern Sie die Änderungen.

275
00:23:39,238 --> 00:23:45,837
Lassen Sie uns jetzt sehen, wie wir die Website aufbauen.

276
00:23:45,837 --> 00:23:49,431
An diesem Punkt, um unsere Website aufzubauen und

277
00:23:49,431 --> 00:23:55,950
die Eingabeaufforderung einfach npm run build eingeben und dann einfach ausführen.

278
00:23:55,950 --> 00:24:00,430
Dieses Skript, das wiederum eine Reihe

279
00:24:00,430 --> 00:24:05,440
von beiden Skripten ausführt, die wiederum den gesamten Satz

280
00:24:05,440 --> 00:24:10,870
von Aufgaben abschließen, die ausgeführt werden müssen, um meinen Distributionsordner vorzubereiten.

281
00:24:10,870 --> 00:24:13,690
Also, lasst uns weitermachen und dieses Ding ausführen und

282
00:24:13,690 --> 00:24:18,520
dann wird das durch alle verschiedenen Skripte laufen.

283
00:24:18,520 --> 00:24:23,320
Es dauert ein paar Minuten, bis es abgeschlossen ist, und wenn es abgeschlossen ist,

284
00:24:23,320 --> 00:24:29,838
ist Ihr Distributionsordner jetzt bereit für die Bereitstellung auf Ihrem Webserver. Wenn Sie

285
00:24:29,838 --> 00:24:34,950
zu unserem Editor gehen,

286
00:24:34,950 --> 00:24:38,750
sehen Sie jetzt, dass der Distributionsordner jetzt bereit ist.

287
00:24:38,750 --> 00:24:44,020
Innerhalb des Distributionsordners sehen Sie die drei Indexdateien,

288
00:24:44,020 --> 00:24:48,580
und im CSS-Ordner sehen Sie die einzelne Datei mit dem Namen m ain.css,

289
00:24:48,580 --> 00:24:55,050
die alle Bootstraps CSS, Bootstraps CSS

290
00:24:55,050 --> 00:24:57,660
und den CSS-Code enthält, den Sie erstellt haben.

291
00:24:58,690 --> 00:25:01,863
Und der JS-Ordner

292
00:25:01,863 --> 00:25:05,287
enthält die main.js, die das Bootstrap, die jQuery und

293
00:25:05,287 --> 00:25:10,905
die ganze Reihe von JavaScript-Code in einer einzigen Datei zusammengefasst enthält.

294
00:25:10,905 --> 00:25:15,638
Das Bild enthält die optimierten Bilder, und die Schriftarten, die

295
00:25:15,638 --> 00:25:18,730
Sie früher gesehen haben, enthalten die Schriftartdateien.

296
00:25:18,730 --> 00:25:24,030
Lassen Sie uns nun einen kurzen Blick auf index.html werfen, die hier erstellt wurde.

297
00:25:24,030 --> 00:25:27,290
Wenn Sie sich also die index.html ansehen, die hier erstellt wurde,

298
00:25:27,290 --> 00:25:31,120
werden Sie feststellen, dass das Ganze buchstäblich unlesbar ist,

299
00:25:32,530 --> 00:25:37,850
denn wenn Sie HTML min gemacht haben, hat es alle fremden

300
00:25:39,500 --> 00:25:42,800
Kommentare entfernt, es hat alle Leerzeichen entfernt und

301
00:25:42,800 --> 00:25:48,100
dann diesen ganzen laufenden Satz von Zeichen.

302
00:25:49,540 --> 00:25:52,800
Für den Computer macht es keinen Unterschied, weil es diese

303
00:25:52,800 --> 00:25:55,190
Webseite genauso gut rendert.

304
00:25:55,190 --> 00:25:58,727
Für dich und mich macht das einen Unterschied, weil wir das nicht leicht lesen können.

305
00:26:01,038 --> 00:26:05,620
Das ist also, was die Verminderung für Ihre HTML-Datei verursacht.

306
00:26:05,620 --> 00:26:08,180
Werfen wir einen Blick auf die main.css.

307
00:26:08,180 --> 00:26:12,200
Wenn Sie sich die main.css ansehen, sehen Sie, dass das Ganze

308
00:26:12,200 --> 00:26:15,090
in eine einzige Einheit zerquetscht wird, wie Sie nach unten gehen.

309
00:26:16,300 --> 00:26:20,808
Wenn Sie mutig genug sind, gehen Sie nach unten und dann werden Sie sehen, die,

310
00:26:24,793 --> 00:26:29,683
Sie werden Stunden speziell geschrieben

311
00:26:29,683 --> 00:26:34,870
CSS-Klassen rechts unten unten unten hier sehen.

312
00:26:37,220 --> 00:26:42,801
Genau dort erkennt man Karussellknopf und andere Dinge,

313
00:26:42,801 --> 00:26:49,693
nabber-dunkel und andere Dinge dort, also ist alles kaputt in.

314
00:26:49,693 --> 00:26:52,896
Also, das ist, was Minification, und Kosten.

315
00:26:52,896 --> 00:26:55,530
Main.js, dasselbe.

316
00:26:55,530 --> 00:26:56,545
Unlesbarer Code dort.

317
00:26:56,545 --> 00:26:59,440
Ihr Computer, kein Unterschied.

318
00:26:59,440 --> 00:27:03,580
Damit ist unser Distributionsordner nun komplett.

319
00:27:03,580 --> 00:27:06,250
Schauen wir uns unseren Distributionsordner an.

320
00:27:06,250 --> 00:27:08,669
Zum Glück haben wir unseren Light-Server bereits laufen.

321
00:27:08,669 --> 00:27:12,014
Was ich also tun werde, ist, zum Browser zu gehen und

322
00:27:12,014 --> 00:27:16,867
dann die indexfähige CLM-Datei in diesem Distributionsordner auszuchecken, um zu

323
00:27:16,867 --> 00:27:20,507
sehen, ob sie richtig gerendert wird oder nicht. Wenn ich

324
00:27:20,507 --> 00:27:25,870
zum Browser gehe, werde ich in meiner Adressleiste tippe,

325
00:27:25,870 --> 00:27:31,440
dist index.html und

326
00:27:31,440 --> 00:27:36,920
merke, dass diese bestimmte Datei die

327
00:27:36,920 --> 00:27:40,680
Distributionsdatei ist, die erstellt wurde, und sie enthält genau die gleiche Sache und

328
00:27:40,680 --> 00:27:47,370
rendert genau die gleiche Weise wie unsere ursprüngliche Webseite, die wir erstellt haben.

329
00:27:47,370 --> 00:27:52,230
Ähnlich, beachten Sie, dass diese aboutus.html aus dem

330
00:27:52,230 --> 00:27:57,490
Distributionsordner stammt und dies genau wie zuvor gerendert wird,

331
00:27:57,490 --> 00:28:01,350
und auch die Datei contactus.html.

332
00:28:01,350 --> 00:28:03,360
Alles funktioniert einwandfrei.

333
00:28:03,360 --> 00:28:08,970
Alles, was Sie noch tun müssen, um Ihre Webseite

334
00:28:08,970 --> 00:28:15,530
oder Ihre Website bereitzustellen, ist einfach den Inhalt aus dem Ordner dist zu kopieren

335
00:28:15,530 --> 00:28:19,460
und dann auf Ihren Webserver hochzuladen, und

336
00:28:19,460 --> 00:28:24,830
dann ist Ihr Webserver einsatzbereit und dient Ihrer Website.

337
00:28:26,080 --> 00:28:28,740
Damit schließen wir diese Übung ab.

338
00:28:28,740 --> 00:28:33,620
In dieser Übung haben wir gesehen, wie wir

339
00:28:33,620 --> 00:28:38,636
NBM-Skripte verwenden können, um unsere Website zu erstellen und bereitzustellen.

340
00:28:38,636 --> 00:28:40,610
Dies kann ein guter Zeitpunkt für

341
00:28:40,610 --> 00:28:45,223
Sie sein, einen Kommentar abrufen mit der Nachricht NPM-Skripte, Teil 2 zu tun.

342
00:28:45,223 --> 00:28:50,815
( MUSIK)