1
00:00:03,060 --> 00:00:06,095
Jetzt, wo wir genug gewährt haben,

2
00:00:06,095 --> 00:00:08,700
ist es Zeit, Gulp.

3
00:00:08,700 --> 00:00:12,010
Wir werden versuchen, die gleichen

4
00:00:12,010 --> 00:00:16,235
Aufgaben auszuführen, die wir sowohl mit NPM-Skripten als auch mit Grunt durchgeführt haben,

5
00:00:16,235 --> 00:00:22,995
aber jetzt werden wir versuchen, dasselbe mit Gulp- und Gulp-Plug-Ins zu tun.

6
00:00:22,995 --> 00:00:29,090
Um zu beginnen, lassen Sie uns zuerst Gulp als globales Modul installieren.

7
00:00:29,090 --> 00:00:31,635
Um dies zu tun, geben Sie an der

8
00:00:31,635 --> 00:00:37,970
Eingabeaufforderung npm -g install gulp

9
00:00:38,740 --> 00:00:42,380
ein, dies wird Gulp als globales Modul installieren und

10
00:00:42,380 --> 00:00:45,625
es für die Verwendung in der Befehlszeile zur Verfügung stellen.

11
00:00:45,625 --> 00:00:47,605
Nachdem wir dies abgeschlossen haben, besteht

12
00:00:47,605 --> 00:00:51,425
der nächste Schritt darin, Gulp lokal in unserem Projekt zu installieren. Geben

13
00:00:51,425 --> 00:00:53,975
Sie dazu an der

14
00:00:53,975 --> 00:01:01,700
Eingabeaufforderung npm install gulp —save-dev ein.

15
00:01:01,700 --> 00:01:03,835
Sobald wir diese beiden abgeschlossen haben,

16
00:01:03,835 --> 00:01:10,765
ist es an der Zeit, unsere Gulp-Aufgaben zu konfigurieren.

17
00:01:10,765 --> 00:01:14,195
Bevor wir das tun, in unserem nächsten Schritt,

18
00:01:14,195 --> 00:01:18,170
werden wir das Gulp Sass Plug-in installieren, so dass wir

19
00:01:18,170 --> 00:01:23,560
die Sass konfigurieren können, um als Konvertierungsaufgabe in unserer Gulp Datei zu sehen.

20
00:01:23,560 --> 00:01:26,460
Also, um das zu tun,

21
00:01:26,460 --> 00:01:30,580
geben Sie npm install

22
00:01:31,420 --> 00:01:39,100
gulp sass —save-dev ein.

23
00:01:40,270 --> 00:01:43,835
Auch während wir dabei sind,

24
00:01:43,835 --> 00:01:48,305
könnten wir ebenso gut die Browser Sync Gulp Task installieren,

25
00:01:48,305 --> 00:01:53,835
so dass wir beide diese nacheinander konfigurieren können.

26
00:01:53,835 --> 00:02:07,960
Also, ich werde installieren, npm installieren browser-sync —save-dev.

27
00:02:08,830 --> 00:02:11,480
Sobald diese beiden installiert sind,

28
00:02:11,480 --> 00:02:17,980
dann lassen Sie uns voran und erstellen Sie unsere Gulp Datei und konfigurieren Sie dann unsere Gulp Tasks hier.

29
00:02:17,980 --> 00:02:20,590
Gehen Sie zu unserem Projektordner,

30
00:02:20,590 --> 00:02:27,905
lassen Sie uns eine neue Datei erstellen und dann nennen Sie es gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
und in dieser Datei werden wir unsere Gulp Tasks konfigurieren.

32
00:02:32,380 --> 00:02:34,950
Also, sobald die gulpfile.js bereit ist,

33
00:02:34,950 --> 00:02:39,940
konfigurieren Sie die Gulp Tasks hier, indem Sie zuerst

34
00:02:39,940 --> 00:02:50,310
mit „use strict“ und dann var gulp beginnen.

35
00:02:50,310 --> 00:02:57,585
Also müssen wir die Gulp-Knoten-Module benötigen,

36
00:02:57,585 --> 00:02:59,810
und auch während wir dabei sind,

37
00:02:59,810 --> 00:03:07,600
benötigen wir das Sass-Knoten-Modul.

38
00:03:12,470 --> 00:03:16,310
Wie ich in der vorherigen Übung erwähnt habe,

39
00:03:16,310 --> 00:03:22,110
wird es Ihnen klarer, warum der Code so geschrieben wird,

