1
00:00:03,550 --> 00:00:06,380
Zeit, Grunting zu starten.

2
00:00:06,380 --> 00:00:10,280
In dieser und der nächsten Übung wiederholen wir

3
00:00:10,280 --> 00:00:15,925
die gleiche Art von Setup wie bei den NPM-Skripten.

4
00:00:15,925 --> 00:00:22,405
Im ersten Teil werden wir die Konvertierung von SCSS in CSS einrichten.

5
00:00:22,405 --> 00:00:28,570
Dann richten wir eine Watch-Aufgabe ein und dienen auch den Code mit Browser-Synchronisierung.

6
00:00:28,570 --> 00:00:31,065
Im zweiten Teil der Übung

7
00:00:31,065 --> 00:00:40,010
werden wir Usman und die verschiedenen Aufgaben nutzen, um die Verteilungsfalte vorzubereiten.

8
00:00:40,010 --> 00:00:44,170
Diese Übungen sind keineswegs die einzige Möglichkeit,

9
00:00:44,170 --> 00:00:49,720
Grunt-Konfigurationen oder Aufrufdateien zu implementieren.

10
00:00:49,720 --> 00:00:54,575
Dies ist nur ein Beispiel dafür, wie wir diese Werkzeuge nutzen können.

11
00:00:54,575 --> 00:00:58,375
Vielleicht möchten Sie Ihre eigene Art und Weise finden, Ihre

12
00:00:58,375 --> 00:01:03,320
Grunt-Datei und Ihre Anrufdatei für Ihre Projekte einzurichten.

13
00:01:03,320 --> 00:01:13,200
Unser erster Schritt bei der Nutzung von Grunt besteht darin, die Grunt CLI als globales NPM-Modul einzurichten.

14
00:01:13,200 --> 00:01:21,550
Fügen Sie dazu den Eingabeaufforderungstyp hinzu: NPM -g install Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Dies ist die Befehlszeilenschnittstelle für Grunt.

16
00:01:25,190 --> 00:01:27,480
Sobald dies eingerichtet ist,

17
00:01:27,480 --> 00:01:34,690
werden wir ein lokales Grunt NPM-Modul für die Verwendung in unseren Projekten einrichten.

18
00:01:34,690 --> 00:01:38,370
Die Grunt CLI ermöglicht es uns, Grunt zu nutzen.

19
00:01:38,370 --> 00:01:40,050
Wir haben die Grunt CLI eingerichtet.

20
00:01:40,050 --> 00:01:47,405
Dann ist der nächste Schritt einzurichten- Grunt lokal,

21
00:01:47,405 --> 00:01:52,655
also; NPM installieren Grunt minus minus Dev speichern.

22
00:01:52,655 --> 00:01:56,365
Installieren Sie dann das Grunt lokal.

23
00:01:56,365 --> 00:01:58,930
Sobald Sie diese beiden Schritte abgeschlossen haben,

24
00:01:58,930 --> 00:02:04,850
gehen Sie im nächsten Schritt zu unserem Projekt und erstellen Sie dann eine neue Datei,

25
00:02:04,850 --> 00:02:10,165
und wir werden es als Gruntfile.js nennen.

26
00:02:10,165 --> 00:02:19,034
In dieser Gruntfile.js richten wir den Code für die Konfiguration unserer Grunt-Aufgaben ein.

27
00:02:19,034 --> 00:02:27,770
In dieser Datei besteht der erste Schritt darin, „use strict“ Bedeutung,

28
00:02:27,770 --> 00:02:30,640
„use strict“ JavaScript-Code hinzuzufügen.

29
00:02:30,640 --> 00:02:36,460
Dann sagen Sie module.exports

30
00:02:37,050 --> 00:02:42,830
= Funktion (grunt).

31
00:02:44,990 --> 00:02:53,005
Dann werden wir hier drinnen die Grunt-Konfiguration für alle Aufgaben einrichten.

32
00:02:53,005 --> 00:02:57,655
Wie ich bereits erwähnt habe, ist Grunt ein konfigurationsbasierter Task Runner.

33
00:02:57,655 --> 00:03:02,200
So installieren wir die verschiedenen Grunt-Plug-Ins für

34
00:03:02,200 --> 00:03:08,370
die verschiedenen Aufgaben und konfigurieren sie dann in unserer Grunt-Datei.

35
00:03:08,370 --> 00:03:10,769
Um die Konfiguration zu tun,

