1
00:00:03,320 --> 00:00:09,060
Jetzt ist es an der Zeit, mit dem zweiten Teil der Schluckübung fortzufahren.

2
00:00:09,060 --> 00:00:13,300
Wir führen ähnliche Schritte wie im

3
00:00:13,300 --> 00:00:18,230
zweiten Teil der NPM-Skript-Übung und in der aktuellen Übung fort.

4
00:00:18,230 --> 00:00:25,560
Also, wir arrangieren das Löschen des Distributionsordners dann das Kopieren der Schriftarten,

5
00:00:25,560 --> 00:00:28,970
dann auch den Distributionsordner neu zu erstellen,

6
00:00:28,970 --> 00:00:34,605
indem wir ähnliche Knotenmodule verwenden,

7
00:00:34,605 --> 00:00:41,325
wie wir für Grant und auch die NPM-Skripte verwendet haben.

8
00:00:41,325 --> 00:00:46,390
Unser nächster Schritt besteht darin, die Aufgaben zum Löschen des

9
00:00:46,390 --> 00:00:51,305
Distributionsordners und zum Kopieren der Schriftarten in den Distributionsordner einzurichten.

10
00:00:51,305 --> 00:00:54,895
Also lassen Sie uns ein paar Knotenmodule einrichten.

11
00:00:54,895 --> 00:00:59,930
Der erste, den wir einrichten werden, heißt del. Mit

12
00:01:02,970 --> 00:01:08,195
diesem Knotenmodell können Sie einen Ordner löschen.

13
00:01:08,195 --> 00:01:13,655
Und lasst uns weitermachen und die Gulp-Aufgaben einrichten.

14
00:01:13,655 --> 00:01:18,780
Mit Gulp müssen wir zum Glück kein weiteres Modul zum Kopieren installieren,

15
00:01:18,780 --> 00:01:24,505
da die Gulp-Streams es uns erlauben, die Dateien mit geringem Aufwand zu kopieren.

16
00:01:24,505 --> 00:01:27,945
Wenn ich zur Gulp-Datei gehe,

17
00:01:27,945 --> 00:01:31,870
werde ich das gemischte Gulp-Modul vorstellen,

18
00:01:31,870 --> 00:01:34,185
was ich sagen werde, del.

19
00:01:34,185 --> 00:01:39,575
Und dann benötigen Sie das del-Modul hier.

20
00:01:39,575 --> 00:01:43,510
Wenn wir also das del-Modul dort benötigen,

21
00:01:43,510 --> 00:01:47,524
können wir voran gehen und die Aufgaben einrichten.

22
00:01:47,524 --> 00:01:51,695
Also, wir werden zuerst die saubere Aufgabe hier einrichten.

23
00:01:51,695 --> 00:01:54,730
Also gleich nach der Standardaufgabe

24
00:01:54,730 --> 00:01:57,075
werde ich die saubere Aufgabe einrichten.

25
00:01:57,075 --> 00:02:01,535
Also werde ich sagen, Gulp Aufgabe sauber.

26
00:02:01,535 --> 00:02:04,320
Und wie Sie sehen können,

27
00:02:04,320 --> 00:02:08,125
ist dies als Funktion dort eingerichtet.

28
00:02:08,125 --> 00:02:14,210
Und innerhalb, dass wir sagen würden, zurück del.

29
00:02:14,210 --> 00:02:20,885
Und dann ist der angegebene Parameter der Distributionsordner hier.

30
00:02:20,885 --> 00:02:24,320
Dies wird also die saubere Aufgabe einrichten.

31
00:02:24,320 --> 00:02:26,280
Und sobald diese Aufgabe ausgeführt wird,

32
00:02:26,280 --> 00:02:30,875
wird der Distributionsordner gelöscht.

33
00:02:30,875 --> 00:02:40,525
Unsere nächste Aufgabe besteht darin, die Schriftarten in ihren Distributionsordner zu kopieren.

34
00:02:40,525 --> 00:02:44,625
Also, ich würde sagen, kopieren Sie Schriftarten.

35
00:02:44,625 --> 00:02:48,595
Und wie Sie sehen können,