40
00:03:22,110 --> 00:03:30,245
wenn Sie mehr über Knotenmodule in einem späteren Kurs verstehen.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, was wir getan haben, ist, die Gulp

42
00:03:35,535 --> 00:03:40,895
Contrast und BowserSync Knotenmodule in unsere Gulp Datei aufzunehmen.

43
00:03:40,895 --> 00:03:42,545
Und wenn Sie das getan haben,

44
00:03:42,545 --> 00:03:45,360
ist es an der Zeit, unsere Gulp Tasks zu konfigurieren.

45
00:03:45,360 --> 00:03:47,940
Wie wir zuvor gelernt haben,

46
00:03:47,940 --> 00:03:52,340
ist Gulp eine code-basierte Art und Weise der Konfiguration von

47
00:03:52,340 --> 00:03:57,815
Aufgaben im Gegensatz zu Grunt, die mehr auf die Konfiguration der Aufgaben angewiesen ist.

48
00:03:57,815 --> 00:04:00,455
Also, im Falle von Gulp,

49
00:04:00,455 --> 00:04:04,230
wird das Baby unsere Aufgaben einrichten, um

50
00:04:04,230 --> 00:04:13,545
gulp.task einzugeben, und dann lassen Sie uns einen Task-Namen „sass“

51
00:04:13,545 --> 00:04:17,630
einrichten, und dann für diese Aufgabe werden wir dies als eine Funktion einrichten,

52
00:04:19,990 --> 00:04:23,205
und so wird der Code vorbereitet.

53
00:04:23,205 --> 00:04:28,850
Also, Gulp Tasks Sass Funktion und hier,

54
00:04:28,850 --> 00:04:32,310
wir richten die Gulp Tasks ein,

55
00:04:34,850 --> 00:04:45,030
also geben wir return gulp.src ('. /css/ *.scss') Wie wir gelernt haben,

56
00:04:45,030 --> 00:05:00,800
ist Gulp ein tool-basiertes um Code über Konfiguration.

57
00:05:00,800 --> 00:05:06,630
Also bereiten wir diese Aufgabe als solche vor.

58
00:05:06,630 --> 00:05:14,390
Also, Sie sehen, dass wir Gulp Source Pipe sass auf angegeben haben,

59
00:05:14,390 --> 00:05:18,630
und dann hier, Fehler.

60
00:05:19,220 --> 00:05:22,600
Wenn also ein Fehler auftritt,

61
00:05:24,020 --> 00:05:31,870
verwenden wir die Sass-Methode, um den Fehler zu protokollieren und diesen dann

62
00:05:31,870 --> 00:05:43,480
durch gulp.dest ('. /css '), und das

63
00:05:52,970 --> 00:05:59,270
schließt die Konfiguration der Gulp Sass Tasks ab.

64
00:05:59,270 --> 00:06:03,540
Sie müssen sich fragen, warum wir den Code so schreiben.

65
00:06:03,540 --> 00:06:06,960
Es sagt Schluck Quelle und dann etwas dort angeben,

66
00:06:06,960 --> 00:06:10,650
und dann sagt der nächste Rohr und dann sagt der nächste Rohr.

67
00:06:10,650 --> 00:06:16,045
Lassen Sie uns die Gulp Art verstehen, Dinge etwas detaillierter zu tun.

68
00:06:16,045 --> 00:06:19,855
Um zu erklären, warum wir Tasks so konfigurieren,

69
00:06:19,855 --> 00:06:24,730
habe ich eine Erklärung dessen, was wir Gulp Streams nennen.

70
00:06:24,730 --> 00:06:29,900
Die Art, wie Gulp funktioniert, ist wie Sie eine Reihe von Dateien nehmen und Sie die Menge von

71
00:06:29,900 --> 00:06:35,405
Dateien angeben, indem Sie Gulp Quelle sagen, wie wir es mit den Sass Tasks dort getan haben.

72
00:06:35,405 --> 00:06:39,005
Also, hier ist dies die Funktion, die die Dateien nimmt.

73
00:06:39,005 --> 00:06:44,405
Sie könnten sogar die Dateien mit den Globbing-Mustern angeben, die wir in Grunt gelernt haben,

74
00:06:44,405 --> 00:06:49,410
und dann erstellt es einen Strom von Objekten, die diese Dateien darstellen.

75
00:06:49,410 --> 00:06:51,560
Jetzt, sobald der Stream erstellt wurde

76
00:06:51,560 --> 00:06:54,480
, kann der Stream durch eine Reihe von