36
00:03:10,769 --> 00:03:12,605
werden wir in den Code hier hinzufügen,

37
00:03:12,605 --> 00:03:19,290
sagen: Grunt.initConfig

38
00:03:19,410 --> 00:03:28,655
und in diesem InitConfig,

39
00:03:28,655 --> 00:03:32,805
werden wir in der Konfiguration für die Grunt-Aufgaben des Rades hinzufügen.

40
00:03:32,805 --> 00:03:34,580
Sobald Sie dies abgeschlossen haben,

41
00:03:34,580 --> 00:03:37,145
speichern wir die Änderungen.

42
00:03:37,145 --> 00:03:39,385
In unserem nächsten Schritt

43
00:03:39,385 --> 00:03:47,610
werden wir einige Grunt-Plug-Ins einrichten, damit wir SCSS-Code in CSS-Code umwandeln können.

44
00:03:47,610 --> 00:03:54,240
Um dies zu tun, installiere ich ein NPM-Modul namens

45
00:03:54,240 --> 00:04:01,875
Grunt SASS — Grunt SASS, spare def.

46
00:04:01,875 --> 00:04:03,450
Darüber hinaus

47
00:04:03,450 --> 00:04:07,375
werde ich zwei weitere Grunt-Module einrichten, die

48
00:04:07,375 --> 00:04:18,610
NPM Install Time Grunt und Jit Grunt genannt werden.

49
00:04:19,990 --> 00:04:23,430
Diese beiden Module — Time Grunt und Jit grunt.

50
00:04:23,430 --> 00:04:31,190
Das Modul Time Grunt gibt die Zeitstatistiken für die Ausführung der verschiedenen Grunt-Aufgaben aus.

51
00:04:31,190 --> 00:04:35,150
Das Jit Grunt-Modul wird zum Laden

52
00:04:35,150 --> 00:04:40,420
dieser Grunt-Plug-Ins verwendet, wenn sie innerhalb einer Anwendung benötigt werden.

53
00:04:40,420 --> 00:04:42,860
Die andere Alternative besteht darin,

54
00:04:42,860 --> 00:04:49,475
die verschiedenen Grunt-Module explizit in Ihre Grunt-Konfigurationsdatei zu laden.

55
00:04:49,475 --> 00:04:53,085
Ich bevorzuge es, den Jit Grunt zu verwenden, damit er sich darum kümmert,

56
00:04:53,085 --> 00:04:56,790
welche Grunt-Plug-Ins ich brauche, wie es erforderlich ist,

57
00:04:56,790 --> 00:04:59,955
wie in, wenn ich sie im Code verwende.

58
00:04:59,955 --> 00:05:04,785
Installieren Sie diese beiden Time Grunt und Jit Grunt und sobald sie installiert sind,

59
00:05:04,785 --> 00:05:11,845
dann ist es Zeit, unsere SASS Konvertierungsaufgabe zu konfigurieren.

60
00:05:11,845 --> 00:05:14,870
Jetzt müssen Sie sich offensichtlich fragen, warum wir dieses

61
00:05:14,870 --> 00:05:18,250
module.exports eingeben und dann funktionieren und so weiter.

62
00:05:18,250 --> 00:05:21,485
So definieren wir Knotenmodule.

63
00:05:21,485 --> 00:05:26,590
Wir beschäftigen uns mit der Struktur von Knotenmodulen und warum wir diesen Ansatz

64
00:05:26,590 --> 00:05:33,375
im serverseitigen Knotenmodulen Kurs später in der Spezialisierung verwenden.

65
00:05:33,375 --> 00:05:38,415
Akzeptieren Sie im Moment einfach, dass so der Code für Grunt geschrieben wird,

66
00:05:38,415 --> 00:05:41,040
weil die Grunt-Datei selbst

67
00:05:41,040 --> 00:05:47,110
ein Knotenmodul ist, das in verschiedenen Grunt-Plug-Ins geladen wird.

68
00:05:47,110 --> 00:05:51,815
Nachdem wir das getan haben, werden wir hier ein paar Grunt Plugins benötigen.

69
00:05:51,815 --> 00:05:59,080
Um dies zu tun, werden wir sagen, require ('time- grunt'),

70
00:05:59,080 --> 00:06:08,840
und wir sagen grunt gegen die Konfiguration, die wir zum Laden in der Time Grunt verwenden.