36
00:02:48,595 --> 00:02:55,570
richten wir die Funktion dort ein und schließen dann die Funktion aus.

37
00:02:55,570 --> 00:02:59,050
Und dann hier würde ich einfach sagen,

38
00:02:59,050 --> 00:03:06,805
Gulp Quell- und

39
00:03:06,805 --> 00:03:17,860
Knotenmodule, Schriftart genial, Schriftarten.

40
00:03:21,900 --> 00:03:33,370
Du kannst mich mit den Globbing-Mustern sehen, genau da.

41
00:03:39,140 --> 00:03:44,750
Und wenn wir dann alle Quelldateien ausgewählt

42
00:03:44,750 --> 00:03:50,560
haben, übergeben wir sie einfach in die Zieldatei.

43
00:03:51,270 --> 00:03:54,645
Sie bemerken also, dass wir kein

44
00:03:54,645 --> 00:04:01,450
spezielles Modul benötigen, um das Kopieren der Dateien zu arrangieren.

45
00:04:01,450 --> 00:04:07,320
Wir verwenden einfach die Gulp-Quell- und Zielströme, um

46
00:04:07,320 --> 00:04:12,965
die Dateien vom Quellspeicherort an den Zielort pipe zu können.

47
00:04:12,965 --> 00:04:19,075
Diese beiden werden also die Aufgabe „Clean“ und „Copy Fonts“ einrichten.

48
00:04:19,075 --> 00:04:24,010
Als Nächstes richten wir das NPM-Modul für die Imagemin-Task ein.

49
00:04:24,010 --> 00:04:26,865
So das Minimieren und Komprimieren der Bilder.

50
00:04:26,865 --> 00:04:34,910
Um dies zu tun, fügen Sie die Eingabeaufforderung Gulp imagemin ein.

51
00:04:34,910 --> 00:04:40,965
Dies ist das Gulp-Plugin, das dem imagemin-Knotenmodul entspricht.

52
00:04:40,965 --> 00:04:45,065
So haben wir als Gulp Plugin installiert,

53
00:04:45,065 --> 00:04:47,860
das auch Knotenmodul ist.

54
00:04:47,860 --> 00:04:51,210
Sobald die Installation abgeschlossen ist,

55
00:04:51,210 --> 00:04:54,120
lassen Sie uns diese Imagemin-Aufgabe einrichten. Wenn wir

56
00:04:54,120 --> 00:04:56,285
zu unserer Gulp-Datei gehen,

57
00:04:56,285 --> 00:05:05,700
richten wir hier die Imagemin-Aufgabe ein.

58
00:05:05,700 --> 00:05:10,895
Also richten wir die Imagemin-Aufgabe als Funktion ein.

59
00:05:10,895 --> 00:05:15,050
Wie Sie sehen können, ist die Strukturierung des Codes für

60
00:05:15,050 --> 00:05:20,965
die Gulp-Aufgabendefinition ziemlich Standard.

61
00:05:20,965 --> 00:05:25,110
Also würden Sie sagen, Gulp Quelle.

62
00:05:25,110 --> 00:05:29,650
Wir spezifizieren die Quelldateien dort und die Quelldateien im

63
00:05:29,650 --> 00:05:38,695
Bild-Ordner die JPG-,

64
00:05:38,695 --> 00:05:42,855
GIF- und PNG-Dateien von dort.

65
00:05:42,855 --> 00:05:50,370
Und dann leiten Sie sie durch die Imagemin-Aufgabe.

66
00:05:50,370 --> 00:05:54,285
Und dann werde ich hier einige Parameter einrichten.

67
00:05:54,285 --> 00:06:00,390
Also werde ich

68
00:06:00,390 --> 00:06:07,240
die Optimierungsstufe auf drei einrichten, progressiv als wahr.

69
00:06:07,240 --> 00:06:14,534
Dies wird sie in progressiven und interlaced Bilder verwandeln.

70
00:06:14,534 --> 00:06:19,570
Sobald dies eingerichtet ist, besteht

71
00:06:20,630 --> 00:06:28,250
der nächste Schritt darin, sie an ihr Ziel zu leiten.