77
00:06:54,480 --> 00:06:58,795
Funktionen nacheinander geleitet werden, um diese Dateien zu transformieren.

78
00:06:58,795 --> 00:07:07,400
Und schließlich können die resultierenden transformierten Dateien an einem Zielort abgelegt werden.

79
00:07:07,400 --> 00:07:09,795
Deshalb geben wir Gulp Quelle an,

80
00:07:09,795 --> 00:07:11,585
dann geben wir Pipe an.

81
00:07:11,585 --> 00:07:15,945
Also, das Rohr erlaubt den Strom durch eine Funktion geleitet werden,

82
00:07:15,945 --> 00:07:18,295
und so, das ist, warum wir dot-pipe gesagt,

83
00:07:18,295 --> 00:07:20,600
und dann sagten wir Schluck.

84
00:07:20,600 --> 00:07:23,965
Und dann sagten wir Sass auf Irrtum.

85
00:07:23,965 --> 00:07:30,255
Und dann sagt der nächste Pipe Gulp Dest.

86
00:07:30,255 --> 00:07:35,950
Und so gibt der gulp dest das Ziel der Dateien an, die verarbeitet wurden.

87
00:07:35,950 --> 00:07:43,860
So wird eine typische Aufgabe in Schluck angegeben, weil aber Schluck auf Streams arbeitet.

88
00:07:43,860 --> 00:07:48,875
Also, Ihre Stream-Dateien durch die Pipes, bis sie

89
00:07:48,875 --> 00:07:54,805
übertragen werden und dann werden sie am angegebenen Ziel hinterlegt werden.

90
00:07:54,805 --> 00:07:59,610
So werden Sie eine ähnliche Struktur für viele der Schluckaufgaben sehen, die wir

91
00:07:59,610 --> 00:08:04,740
in dieser Übung und in der nächsten Übung konfigurieren würden.

92
00:08:04,740 --> 00:08:11,460
Jetzt, da Sie ein wenig darüber verstanden haben, wie Schluck mit Streams funktioniert und wie

93
00:08:11,460 --> 00:08:21,005
die Schluckaufgabe die Pipe verwendet, um Dateien über eine Reihe von Funktionen zu verarbeiten,

94
00:08:21,005 --> 00:08:28,290
und es wird Ihnen klarer, warum wir diese sass-Aufgabe einrichten, wie in diesem Code hier zu sehen.

95
00:08:28,290 --> 00:08:33,260
Die nächste Aufgabe, die wir konfigurieren werden, heißt Schluck,

96
00:08:33,340 --> 00:08:39,900
und wir werden diese Aufgabe als Sass Watch konfigurieren.

97
00:08:39,900 --> 00:08:42,700
Also, dies ist eine Watch-Aufgabe, die wir konfigurieren werden,

98
00:08:42,700 --> 00:08:48,920
und dann würden Sie Funktion angeben.

99
00:08:49,190 --> 00:08:51,330
Und so hier drin,

100
00:08:51,330 --> 00:08:53,320
die Schlucksass-Watch-Aufgabe,

101
00:08:53,320 --> 00:08:58,490
was wir tun, ist, die Dateien zu spezifizieren, die wir beobachten werden.

102
00:08:58,490 --> 00:09:05,600
Also verwenden wir die Gick-Watch-Aufgabe, um die Datei zu beobachten.

103
00:09:05,600 --> 00:09:08,830
Also, die Uhr ist bereits in Schluck eingebaut.

104
00:09:08,830 --> 00:09:17,660
Also, es wird Gulp Watch nehmen und dann geben wir die Dateien dort *.SCSS.

105
00:09:17,660 --> 00:09:21,390
Also, wie Sie sehen können, wird die Gulp Watch

106
00:09:21,390 --> 00:09:25,915
diese Dateien beobachten und dann, wenn Änderungen an diesen Dateien auftreten,

107
00:09:25,915 --> 00:09:30,225
dann wird es diese Sass-Task ausführen,

108
00:09:30,225 --> 00:09:32,975
die wir zuvor angegeben haben.

109
00:09:32,975 --> 00:09:37,360
Also, so ist diese Sass-Watch-Aufgabe eingerichtet.

110
00:09:37,360 --> 00:09:39,495
Nun, da wir diese beiden getan haben,

111
00:09:39,495 --> 00:09:42,730
lassen Sie uns die Browser-Synchronisierungsaufgabe als nächstes einrichten.

112
00:09:42,730 --> 00:09:47,650
Schließen Sie das also mit dem Semikolon und dann