71
00:06:08,840 --> 00:06:12,555
Zu erfordern, wie Sie später erfahren werden, wenn Sie über Knotenmodule lernen,

72
00:06:12,555 --> 00:06:16,660
ist eine Möglichkeit, zu sagen, dass die Last im Time Grunt Knotenmodul

73
00:06:16,660 --> 00:06:20,815
innerhalb dieses speziellen Knotenmoduls verwendet werden soll.

74
00:06:20,815 --> 00:06:28,450
In ähnlicher Weise werde ich Jit Grunt Knotenmodul benötigen.

75
00:06:32,190 --> 00:06:37,095
Dieses Jit Grunt Knotenmodul stellt sicher, dass es in

76
00:06:37,095 --> 00:06:42,540
allen anderen Knotenmodulen oder anderen Grunt Plug-Ins geladen wird - die Knotenmodule sind,

77
00:06:42,540 --> 00:06:50,925
im Grunde, wie in, wenn sie tatsächlich in meinem Grunt für verschiedene Aufgaben impliziert werden.

78
00:06:50,925 --> 00:06:55,295
Die Alternative wäre, jedes einzelne

79
00:06:55,295 --> 00:07:00,600
dieser Grunt-Plug-Ins explizit manuell zu laden, indem die erforderliche Anweisung verwendet wird.

80
00:07:00,600 --> 00:07:04,445
Ich erspare mir ein wenig Ärger, indem ich nur Jit Grunt verwende,

81
00:07:04,445 --> 00:07:07,825
der sich darum kümmert, diese Knotenmodule bei Bedarf zu laden.

82
00:07:07,825 --> 00:07:11,395
Jetzt in die Konfiguration,

83
00:07:11,395 --> 00:07:16,159
wie wir verstanden haben, arbeitet Grunt an der Konfiguration,

84
00:07:16,159 --> 00:07:21,935
so dass jedes Grunt Plug-in, das wir für die Durchführung einer Aufgabe verwenden möchten,

85
00:07:21,935 --> 00:07:27,225
es innerhalb dieser Grunt InitConfig-Datei konfiguriert werden muss.

86
00:07:27,225 --> 00:07:32,965
Diese Konfiguration ist im Grunde ein JavaScript-Objekt.

87
00:07:32,965 --> 00:07:36,145
Wenn Sie mit JavaScript-Objekten vertraut sind,

88
00:07:36,145 --> 00:07:40,275
beginnen Sie, die Syntax sehr, sehr schnell zu verstehen.

89
00:07:40,275 --> 00:07:47,330
Die erste Aufgabe, die ich konfigurieren werde, ist SASS.

90
00:07:47,330 --> 00:07:49,855
Also, ich tippe hier SASS ein,

91
00:07:49,855 --> 00:07:55,200
und dann in SASS, sage ich dist.

92
00:07:55,920 --> 00:08:01,570
Jetzt müssen Sie glauben, dass auf diese Weise die Konfiguration durchgeführt wird.

93
00:08:01,570 --> 00:08:03,280
Also, ich sage dist,

94
00:08:03,280 --> 00:08:05,295
und dann drinnen

95
00:08:05,295 --> 00:08:10,980
sage ich Dateien, und dann

96
00:08:10,980 --> 00:08:14,125
gebe ich die Dateien an, die konvertiert werden müssen.

97
00:08:14,125 --> 00:08:20,270
Ich sage, CSS/styles.CSS, die

98
00:08:20,270 --> 00:08:28,815
von CSS/Styles.scss abhängig ist.

99
00:08:28,815 --> 00:08:36,925
Damit schließen wir hier die Konfiguration der SASS-Aufgabe ab.

100
00:08:36,925 --> 00:08:40,620
Sobald wir die Konfiguration der SASS-Aufgabe abgeschlossen haben,

101
00:08:40,620 --> 00:08:43,485
wenn Sie die SASS-Aufgabe wirklich ausführen möchten,

102
00:08:43,485 --> 00:08:52,950
dann unten würden Sie die SASS-Aufgabe konfigurieren, indem Sie „Grunt.RegisterTask“ sagen,

103
00:08:54,770 --> 00:08:58,545
und dann werde ich diese Aufgabe CSS aufrufen

104
00:08:58,545 --> 00:09:00,280
, und dann werde ich

105
00:09:00,280 --> 00:09:04,935
in Schreiberklammern sagen „SASS“.