72
00:06:28,250 --> 00:06:36,435
Und das Ziel hier, wie Sie sehen können, ist der Image-Ordner im Distributionsordner.

73
00:06:36,435 --> 00:06:40,110
Damit ist nun die Imagemin-Aufgabe eingerichtet.

74
00:06:40,110 --> 00:06:44,430
Jetzt werden wir hier die Build-Aufgabe aufbauen.

75
00:06:44,430 --> 00:06:50,105
Lassen Sie mich also die Build-Aufgabe einrichten.

76
00:06:50,105 --> 00:06:52,580
Also für den Build die Aufgabe,

77
00:06:52,580 --> 00:06:57,940
was Sie tun möchten, ist, zuerst

78
00:06:59,150 --> 00:07:02,965
die saubere Aufgabe auszuführen, bevor

79
00:07:02,965 --> 00:07:05,005
die verbleibenden Aufgaben ausgeführt werden,

80
00:07:05,005 --> 00:07:08,220
weil wir zuerst den Verteilungsordner bereinigen möchten.

81
00:07:08,220 --> 00:07:11,810
Und das muss abgeschlossen werden, bevor die restlichen Aufgaben erledigt sind.

82
00:07:11,810 --> 00:07:18,605
Mit Gulp werden die Aufgaben parallel automatisch ausgeführt.

83
00:07:18,605 --> 00:07:21,980
Und so kann es passieren, dass,

84
00:07:21,980 --> 00:07:25,455
wenn Sie die Säuberungsaufgabe parallel zur verbleibenden Aufgabe ausführen,

85
00:07:25,455 --> 00:07:28,500
die Säuberungsaufgabe später beendet

86
00:07:28,500 --> 00:07:31,430
wird und dann einige der von den verbleibenden Aufgaben erledigten Arbeiten löscht.

87
00:07:31,430 --> 00:07:34,580
Wenn Sie also die Aufgabe „Schlucken“ angeben,

88
00:07:34,580 --> 00:07:36,920
wenn Sie „clean“ als den ersten

89
00:07:36,920 --> 00:07:39,105
Parameter hier als zweiten Parameter angeben,

90
00:07:39,105 --> 00:07:42,625
dann bedeutet dies, dass diese Aufgabe zuerst abgeschlossen wird.

91
00:07:42,625 --> 00:07:45,730
Und dann werden die verbleibenden Aufgaben ausgeführt.

92
00:07:45,730 --> 00:07:48,395
Also, ich würde sagen, Gulp beginnt.

93
00:07:48,395 --> 00:07:49,830
Mit dem Gulp Start werden

94
00:07:49,830 --> 00:07:54,445
alle Aufgaben, die wir hier angeben, parallel ausgeführt.

95
00:07:54,445 --> 00:08:03,975
Also werde ich die Aufgabe zum Kopieren von Schriftarten und auch die Imagemin-Aufgabe zusammen ausführen.

96
00:08:03,975 --> 00:08:07,255
Später werden wir die Usemin-Aufgabe einrichten und diese dann

97
00:08:07,255 --> 00:08:12,050
auch zusammen mit den Kopierschriftarten und Imagemin ausführen.

98
00:08:12,180 --> 00:08:17,400
Eine letzte Sache, die ich hinzufügen muss, bevor wir voran gehen und

99
00:08:17,400 --> 00:08:23,120
die Aufgaben ausführen, ist, hier nach oben zu gehen und dann das Imagemin zu benötigen.

100
00:08:23,120 --> 00:08:30,115
Ich würde sagen, Imagemin benötigt Gulp Imagemin.

101
00:08:30,115 --> 00:08:33,810
Und dann speichern Sie die Änderungen.

102
00:08:34,670 --> 00:08:39,430
Lassen Sie uns jetzt voran und überprüfen Sie die Build-Aufgabe.

103
00:08:39,430 --> 00:08:45,400
An der Eingabeaufforderung, wenn Ihr Typ Gulp bauen,

104
00:08:45,400 --> 00:08:47,540
dann sollte es alle drei Aufgaben ausführen.

105
00:08:47,540 --> 00:08:50,440
Sie werden also sehen, dass es die saubere Aufgabe startet und