113
00:09:47,650 --> 00:09:53,375
ist die nächste Aufgabe, die wir einrichten werden, die Browser-Synchronisierungsaufgabe.

114
00:09:53,375 --> 00:10:01,735
Also werde ich dort Browser-Synchronisierungsaufgabe angeben.

115
00:10:01,735 --> 00:10:04,550
Und dann

116
00:10:04,550 --> 00:10:07,480
werde ich für die Browser-Synchronisierungsaufgabe diese Funktion angeben.

117
00:10:07,480 --> 00:10:11,725
Notieren Sie sich erneut die Struktur, in der wir den Code schreiben,

118
00:10:11,725 --> 00:10:16,405
schlucken Aufgabe und dann geben Sie etwas an, das gefolgt ist, aber mit einer Funktion.

119
00:10:16,405 --> 00:10:17,990
Wie gesagt,

120
00:10:17,990 --> 00:10:23,155
lernen wir Knotenmodule im letzten Kurs dieser Spezialisierung,

121
00:10:23,155 --> 00:10:28,520
es wird Ihnen klarer, warum nicht Module mit dieser Struktur geschrieben werden,

122
00:10:28,520 --> 00:10:31,790
und warum die Funktionen so geschrieben werden.

123
00:10:31,790 --> 00:10:34,470
Also, wir sagen Schluck Aufgabe Browser-Synchronisierung.

124
00:10:34,470 --> 00:10:38,260
Hier werde ich eine Variable definieren,

125
00:10:38,260 --> 00:10:40,920
eine JavaScript-Variable namens Dateien,

126
00:10:40,920 --> 00:10:45,050
die nichts anderes als im Array ist,

127
00:10:45,160 --> 00:10:55,935
und dass ich innerhalb dieses Dateiarrays alle Dateien angeben würde, die

128
00:10:55,935 --> 00:10:58,790
bei einer Änderung die Browser-Synchronisierung

129
00:10:58,790 --> 00:11:07,125
das Neuladen oder die Datei verursachen muss.

130
00:11:07,125 --> 00:11:12,690
Also, HTML-Dateien, die CSS-Dateien im CSS-Ordner,

131
00:11:12,690 --> 00:11:18,420
und dann werde ich auch die Bilddateien

132
00:11:26,080 --> 00:11:31,960
und die JavaScript-Dateien beobachten.

133
00:11:33,840 --> 00:11:36,730
Alle diese Dateien, wenn sich eine von ihnen ändert.

134
00:11:36,730 --> 00:11:40,800
Also, danach werde ich hier die Browser-Synchronisierung konfigurieren.

135
00:11:40,800 --> 00:11:44,315
Also, ich werde sagen, Browser-Synchronisierung.

136
00:11:44,315 --> 00:11:49,010
Wir haben diese Variable bereits definiert, die Browser-Synchronisierung genannt wurde.

137
00:11:49,010 --> 00:11:54,400
Also, wir müssen die Browser-Synchronisierung initialisieren

138
00:11:56,230 --> 00:12:01,805
, und so

139
00:12:01,805 --> 00:12:08,895
ist der erste Parameter dazu die Dateien, die überwacht werden müssen,

140
00:12:08,895 --> 00:12:18,160
und dann gibt der zweite Parameter die Optionen an, die wir dem Browser geben.

141
00:12:18,160 --> 00:12:21,720
Die Option, die ich angebe, ist also für den Server.

142
00:12:21,720 --> 00:12:31,350
Ich werde das Basisverzeichnis als das aktuelle Verzeichnis angeben,

143
00:12:31,350 --> 00:12:38,595
und dann schließt das die Spezifikation der Browser-Synchronisierungsaufgabe ab.

144
00:12:38,595 --> 00:12:43,280
Damit haben wir die Angabe der Browser-Synchronisierungsaufgabe hier abgeschlossen.

145
00:12:43,280 --> 00:12:46,750
So können Sie sehen, dass, wie wir Browser-Synchronisierungs-Task konfiguriert

146
00:12:46,750 --> 00:12:48,480
haben, haben wir die Dateien angegeben und speichern Sie dann

147
00:12:48,480 --> 00:12:51,750
Browser-Synchronisierung darin und liefern die Dateien als ersten Parameter.

148
00:12:51,750 --> 00:12:58,940
Der zweite Parameter sind die Optionen für das Browser-Synchronisations-Plugin.

149
00:12:58,940 --> 00:13:02,620
Dann schließlich werden wir planen oder