106
00:09:04,935 --> 00:09:07,605
Nun, um die Syntax hier zu verstehen, lautet

107
00:09:07,605 --> 00:09:13,715
dies, wie Sie sehen können, „Grunt.RegisterTask“ und der Name dieser Aufgabe ist CSS.

108
00:09:13,715 --> 00:09:15,340
Und was beinhaltet diese Aufgabe?

109
00:09:15,340 --> 00:09:21,685
Diese Aufgabe beinhaltet die Ausführung der SASS-Aufgabe, die hier bereits konfiguriert wurde.

110
00:09:21,685 --> 00:09:25,080
So lesen wir diese Syntax hier.

111
00:09:25,080 --> 00:09:27,950
Wenn Sie dies nicht wünschen, müssen Sie dies nicht konfigurieren,

112
00:09:27,950 --> 00:09:33,065
da wir SASS zusammen mit der Watch-Aufgabe verwenden, um die

113
00:09:33,065 --> 00:09:38,460
SASS automatisch auszuführen, wenn unsere SCSS-Datei geändert wird.

114
00:09:38,460 --> 00:09:40,840
Lassen Sie uns damit die Änderungen speichern.

115
00:09:40,840 --> 00:09:45,570
Lassen Sie mich Ihnen diese besondere Aufgabe in Aktion zeigen.

116
00:09:45,570 --> 00:09:48,990
Wenn Sie die Aufgabe mit dem Namen CSS dort konfigurieren,

117
00:09:48,990 --> 00:09:50,650
fügen Sie die Eingabeaufforderung hinzu,

118
00:09:50,650 --> 00:09:54,655
Sie können „grunt.CSS“ eingeben und dann wird

119
00:09:54,655 --> 00:10:00,090
die Aufgabe ausgeführt, den sass-Code in CSS-Code zu konvertieren.

120
00:10:00,090 --> 00:10:04,005
Gehen Sie zur Eingabeaufforderung,

121
00:10:04,005 --> 00:10:09,070
geben Sie an der Eingabeaufforderung „grunt.CSS“ ein, und Sie sehen, wie

122
00:10:09,070 --> 00:10:17,530
die SASS-Task ausgeführt wird und dann style.sess Datei in styles.CSS konvertiert.

123
00:10:17,530 --> 00:10:19,390
Wie Sie sehen können,

124
00:10:19,390 --> 00:10:23,340
druckt der Time Grunt Statistiken wie diese aus,

125
00:10:23,340 --> 00:10:27,800
um anzugeben, wie viel Zeit jede dieser Aufgaben benötigt.

126
00:10:27,800 --> 00:10:29,520
Wenn das für Sie von Interesse ist,

127
00:10:29,520 --> 00:10:32,880
dann können Sie sich diese Details hier ansehen.

128
00:10:32,890 --> 00:10:39,360
In unserem nächsten Schritt werden wir die Uhr und den Server konfigurieren,

129
00:10:39,360 --> 00:10:41,800
um eine Uhr auf

130
00:10:41,800 --> 00:10:45,960
die SASS-Dateien zu halten und sie automatisch zu konvertieren, wenn sie geändert werden,

131
00:10:45,960 --> 00:10:48,625
und dann richten wir den Server ein,

132
00:10:48,625 --> 00:10:54,045
mit BrowserSync für die Bereitstellung unserer Website.

133
00:10:54,045 --> 00:10:56,700
Um die Watch and Serve Tasks einzurichten,

134
00:10:56,700 --> 00:10:59,740
werde ich ein paar weitere Grunt-Plug-Ins installieren,

135
00:10:59,740 --> 00:11:03,990
also werde ich sagen, npm install,

136
00:11:04,300 --> 00:11:12,465
grunt-contrib-watch minus save-dev.

137
00:11:12,465 --> 00:11:15,480
Das ist also die Grunt-contrib-Uhr.

138
00:11:15,480 --> 00:11:21,450
Grunt Plug-in, das ein Knotenmodul ist, also installieren Sie das. Mit

139
00:11:21,670 --> 00:11:32,030
dem Watch-Plugin-In können Sie Ihre verschiedenen Dateien überwachen.

140
00:11:32,030 --> 00:11:33,550
Das nächste Plug-in, das ich

141
00:11:33,550 --> 00:11:43,750
installieren werde, ist grunt-browser-Sync.

142
00:11:44,770 --> 00:11:50,515
Das BrowserSync-Modul ist das, das ich verwenden werde, um