106
00:08:50,440 --> 00:08:54,290
sie abschließt und dann die eigentliche Build-Aufgabe startet.

107
00:08:54,290 --> 00:08:56,905
Sie können also sehen, dass durch

108
00:08:56,905 --> 00:09:00,075
die Angabe der Säuberung abgeschlossen werden soll, bevor der eigentliche Build stattfindet,

109
00:09:00,075 --> 00:09:03,255
dann stellen Sie sicher, dass Sie zuerst den Distributionsordner bereinigen und

110
00:09:03,255 --> 00:09:08,170
dann die Build-Aufgabe, die die Kopierschriftarten und das Imagemin umfasst,

111
00:09:08,170 --> 00:09:14,140
alle parallel abgeschlossen werden, ausgeführt werden danach. Wenn Sie

112
00:09:14,140 --> 00:09:16,290
zum Editor gehen,

113
00:09:16,290 --> 00:09:18,705
sehen Sie, dass im Distributionsordner

114
00:09:18,705 --> 00:09:23,560
wir sehen, dass die Schriftarten kopiert wurden und Bilder korrekt kopiert wurden.

115
00:09:23,560 --> 00:09:29,970
Der letzte Schritt besteht darin, die Usemin-Aufgabe festzulegen, um den Distributionsordner aufzubauen.

116
00:09:29,970 --> 00:09:32,895
Um sie einzurichten, usemin Aufgabe,

117
00:09:32,895 --> 00:09:40,195
werde ich ein paar Gulp Plugins installieren, so würde ich sagen, NPM installieren.

118
00:09:40,195 --> 00:09:46,310
Und dann würde ich das uglify Gulp File Plugin installieren,

119
00:09:46,310 --> 00:09:48,635
das offensichtlich auch ein Knotenmodul ist.

120
00:09:48,635 --> 00:09:57,170
Und dann werde ich das Usemin-Knotenmodul und dann das Rev-Knotenmodul installieren.

121
00:09:57,170 --> 00:10:02,580
Das Gulp Rev Node Modul ist wie das File Graph Rev Grant-Plugin, das wir früher gesehen haben.

122
00:10:02,580 --> 00:10:06,170
Es unterscheidet sich etwas von der Dateirev, die wir früher gesehen haben,

123
00:10:06,170 --> 00:10:09,995
dient aber dem gleichen Zweck.

124
00:10:09,995 --> 00:10:20,315
Also, Gulp rev, dann werde ich Gulp sauberes CSS einrichten und dann Gulp Flatmap.

125
00:10:20,315 --> 00:10:24,390
Sie werden den Grund dafür sehen, wie wir-

126
00:10:26,270 --> 00:10:31,720
Wir richten unsere usemin Aufgabe, so,

127
00:10:31,720 --> 00:10:40,470
und gulp-html min und wir gehen weiter und installieren diese Module hier.

128
00:10:40,470 --> 00:10:43,070
Sobald die Module installiert sind,

129
00:10:43,070 --> 00:10:50,555
lassen Sie uns fortfahren und benötigen diese Module in unserer gulpfile und richten Sie dann die Usemin-Aufgabe ein.

130
00:10:50,555 --> 00:10:54,620
Wenn ich zu unserem gulpfile direkt an der Spitze gehe,

131
00:10:54,620 --> 00:10:59,920
werde ich die Module benötigen, die ich gerade installiert habe.

132
00:10:59,920 --> 00:11:08,200
Also, der hässliche Schluck hässlich.

133
00:11:08,200 --> 00:11:11,820
Also die hässliche Aufgabe dann

134
00:11:11,820 --> 00:11:19,590
die usemin Aufgabe Schluck usemin,

135
00:11:19,590 --> 00:11:21,970
dann danach hat

136
00:11:21,970 --> 00:11:32,850
die rev dann,

137
00:11:33,440 --> 00:11:38,620
dort vergessen, Komma dort.

138
00:11:38,620 --> 00:11:46,775
Seien Sie sehr vorsichtig, diese Kommas dort nicht zu verpassen.