150
00:13:02,620 --> 00:13:10,680
wir konfigurieren die Aufgabe Standard genannt.

151
00:13:10,680 --> 00:13:17,005
Genau wie ich die Standardaufgabe in Grunt

152
00:13:17,005 --> 00:13:23,475
habe, können wir auch eine ähnliche Standardaufgabe für Schluck definieren.

153
00:13:23,475 --> 00:13:28,095
Also, hier sagen wir Gulp Aufgabe Standard-Browser-Synchronisierung,

154
00:13:28,095 --> 00:13:33,275
und geben Sie dann Funktion.

155
00:13:33,275 --> 00:13:42,085
Und da drinnen werden wir Schluckstart angeben.

156
00:13:42,085 --> 00:13:46,185
Also, dies gibt an, dass ich

157
00:13:46,185 --> 00:13:54,730
diese andere Aufgabe starten sollte, die sass watch Aufgabe. Die sass watch Aufgabe muss gestartet werden.

158
00:13:54,840 --> 00:14:00,370
Stellen Sie sicher, dass der Browser-Synchronisierungs-Task ausgeführt wird, bevor der Sass-Watch-Task gestartet wird.

159
00:14:00,370 --> 00:14:04,060
Dies ist also die Syntax, um dies in Gulp anzugeben.

160
00:14:04,060 --> 00:14:08,095
Also, mit diesem haben wir alles konfiguriert, was wir brauchen, in Gulp-Datei.

161
00:14:08,095 --> 00:14:09,870
Also, wieder zurück zu gehen,

162
00:14:09,870 --> 00:14:11,675
gibt es Schritte, die wir getan haben.

163
00:14:11,675 --> 00:14:17,460
Wir haben zuerst benötigt, um alle ihre Schluck-Plugins dort einzuschließen,

164
00:14:17,460 --> 00:14:22,575
dann haben wir die Sass-Task konfiguriert

165
00:14:22,575 --> 00:14:25,455
und dann Sass-Watch-Aufgabe angegeben.

166
00:14:25,455 --> 00:14:31,995
Hier benutzen wir die Schluckuhr, die uns wie von Schluck zur Verfügung steht.

167
00:14:31,995 --> 00:14:37,290
Dann haben wir die Browser-Synchronisierungsaufgabe festgelegt und dann schließlich

168
00:14:37,290 --> 00:14:43,150
die Standardaufgabe mit dem Browser Sync und dem Schluckstart mit Sass Watch neu geplant.

169
00:14:43,150 --> 00:14:45,705
Nun, lassen Sie uns die Änderungen sehen,

170
00:14:45,705 --> 00:14:49,875
und dann gehen wir vor und führen Sie die Schluck-Datei hinzufügen,

171
00:14:49,875 --> 00:14:52,255
und die Eingabeaufforderung Typ gulp.

172
00:14:52,255 --> 00:14:59,780
Sie werden sehen, dass Schluck mit der Browser-Synchronisierung beginnt und die Sass-Watch-Aufgabe gestartet wird,

173
00:14:59,780 --> 00:15:06,565
und dann wird Ihre Browser-Synchronisierung beginnen, die Dateien zu servieren.

174
00:15:06,565 --> 00:15:12,770
Wenn Sie Ihre Website über einen Browser aufrufen,

175
00:15:12,770 --> 00:15:17,425
können Sie sehen, dass die Website im Browser bereitgestellt wird.

176
00:15:17,425 --> 00:15:23,090
Lassen Sie mich auch die Funktionsweise der Uhraufgabe erläutern.

177
00:15:23,090 --> 00:15:26,795
Also, ich werde die style.css hochziehen und

178
00:15:26,795 --> 00:15:31,185
nur versuchen, die Änderung zu speichern, und Sie werden feststellen, dass auf der linken Seite

179
00:15:31,185 --> 00:15:36,850
die Sass-Aufgabe sofort aufgerufen

180
00:15:36,850 --> 00:15:44,460
wird und die style.scss-Datei in die CSS-Dateien neu kompilieren wird.

181
00:15:44,460 --> 00:15:48,840
Und dann wird dieser Browser an dieser Stelle neu geladen.

182
00:15:48,840 --> 00:15:54,085
Damit schließen wir den ersten Teil der Schluckübung ab.

183
00:15:54,085 --> 00:15:58,710
Im zweiten Teil bereiten wir den Distributionsordner vor.

184
00:15:58,710 --> 00:16:05,030
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht Gulp Teil 1 zu machen.