143
00:11:50,515 --> 00:11:54,230
die Dateien aus meinem Projektordner zu speichern,

144
00:11:54,230 --> 00:12:00,090
so dass ich die Website in einem Browser sehen kann.

145
00:12:00,090 --> 00:12:04,845
Sobald ich diese beiden Module installiert habe,

146
00:12:04,845 --> 00:12:08,295
ist es Zeit, in meine grunt.initconfig zu gehen

147
00:12:08,295 --> 00:12:11,635
und dann die beiden Aufgaben zu konfigurieren.

148
00:12:11,635 --> 00:12:13,300
Eine zum Halten einer Uhr,

149
00:12:13,300 --> 00:12:18,125
die zweite zum Bereitstellen der Dateien mit BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Gehen Sie also zurück zu meiner initconfig,

151
00:12:20,680 --> 00:12:23,710
setzen Sie nach dem SASS ein Komma

152
00:12:23,710 --> 00:12:26,460
und gehen Sie dann in die nächste Zeile.

153
00:12:27,050 --> 00:12:32,650
Denken Sie immer daran, dieses Komma dort zu setzen.

154
00:12:32,650 --> 00:12:40,990
Ein fehlendes Komma verursacht viele Kopfschmerzen, wenn Sie versuchen, Ihre Grunz-Aufgaben auszuführen.

155
00:12:40,990 --> 00:12:44,635
Es ist sehr schwierig zu erkennen, dass Sie ein Komma verpasst haben.

156
00:12:44,635 --> 00:12:46,950
Daher ist es wichtig, auf

157
00:12:46,950 --> 00:12:52,290
die Syntax zu achten und sicherzustellen, dass Sie keines dieser Kommas verpassen.

158
00:12:52,290 --> 00:12:55,425
Es wird zurückkommen, um dich zur falschen Zeit zu beißen.

159
00:12:55,425 --> 00:12:57,105
Die nächste Aufgabe,

160
00:12:57,105 --> 00:13:00,190
die ich konfigurieren werde, ist die WatchTask.

161
00:13:00,190 --> 00:13:03,605
Also sage ich „Watch“ und was möchte ich sehen?