139
00:11:46,775 --> 00:12:08,789
Benötigen Sie also gulp clean-css, dann flatmap und htmlmin.

140
00:12:08,789 --> 00:12:18,360
Das sind also die Schluckmodule,

141
00:12:18,360 --> 00:12:19,970
die wir installiert haben,

142
00:12:19,970 --> 00:12:24,580
also speichern wir die Änderungen und dann gehen wir nach unten und richten die Usemin-Aufgabe ein. Wenn ich

143
00:12:24,580 --> 00:12:28,155
an den Boden der gulpfile

144
00:12:28,155 --> 00:12:34,405
komme, werde ich dort die usemin-Aufgabe einrichten.

145
00:12:34,405 --> 00:12:36,940
Also, was macht die Usemin-Aufgabe?

146
00:12:36,940 --> 00:12:43,040
Die Usemin-Aufgabe nimmt also

147
00:12:43,040 --> 00:12:50,640
die htmlfiles und sucht dann die CSS- und JavaScript-Blöcke in den htmlfiles

148
00:12:50,640 --> 00:12:55,610
, kombiniert, verkettet und minifiziert und nuglifiziert die Dateien und

149
00:12:55,610 --> 00:13:01,325
ersetzt sie dann mithilfe der verketteten Datei im Distributionsordner.

150
00:13:01,325 --> 00:13:02,965
Um loszulegen,

151
00:13:02,965 --> 00:13:10,460
würde ich zuerst mit der Angabe der Schluckquelle beginnen.

152
00:13:10,460 --> 00:13:12,455
Also, wo sind die Quelldateien?

153
00:13:12,455 --> 00:13:17,090
Die Quelldateien sind also die htmlfiles im aktuellen Ordner.

154
00:13:17,090 --> 00:13:24,830
So schlucken. /start.html, dann werde ich

155
00:13:24,830 --> 00:13:32,990
diese gulpfiles durch dieses Schluckmodul, das als flatmap genannt wird, pippen.

156
00:13:32,990 --> 00:13:34,535
Was macht flatmap?

157
00:13:34,535 --> 00:13:37,980
Flatmap nimmt diese mehrere htmlfiles und

158
00:13:37,980 --> 00:13:42,415
startet dann parallele Pipelines für jede dieser htmlfiles.

159
00:13:42,415 --> 00:13:46,295
Jeder von ihnen durchläuft den gleichen Satz von Schritten und dann schließlich,

160
00:13:46,295 --> 00:13:49,550
konvergieren und kopieren Sie es in den Zielordner.

161
00:13:49,550 --> 00:13:52,560
Wie Sie in unserem aktuellen Ordner sehen können,

162
00:13:52,560 --> 00:13:57,095
haben wir contactus.html, aboutus.html und index.html.

163
00:13:57,095 --> 00:14:00,020
Alle drei von ihnen müssen verarbeitet werden.

164
00:14:00,020 --> 00:14:04,465
Also, die Flatmap ermöglicht es uns, diese parallel

165
00:14:04,465 --> 00:14:10,280
zu verarbeiten und den gleichen Satz Pipe für jede dieser Dateien

166
00:14:10,280 --> 00:14:12,910
zu starten, also verwende ich die Flatmap dort.

167
00:14:12,910 --> 00:14:20,650
Also, flatmap, und dann innerhalb der Flatmap muss ich die Funktion,

168
00:14:20,650 --> 00:14:25,315
die beiden Parameter angeben; stream, file.

169
00:14:25,315 --> 00:14:32,590
Also, die Datei nimmt grundsätzlich jede dieser Quelldateien, die wir dort angegeben haben,

170
00:14:32,590 --> 00:14:39,550
und behandelt sie dann mit den gleichen Satz von Funktionen hier

171
00:14:39,550 --> 00:14:43,460
und startet dann ihren separaten Stream für jeden von ihnen.

172
00:14:43,460 --> 00:14:48,585
Also, ich werde Stream zurückgeben,

173
00:14:48,585 --> 00:14:52,990
und dann werde ich jede von ihnen

174
00:14:53,070 --> 00:15:00,930
durch die Usemin-Aufgabe leiten, die selbst

175
00:15:00,930 --> 00:15:08,240
aus der CSS

176
00:15:09,630 --> 00:15:14,470
und hässlichen JavaScript- und HTML-Aufgabe besteht.

177
00:15:14,470 --> 00:15:20,965
Also für das CSS werde ich den Revisionsteil durchführen.

178
00:15:20,965 --> 00:15:26,220
Also wird der css-Teil offensichtlich die Verkettung und Minifizierung machen und so weiter,

179
00:15:26,220 --> 00:15:29,520
und wendet dann die rev darauf an, so dass es

180
00:15:29,520 --> 00:15:34,930
diese 20-Bit-Zeichenfolge in die Datei main.css dort wirkt.

181
00:15:34,930 --> 00:15:36,905
Also für CSS habe ich das eingerichtet,

182
00:15:36,905 --> 00:15:39,440
und dann für HTML,

183
00:15:39,440 --> 00:15:42,890
weil ich mehrere HTML-Dateien

184
00:15:42,890 --> 00:15:45,745
habe, muss ich dies als eine Funktion angeben,

185
00:15:45,745 --> 00:15:55,540
und innerhalb dieser Funktion würde ich sagen, dass ich htmlmin zurückgibt.

186
00:15:55,570 --> 00:16:05,660
Und dann werde ich ihm den Parameter CollapseWhitespace geben,

187
00:16:05,660 --> 00:16:11,955
und dieser Parameter würde auf true gesetzt werden.

188
00:16:11,955 --> 00:16:18,630
Und so vervollständigt dies im Wesentlichen den HTML-Teil.

189
00:16:18,630 --> 00:16:24,970
Und dann ist der nächste der js-Teil davon,

190
00:16:24,970 --> 00:16:26,160
der JavaScript-Teil

191
00:16:26,160 --> 00:16:35,105
davon, den ich das hässliche und dann die Revision dafür machen muss.

192
00:16:35,105 --> 00:16:44,060
Und dann, wenn ich einen

193
00:16:44,060 --> 00:16:48,355
Inline-Javascript-Code habe, muss ich

194
00:16:48,355 --> 00:16:54,580
die hässliche Aufgabe dafür anwenden,

195
00:16:54,580 --> 00:16:57,435
und dann

196
00:16:57,435 --> 00:17:06,640
werde ich für den Inlinecss-Code die CleanCSS-Aufgabe dort mit concat als Parameter verwenden.

197
00:17:06,640 --> 00:17:09,880
Damit habe ich meine Usemin-Aufgabe eingerichtet.

198
00:17:09,880 --> 00:17:13,950
So wird es für all diese verschiedenen Aktionen in meinem Namen gerecht werden.

199
00:17:13,950 --> 00:17:17,010
Und wenn sie schließlich fertig sind,

200
00:17:17,010 --> 00:17:22,420
werden die resultierenden Streams

201
00:17:22,420 --> 00:17:29,845
an den Distributionsordner weitergeleitet.

202
00:17:29,845 --> 00:17:34,290
Damit ist die Usemin-Aufgabe jetzt alles Setup gesetzt.

203
00:17:34,290 --> 00:17:36,295
Lassen Sie mich die Änderungen speichern.

204
00:17:36,295 --> 00:17:41,900
Und dann werde ich zur Build-Aufgabe gehen und dann nach dem Imagemin werde ich auch

205
00:17:41,900 --> 00:17:47,955
usemin als eine der Aufgaben hinzufügen, die von der Build-Aufgabe ausgeführt werden sollen.

206
00:17:47,955 --> 00:17:50,410
Also, mit diesen Änderungen, also

207
00:17:50,410 --> 00:17:52,945
haben wir die Build-Aufgabe geändert,

208
00:17:52,945 --> 00:18:00,720
lassen Sie uns fortfahren und dann überprüfen, ob der Distributionsordner korrekt erstellt wurde oder nicht.

209
00:18:00,720 --> 00:18:04,315
Gehen Sie zur Eingabeaufforderung, lassen Sie mich Schluck

210
00:18:04,315 --> 00:18:10,065
Build eingeben und dann warten, bis Schluck all die verschiedenen Aufgaben aufbaut.