162
00:13:03,605 --> 00:13:10,070
Ich möchte diese Dateien ansehen, die CSS/*.SCSS ist.

163
00:13:10,120 --> 00:13:17,680
Das ist also die SCSS-Datei, die ich ansehen möchte.

164
00:13:17,680 --> 00:13:22,445
Alle SCSS-Dateien in meinem CSS-Ordner.

165
00:13:22,445 --> 00:13:26,670
Wenn einer von ihnen modifiziert

166
00:13:26,670 --> 00:13:32,865
wird, dann ist die entsprechende Aufgabe, die ich ausführen werde, SASS.

167
00:13:32,865 --> 00:13:36,180
Die SASS-Aufgabe, die ich bereits früher konfiguriert habe.

168
00:13:36,180 --> 00:13:39,710
Damit habe ich meinen WatchTask konfiguriert,

169
00:13:39,710 --> 00:13:42,820
um die SCSS-Dateien zu überwachen und

170
00:13:42,820 --> 00:13:46,075
sie dann automatisch durch Aufruf des SASS zu konvertieren.

171
00:13:46,075 --> 00:13:50,475
Jetzt kann ich mit dem WatchTask mehrere Dateien beobachten

172
00:13:50,475 --> 00:13:55,650
und dann automatisch die entsprechenden Aufgaben für diese Dateien aufrufen.

173
00:13:55,650 --> 00:13:57,895
So kann ich zum Beispiel

174
00:13:57,895 --> 00:14:01,660
meine JavaScript-Dateien beobachten und dann automatisch JS-Hinweise ausführen,

175
00:14:01,660 --> 00:14:04,465
wenn sich meine Dateien ändern.

176
00:14:04,465 --> 00:14:07,770
Oder Identifizierung zu tun und so weiter.

177
00:14:07,770 --> 00:14:12,100
Nun, die nächste, die ich konfigurieren werde, ist BrowserSync.

178
00:14:12,100 --> 00:14:15,345
Vergessen Sie das Komma nach dem WatchTask nicht,

179
00:14:15,345 --> 00:14:19,070
und geben Sie dann BrowserSync ein.

180
00:14:20,500 --> 00:14:26,369
Ich würde sagen, BrowserSync hier und dann für den BrowserSync,

181
00:14:26,369 --> 00:14:30,570
ich würde sagen, konfigurieren Sie eine Aufgabe innerhalb.

182
00:14:30,570 --> 00:14:35,090
Nun, dies ist die Syntax, die wir verwenden, um

183
00:14:35,090 --> 00:14:40,410
die Konfiguration in unserer Grunt-Datei einzufügen.

184
00:14:40,410 --> 00:14:42,840
Also sagt es BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Wenn Sie mich jetzt fragen, warum,

186
00:14:44,940 --> 00:14:46,895
müssen wir nur die Dokumentation

187
00:14:46,895 --> 00:14:52,275
für jedes dieser Plug-Ins lesen und dann herausfinden, wie diese Plug-Ins konfiguriert werden.

188
00:14:52,275 --> 00:14:56,000
Also, ich habe bereits die Dokumentation gelesen und ich habe

189
00:14:56,000 --> 00:15:00,885
einige grundlegende Setup für jede dieser Aufgaben herausgefunden, deshalb tippe ich sie einfach ein.

190
00:15:00,885 --> 00:15:03,525
Wenn Sie mehr Flexibilität

191
00:15:03,525 --> 00:15:07,350
wünschen, können Sie natürlich die entsprechende Dokumentation lesen und dann

192
00:15:07,350 --> 00:15:11,655
andere Möglichkeiten zur Konfiguration dieser Aufgaben herausfinden.

193
00:15:11,655 --> 00:15:18,010
Meine Konfiguration hier ist nur eine Möglichkeit, die Probleme zu lösen oder zu lösen.

194
00:15:18,010 --> 00:15:22,850
Also hier gebe ich die BSFiles an,

195
00:15:22,850 --> 00:15:28,685
also spezifiziert diese Datei, auf welche Dateien

196
00:15:28,685 --> 00:15:36,715
von meinem BrowserSync überwacht werden müssen, und wenn sich eine dieser Dateien ändert,

197
00:15:36,715 --> 00:15:44,805
wird mein BrowserSync dazu führen, dass der Browser neu geladen wird.

198
00:15:44,805 --> 00:15:50,185
Also werde ich alle Dateien in meinem CSS-Ordner,

199
00:15:50,185 --> 00:15:53,220
HTML-Dateien in meinem Projektordner

200
00:15:53,220 --> 00:15:57,945
und dann alle meine JavaScript-Dateien im JS-Ordner beobachten.

201
00:15:57,945 --> 00:16:03,835
Also, damit habe ich alle diese Dateien konfiguriert, auf denen ich eine Uhr halten werde,

202
00:16:03,835 --> 00:16:10,335
und dann automatisch ein Neuladen meiner Seite verursachen, wenn nötig.

203
00:16:10,335 --> 00:16:14,180
Und dann

204
00:16:14,180 --> 00:16:19,100
ist die nächste Konfiguration, die ich tun muss, einige weitere Optionen, für meinen BrowserSync.

205
00:16:19,100 --> 00:16:23,230
Die Optionen, die ich angeben werde, sind

206
00:16:23,510 --> 00:16:29,190
WatchTask true, was bedeutet, dass ein WatchTask ausgeführt wird,

207
00:16:29,190 --> 00:16:33,130
und das Basisverzeichnis für meinen Server.

208
00:16:33,130 --> 00:16:35,605
Also sage ich BaseDir,

209
00:16:35,605 --> 00:16:41,960
und dann gebe ich einen Punktschrägstrich an.

210
00:16:41,960 --> 00:16:43,720
Also das aktuelle Verzeichnis,

211
00:16:43,720 --> 00:16:47,740
als mein Basisverzeichnis.

212
00:16:47,740 --> 00:16:51,815
Lassen Sie mich mit diesen Änderungen die Änderungen an meiner Grunt-Datei speichern,

213
00:16:51,815 --> 00:17:01,085
und dann werde ich unten gehen und dann eine andere Grunt-Aufgabe konfigurieren, hier Standard genannt.

214
00:17:01,085 --> 00:17:05,145
Also würde ich die Aufgabe als Standard angeben.

215
00:17:05,145 --> 00:17:08,720
Was muss ich für diese Standardaufgabe tun?

216
00:17:08,720 --> 00:17:12,060
Ich muss

217
00:17:12,160 --> 00:17:20,055
BrowserSync ausführen und auch die zweite Aufgabe, die ich tun werde, ist beobachten.

218
00:17:20,055 --> 00:17:24,590
Ich muss zuerst die BrowserSync-Aufgabe und dann später die WatchTask ausführen.

219
00:17:24,590 --> 00:17:27,310
Da die BrowserSync-Aufgabe beginnt, meinen Server zu bedienen.

220
00:17:27,310 --> 00:17:30,605
Wenn ich den WatchTask zuerst und die BrowserSync-Aufgabe später mache

221
00:17:30,605 --> 00:17:32,495
,

222
00:17:32,495 --> 00:17:38,260
stoppt der WatchTask grundsätzlich alles und dann werden alle verbleibenden Aufgaben dahinter nicht ausgeführt.

223
00:17:38,260 --> 00:17:40,525
Wenn Sie also WatchTask verwenden,

224
00:17:40,525 --> 00:17:45,624
tun Sie dies als letzte in der Sequenz, die Sie in diesen eckigen Klammern angeben.

225
00:17:45,624 --> 00:17:50,415
Damit ist mein Projekt jetzt konfiguriert,

226
00:17:50,415 --> 00:17:57,100
um meine SASS-Dateien zu überwachen und sie bei Bedarf zu servieren.

227
00:17:57,100 --> 00:17:59,670
Also, das vervollständigt meine Grunt-Datei,

228
00:17:59,670 --> 00:18:02,795
gehen wir zurück zu unserem Terminal.

229
00:18:02,795 --> 00:18:04,740
Zurück zu meinem Terminal,

230
00:18:04,740 --> 00:18:07,670
ich habe eine andere Registerkarte geöffnet und dann in dieser Registerkarte

231
00:18:07,670 --> 00:18:11,335
werde ich die Grunt-Aufgabe ausführen,

232
00:18:11,335 --> 00:18:17,010
die auch meinen BrowserSync läuft und

233
00:18:17,010 --> 00:18:22,965
Dateien bereitstellt und automatisch die Webseite neu lädt,

234
00:18:22,965 --> 00:18:25,055
wenn sich eine dieser Dateien ändert.

235
00:18:25,055 --> 00:18:32,125
Wenn Sie also eine Aufgabe als Standardaufgabe konfigurieren, wie wir es in der Übung getan haben,

236
00:18:32,125 --> 00:18:37,725
muss ich an der Eingabeaufforderung nur grunt eingeben und dann wird die Standardaufgabe automatisch ausgeführt.

237
00:18:37,725 --> 00:18:40,680
Sobald meine Grunt-Aufgaben ausgeführt werden,

238
00:18:40,680 --> 00:18:44,015
können Sie sehen, dass es den BrowserSync gestartet hat und

239
00:18:44,015 --> 00:18:48,600
die Dateien bereitstellt und auch die WatchTask ausgeführt

240
00:18:48,600 --> 00:18:54,825
wird, die darauf wartet, dass Änderungen automatisch die SCSS-Aufgabe ausgeführt werden.

241
00:18:54,825 --> 00:19:01,460
Um Ihnen zu zeigen, wie die SCSS-Aufgabe ausgelöst wird,

242
00:19:01,460 --> 00:19:05,120
wenn ich Änderungen an meiner Styles.scss-Datei vornehme,

243
00:19:05,120 --> 00:19:07,725
also habe ich die Styles.scss-Datei heraufgebracht,

244
00:19:07,725 --> 00:19:11,845
und ich werde diese Datei einfach speichern.

245
00:19:11,845 --> 00:19:14,175
Und dann werden Sie feststellen, dass sofort

246
00:19:14,175 --> 00:19:22,285
auf der linken Seite die SASS-Task aufgerufen wird und ausgeführt wird und dann neu kompiliert

247
00:19:22,285 --> 00:19:30,705
wird, und dies führt auch dazu, dass die Styles.scss-Datei geändert wird, nachdem sie neu kompiliert wurde.

248
00:19:30,705 --> 00:19:38,045
Dann löst dies den BrowserSync aus, meine Webseite automatisch neu zu laden.

249
00:19:38,045 --> 00:19:43,750
Damit absolvieren wir unsere Grunze Teil 1 Übung.

250
00:19:43,750 --> 00:19:48,659
Dies ist ein guter Zeitpunkt,

251
00:19:48,659 --> 00:19:54,960
um Ihre Dateien im Git-Repository mit der Nachricht Grunt Teil eins zu speichern.