211
00:18:10,065 --> 00:18:13,585
Es wird ein wenig Zeit dauern, bis der Usemin seine Arbeit abgeschlossen hat,

212
00:18:13,585 --> 00:18:18,265
und wenn die Transformation abgeschlossen ist,

213
00:18:18,265 --> 00:18:22,875
sollte mein Distributionsordner jetzt für die Anzeige bereit sein. Wenn Sie

214
00:18:22,875 --> 00:18:28,260
zum Editor gehen, können Sie jetzt sehen, dass der Distributionsordner

215
00:18:28,260 --> 00:18:34,345
hier vorbereitet wurde und Sie können den Index, contactus und aboutus.htmlfile sehen.

216
00:18:34,345 --> 00:18:37,470
Sie können sehen, dass, wenn Sie die index.html-Datei öffnen,

217
00:18:37,470 --> 00:18:39,365
sie komprimiert wurde.

218
00:18:39,365 --> 00:18:42,605
Und das htmlmin wurde getan,

219
00:18:42,605 --> 00:18:46,515
insbesondere beachten Sie, wie die CSS-Datei durch

220
00:18:46,515 --> 00:18:54,300
css/main- ersetzt wurde und dann sehen Sie eine lange Zeichenfolge there.css.

221
00:18:54,300 --> 00:19:04,300
Das ist also genau wie die Dateirev, die Sie in grunt mit dem Schluckrev-Modul gesehen haben,

222
00:19:04,300 --> 00:19:06,960
das ist, was es mit dem Namen der Datei tut.

223
00:19:06,960 --> 00:19:11,350
Wenn Sie sich also das CSS ansehen, können Sie sehen, dass der Name der Datei Hauptstrich ist und

224
00:19:11,350 --> 00:19:16,470
dann eine Zeichenfolge dort dot css und ähnlich für die javascriptdatei.

225
00:19:16,470 --> 00:19:20,345
Also, das ist, was das Gulp Rev Modul tut,

226
00:19:20,345 --> 00:19:22,505
und dann sind alle diese drei Dateien vorbereitet.

227
00:19:22,505 --> 00:19:26,850
Werfen wir einen Blick auf diese Dateien im Browser. Wenn ich

228
00:19:26,850 --> 00:19:33,195
zum Browser gehe, kann ich sehen, dass dort Quelldateien korrekt gespeichert werden.

229
00:19:33,195 --> 00:19:36,190
Lassen Sie mich den Distributionsordner überprüfen.

230
00:19:36,190 --> 00:19:42,350
Im Distributionsordner

231
00:19:42,350 --> 00:19:47,925
scheint die index.html, die von der Gulp-Build-Aufgabe vorbereitet wurde, korrekt zu funktionieren.

232
00:19:47,925 --> 00:19:51,560
Lassen Sie mich auch die Info Seite überprüfen,

233
00:19:51,560 --> 00:19:55,435
und wir können sehen, dass über Seite auch korrekt gebaut wird,

234
00:19:55,435 --> 00:19:58,680
und auch die Kontaktseite.

235
00:19:58,680 --> 00:20:04,075
So können Sie jetzt sehen, dass unsere Schluckaufgabe abgeschlossen ist.

236
00:20:04,075 --> 00:20:07,105
Damit schließen wir diese Übung ab.

237
00:20:07,105 --> 00:20:11,430
In dieser Übung richten wir die Säuberung und das

238
00:20:11,430 --> 00:20:15,780
Kopieren der Schriftartdateien

239
00:20:15,780 --> 00:20:18,530
in unseren Distributionsordner ein, wir haben die Imagemin-Aufgabe durchgeführt und schließlich haben wir

240
00:20:18,530 --> 00:20:22,865
die Usemin-Aufgabe eingerichtet, um unseren Distributionsordner aufzubauen.

241
00:20:22,865 --> 00:20:26,140
Damit schließen wir diese Übung ab.

242
00:20:26,140 --> 00:20:33,770
Dies kann ein guter Zeitpunkt für Sie, einen guten Kommentar mit der Nachricht Gulp Teil zwei zu tun.