1
00:00:03,550 --> 00:00:06,380
Il est temps de commencer à grogner.

2
00:00:06,380 --> 00:00:10,280
Dans cet exercice et le prochain, nous allons répéter

3
00:00:10,280 --> 00:00:15,925
le même type de configuration que nous l'avons fait avec les scripts NPM.

4
00:00:15,925 --> 00:00:22,405
Dans la première partie, nous allons configurer la conversion de SCSS en CSS.

5
00:00:22,405 --> 00:00:28,570
Ensuite, nous allons configurer une tâche de surveillance et également servir le code en utilisant la synchronisation du navigateur.

6
00:00:28,570 --> 00:00:31,065
Dans la deuxième partie de l'exercice,

7
00:00:31,065 --> 00:00:40,010
nous utiliserons Usman et les différentes tâches pour préparer le pli de distribution.

8
00:00:40,010 --> 00:00:44,170
Ces exercices ne sont en aucun cas le seul moyen d'

9
00:00:44,170 --> 00:00:49,720
implémenter des configurations Grunt ou des fichiers d'appel.

10
00:00:49,720 --> 00:00:54,575
Ce n'est qu'une illustration de la façon dont nous pouvons utiliser ces outils.

11
00:00:54,575 --> 00:00:58,375
Vous pouvez trouver votre propre façon de configurer

12
00:00:58,375 --> 00:01:03,320
votre fichier Grunt et votre dossier d'appel pour vos projets.

13
00:01:03,320 --> 00:01:13,200
Notre première étape dans l'utilisation de Grunt est de mettre en place la CLI Grunt en tant que module NPM global.

14
00:01:13,200 --> 00:01:21,550
Pour ce faire, ajoutez le type d'invite : NPM -g install Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Il s'agit de l'interface de ligne de commande pour Grunt.

16
00:01:25,190 --> 00:01:27,480
Une fois cela mis en place,

17
00:01:27,480 --> 00:01:34,690
nous allons mettre en place un module NPM Grunt local pour une utilisation dans le cadre de nos projets.

18
00:01:34,690 --> 00:01:38,370
La CLI Grunt nous permet d'utiliser Grunt.

19
00:01:38,370 --> 00:01:40,050
Nous avons mis en place l'interface de ligne de commande Grunt.

20
00:01:40,050 --> 00:01:47,405
Ensuite, l'étape suivante consiste à mettre en place - Grunt localement,

21
00:01:47,405 --> 00:01:52,655
donc ; NPM installer Grunt moins enregistrer dev.

22
00:01:52,655 --> 00:01:56,365
Ensuite, installez le Grunt localement.

23
00:01:56,365 --> 00:01:58,930
Une fois que vous avez terminé ces deux étapes,

24
00:01:58,930 --> 00:02:04,850
l'étape suivante consiste à aller à notre projet, puis à créer un nouveau fichier,

25
00:02:04,850 --> 00:02:10,165
et nous le nommerons comme Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
Dans ce Gruntfile.js, nous allons configurer le code pour configurer nos tâches Grunt.

27
00:02:19,034 --> 00:02:27,770
Dans ce fichier, la première étape consiste à ajouter le

28
00:02:27,770 --> 00:02:30,640
code JavaScript 'use strict' signifiant 'use strict'.

29
00:02:30,640 --> 00:02:36,460
Ensuite, vous dites module.exports

30
00:02:37,050 --> 00:02:42,830
= fonction (grognement).

31
00:02:44,990 --> 00:02:53,005
Ensuite, à l'intérieur, nous allons configurer la configuration Grunt pour toutes les tâches.

32
00:02:53,005 --> 00:02:57,655
Comme je l'ai mentionné précédemment, Grunt est un coureur de tâches basé sur la configuration.

33
00:02:57,655 --> 00:03:02,200
Donc, nous allons installer les différents plug-ins Grunt pour

34
00:03:02,200 --> 00:03:08,370
les différentes tâches, puis les configurer dans notre fichier Grunt.

35
00:03:08,370 --> 00:03:10,769
Pour faire la configuration,

36
00:03:10,769 --> 00:03:12,605
nous allons ajouter le code ici, en

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

38
00:03:19,410 --> 00:03:28,655
et

39
00:03:28,655 --> 00:03:32,805
dans ce InitConfig, nous allons ajouter la configuration pour les tâches Grunt de la roue.

40
00:03:32,805 --> 00:03:34,580
Une fois cette opération terminée,

41
00:03:34,580 --> 00:03:37,145
sauvegardons les modifications.

42
00:03:37,145 --> 00:03:39,385
Dans notre prochaine étape,

43
00:03:39,385 --> 00:03:47,610
nous allons mettre en place quelques plug-ins Grunt pour nous permettre de convertir le code SCSS en code CSS.

44
00:03:47,610 --> 00:03:54,240
Pour ce faire, je vais installer un module NPM appelé

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

46
00:04:01,875 --> 00:04:03,450
En plus de cela,

47
00:04:03,450 --> 00:04:07,375
je vais mettre en place deux autres modules Grunt appelés,

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

49
00:04:19,990 --> 00:04:23,430
Ces deux modules — Time Grunt et Jit grognement.

50
00:04:23,430 --> 00:04:31,190
Le module Time Grunt affiche les statistiques de temps pour exécuter les différentes tâches Grunt.

51
00:04:31,190 --> 00:04:35,150
Le module Jit Grunt est utilisé pour le chargement dans

52
00:04:35,150 --> 00:04:40,420
ces plug-ins Grunt chaque fois qu'ils sont nécessaires dans n'importe quelle application.

53
00:04:40,420 --> 00:04:42,860
L' autre alternative est de charger

54
00:04:42,860 --> 00:04:49,475
explicitement dans les différents modules Grunt dans votre fichier de configuration Grunt.

55
00:04:49,475 --> 00:04:53,085
Je préfère utiliser le Jit Grunt pour qu'il prenne soin de charger

56
00:04:53,085 --> 00:04:56,790
dans tous les plug-ins Grunt dont j'ai besoin,

57
00:04:56,790 --> 00:04:59,955
comme lorsque je les utilise dans le code.

58
00:04:59,955 --> 00:05:04,785
Installez ces deux Time Grunt et Jit Grunt et une fois qu'ils sont installés,

59
00:05:04,785 --> 00:05:11,845
il est temps de configurer notre tâche de conversion SASS.

60
00:05:11,845 --> 00:05:14,870
Maintenant, vous devez évidemment vous demander pourquoi tapons-nous ce

61
00:05:14,870 --> 00:05:18,250
module.exports, puis fonctionnons et ainsi de suite.

62
00:05:18,250 --> 00:05:21,485
C' est ainsi que nous définissons les modules de noeud.

63
00:05:21,485 --> 00:05:26,590
Nous allons traiter de la structure des modules de noeud et pourquoi nous utilisons cette approche

64
00:05:26,590 --> 00:05:33,375
dans le cours de modules de noeud côté serveur plus tard dans la spécialisation.

65
00:05:33,375 --> 00:05:38,415
Pour le moment, acceptez simplement que c'est ainsi que le code est écrit pour Grunt,

66
00:05:38,415 --> 00:05:41,040
car le fichier Grunt est lui-même

67
00:05:41,040 --> 00:05:47,110
un module de nœud qui va se charger dans divers plug-ins Grunt.

68
00:05:47,110 --> 00:05:51,815
Après cela, nous allons exiger quelques plugins Grunt ici.

69
00:05:51,815 --> 00:05:59,080
Pour ce faire, nous dirons require ('time- grognon'),

70
00:05:59,080 --> 00:06:08,840
et nous dirons grognement par rapport à la configuration que nous utilisons pour le chargement dans Time Grunt.

71
00:06:08,840 --> 00:06:12,555
Exiger, comme vous l'apprendrez plus tard lorsque vous en apprendrez plus sur les modules de noeud,

72
00:06:12,555 --> 00:06:16,660
est une façon de dire que la charge dans le module de noeud Time Grunt

73
00:06:16,660 --> 00:06:20,815
à utiliser dans ce module de noeud particulier.

74
00:06:20,815 --> 00:06:28,450
De même, j'aurai besoin du module de nœud Jit Grunt.

75
00:06:32,190 --> 00:06:37,095
Ce module de noeud Jit Grunt s'assure qu'il va charger dans

76
00:06:37,095 --> 00:06:42,540
n'importe quel autre module de noeud ou tout autre plug-in Grunt- qui sont des modules de noeud

77
00:06:42,540 --> 00:06:50,925
, fondamentalement, comme dans quand ils sont réellement implicites dans mon Grunt pour faire diverses tâches.

78
00:06:50,925 --> 00:06:55,295
L' alternative serait de charger manuellement dans chacun de

79
00:06:55,295 --> 00:07:00,600
ces plug-ins Grunt explicitement en utilisant l'instruction requise.

80
00:07:00,600 --> 00:07:04,445
Je me sauve un peu d'ennuis en utilisant simplement Jit Grunt,

81
00:07:04,445 --> 00:07:07,825
qui prend soin de charger ces modules de noeud si nécessaire.

82
00:07:07,825 --> 00:07:11,395
Maintenant, en passant dans la configuration,

83
00:07:11,395 --> 00:07:16,159
comme nous l'avons compris, Grunt travaille sur la configuration,

84
00:07:16,159 --> 00:07:21,935
donc chaque plug-in Grunt que nous voulons utiliser pour effectuer une tâche,

85
00:07:21,935 --> 00:07:27,225
il doit être configuré dans ce fichier Grunt InitConfig.

86
00:07:27,225 --> 00:07:32,965
Cette configuration est essentiellement un objet JavaScript.

87
00:07:32,965 --> 00:07:36,145
Si vous êtes familier avec les objets JavaScript,

88
00:07:36,145 --> 00:07:40,275
vous commencez à comprendre la syntaxe très, très rapidement.

89
00:07:40,275 --> 00:07:47,330
La première tâche que je vais configurer est SASS.

90
00:07:47,330 --> 00:07:49,855
Donc, je tape SASS ici,

91
00:07:49,855 --> 00:07:55,200
puis à l'intérieur de SASS, je dis dist.

92
00:07:55,920 --> 00:08:01,570
Maintenant, vous devez croire que c'est ainsi que la configuration est faite.

93
00:08:01,570 --> 00:08:03,280
Donc, je dis dist,

94
00:08:03,280 --> 00:08:05,295
puis à l'intérieur,

95
00:08:05,295 --> 00:08:10,980
je dis des fichiers, et puis là,

96
00:08:10,980 --> 00:08:14,125
je spécifie les fichiers qui doivent être convertis.

97
00:08:14,125 --> 00:08:20,270
Je dis, CSS/styles.CSS,

98
00:08:20,270 --> 00:08:28,815
qui dépend de CSS/styles.scss.

99
00:08:28,815 --> 00:08:36,925
Avec cela, nous complétons la configuration de la tâche SASS ici.

100
00:08:36,925 --> 00:08:40,620
Une fois que nous avons terminé la configuration de la tâche SASS,

101
00:08:40,620 --> 00:08:43,485
si vous voulez vraiment exécuter la tâche SASS,

102
00:08:43,485 --> 00:08:52,950
puis en bas vous configurez la tâche SASS en disant « Grunt.registerTask »,

103
00:08:54,770 --> 00:08:58,545
puis j'appellerai cette tâche CSS

104
00:08:58,545 --> 00:09:00,280
, et puis je vais,

105
00:09:00,280 --> 00:09:04,935
entre crochets, dire « SASS ».

106
00:09:04,935 --> 00:09:07,605
Maintenant, pour comprendre la syntaxe ici,

107
00:09:07,605 --> 00:09:13,715
ceci comme vous pouvez le voir dit « grunt.registerTask » et le nom de cette tâche est CSS.

108
00:09:13,715 --> 00:09:15,340
Et qu'implique cette tâche ?

109
00:09:15,340 --> 00:09:21,685
Cette tâche implique l'exécution de la tâche SASS qui a déjà été configurée ici.

110
00:09:21,685 --> 00:09:25,080
C' est ainsi que nous lisons cette syntaxe ici.

111
00:09:25,080 --> 00:09:27,950
Si vous ne le souhaitez pas, vous n'avez pas besoin de le configurer,

112
00:09:27,950 --> 00:09:33,065
car nous utiliserons SASS avec la tâche de surveillance pour

113
00:09:33,065 --> 00:09:38,460
exécuter automatiquement le SASS lorsque notre fichier SCSS sera modifié.

114
00:09:38,460 --> 00:09:40,840
Avec cela, sauvegardons les modifications.

115
00:09:40,840 --> 00:09:45,570
Permettez-moi de vous montrer cette tâche particulière en action.

116
00:09:45,570 --> 00:09:48,990
Si vous configurez la tâche avec le nom CSS là,

117
00:09:48,990 --> 00:09:50,650
puis ajoutez l'invite,

118
00:09:50,650 --> 00:09:54,655
vous pouvez taper « grunt.CSS », puis il exécutera

119
00:09:54,655 --> 00:10:00,090
la tâche de convertir le code sass en code CSS.

120
00:10:00,090 --> 00:10:04,005
Aller à votre invite de commande, à l'invite,

121
00:10:04,005 --> 00:10:09,070
tapez « grunt.CSS » et vous verrez

122
00:10:09,070 --> 00:10:17,530
la tâche SASS s'exécutant puis convertissant le fichier styles.sess en fichier styles.CSS.

123
00:10:17,530 --> 00:10:19,390
En outre, comme vous pouvez le voir,

124
00:10:19,390 --> 00:10:23,340
le Time Grunt imprimera des statistiques comme celle-ci

125
00:10:23,340 --> 00:10:27,800
pour indiquer combien de temps chacune de ces tâches a pris.

126
00:10:27,800 --> 00:10:29,520
Si cela vous intéresse,

127
00:10:29,520 --> 00:10:32,880
alors vous pouvez regarder ces détails ici.

128
00:10:32,890 --> 00:10:39,360
Dans notre prochaine étape, nous allons configurer la montre et le serveur,

129
00:10:39,360 --> 00:10:41,800
afin de garder une surveillance sur

130
00:10:41,800 --> 00:10:45,960
les fichiers SASS et de les convertir automatiquement lorsqu'ils sont modifiés,

131
00:10:45,960 --> 00:10:48,625
puis nous allons configurer le serveur,

132
00:10:48,625 --> 00:10:54,045
en utilisant BrowserSync pour servir notre site Web.

133
00:10:54,045 --> 00:10:56,700
Pour configurer les tâches Watch and Serve,

134
00:10:56,700 --> 00:10:59,740
je vais installer quelques plug-ins plus grossiers,

135
00:10:59,740 --> 00:11:03,990
donc je dirai npm install,

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

137
00:11:12,465 --> 00:11:15,480
Donc c'est la montre Grunt-Contrib-Watch.

138
00:11:15,480 --> 00:11:21,450
Grunt plug-in qui est un module de nœud, alors installez cela.

139
00:11:21,670 --> 00:11:32,030
Ainsi, le plugin-in Watch vous permet de garder une montre sur vos différents fichiers.

140
00:11:32,030 --> 00:11:33,550
Le prochain plug-in que je vais

141
00:11:33,550 --> 00:11:43,750
installer est grunt-browser-sync.

142
00:11:44,770 --> 00:11:50,515
Le module BrowserSync est celui que je vais utiliser,

143
00:11:50,515 --> 00:11:54,230
pour enregistrer les fichiers de mon dossier de projet,

144
00:11:54,230 --> 00:12:00,090
afin que je puisse voir le site Web dans un navigateur.

145
00:12:00,090 --> 00:12:04,845
Une fois que j'ai installé ces deux modules,

146
00:12:04,845 --> 00:12:08,295
il est temps d'aller dans mon grunt.initconfig,

147
00:12:08,295 --> 00:12:11,635
puis de configurer les deux tâches.

148
00:12:11,635 --> 00:12:13,300
Un pour garder une montre,

149
00:12:13,300 --> 00:12:18,125
le second pour servir les fichiers à l'aide de BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Donc, revenant à mon initconfig,

151
00:12:20,680 --> 00:12:23,710
mettez une virgule là après le SASS,

152
00:12:23,710 --> 00:12:26,460
puis passez à la ligne suivante.

153
00:12:27,050 --> 00:12:32,650
N' oubliez pas de mettre cette virgule là.

154
00:12:32,650 --> 00:12:40,990
Une virgule manquante provoque beaucoup de maux de tête lorsque vous essayez d'exécuter vos tâches grognement.

155
00:12:40,990 --> 00:12:44,635
Il est très difficile d'identifier que vous avez manqué une virgule.

156
00:12:44,635 --> 00:12:46,950
Il est donc important de faire attention à

157
00:12:46,950 --> 00:12:52,290
la syntaxe et de s'assurer que vous ne manquez aucune de ces virgules.

158
00:12:52,290 --> 00:12:55,425
Ça reviendra te mordre au mauvais moment.

159
00:12:55,425 --> 00:12:57,105
Donc, la tâche suivante,

160
00:12:57,105 --> 00:13:00,190
que je vais configurer est WatchTask.

161
00:13:00,190 --> 00:13:03,605
Alors je dis « Watch » et qu'est-ce que je veux regarder ?

162
00:13:03,605 --> 00:13:10,070
Je veux regarder ces fichiers, qui est CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
Donc c'est le fichier SCSS que je veux regarder.

164
00:13:17,680 --> 00:13:22,445
Tous les fichiers SCSS dans mon dossier CSS.

165
00:13:22,445 --> 00:13:26,670
Si l'un d'entre eux est modifié,

166
00:13:26,670 --> 00:13:32,865
alors la tâche correspondante que je vais exécuter est, SASS.

167
00:13:32,865 --> 00:13:36,180
La tâche SASS que j'ai déjà configurée plus tôt.

168
00:13:36,180 --> 00:13:39,710
Donc, avec cela, j'ai configuré mon WatchTask,

169
00:13:39,710 --> 00:13:42,820
pour garder une surveillance sur les fichiers SCSS, puis

170
00:13:42,820 --> 00:13:46,075
les convertir automatiquement en invoquant le SASS.

171
00:13:46,075 --> 00:13:50,475
Maintenant, avec WatchTask, je peux réellement garder une montre sur plusieurs fichiers,

172
00:13:50,475 --> 00:13:55,650
puis appeler automatiquement les tâches correspondantes pour ces fichiers.

173
00:13:55,650 --> 00:13:57,895
Donc, par exemple, je peux garder une montre sur

174
00:13:57,895 --> 00:14:01,660
mes fichiers JavaScript, puis faire automatiquement des indications JS,

175
00:14:01,660 --> 00:14:04,465
lorsque mes fichiers changent.

176
00:14:04,465 --> 00:14:07,770
Ou pour faire l'identification et ainsi de suite.

177
00:14:07,770 --> 00:14:12,100
Maintenant, le suivant que je vais configurer est BrowserSync.

178
00:14:12,100 --> 00:14:15,345
Encore une fois, n'oubliez pas la virgule après WatchTask,

179
00:14:15,345 --> 00:14:19,070
puis tapez BrowserSync.

180
00:14:20,500 --> 00:14:26,369
Je dirais BrowserSync ici et puis pour le BrowserSync,

181
00:14:26,369 --> 00:14:30,570
je dirais configurer une tâche à l'intérieur.

182
00:14:30,570 --> 00:14:35,090
Maintenant, c'est la syntaxe que nous utilisons pour mettre dans

183
00:14:35,090 --> 00:14:40,410
la configuration dans notre fichier grunt.

184
00:14:40,410 --> 00:14:42,840
Donc, il est dit BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Maintenant, si vous me demandez pourquoi,

186
00:14:44,940 --> 00:14:46,895
nous avons juste besoin de lire la documentation,

187
00:14:46,895 --> 00:14:52,275
pour chacun de ces plug-ins, puis de comprendre comment configurer ces plug-ins.

188
00:14:52,275 --> 00:14:56,000
Donc, j'ai déjà lu la documentation et j'

189
00:14:56,000 --> 00:15:00,885
ai trouvé une configuration de base pour chacune de ces tâches, c'est pourquoi je les tape simplement.

190
00:15:00,885 --> 00:15:03,525
Évidemment, si

191
00:15:03,525 --> 00:15:07,350
vous voulez plus de flexibilité, vous pouvez lire la documentation correspondante, puis trouver

192
00:15:07,350 --> 00:15:11,655
d'autres façons de configurer ces tâches.

193
00:15:11,655 --> 00:15:18,010
Ma configuration ici n'est qu'une façon d'aborder ou de résoudre les problèmes.

194
00:15:18,010 --> 00:15:22,850
Donc ici, je spécifie les BSFiles,

195
00:15:22,850 --> 00:15:28,685
donc ce fichier spécifie quels fichiers doivent être surveillés

196
00:15:28,685 --> 00:15:36,715
par mon BrowserSync, puis quand l'un de ces fichiers change,

197
00:15:36,715 --> 00:15:44,805
mon BrowserSync provoquera le rechargement du navigateur.

198
00:15:44,805 --> 00:15:50,185
Donc, je vais regarder tous les fichiers dans mon dossier CSS,

199
00:15:50,185 --> 00:15:53,220
les fichiers HTML dans mon dossier de projet,

200
00:15:53,220 --> 00:15:57,945
puis tous mes fichiers JavaScript dans le dossier JS.

201
00:15:57,945 --> 00:16:03,835
Donc, avec cela, j'ai configuré tous les fichiers sur lesquels je vais garder une montre,

202
00:16:03,835 --> 00:16:10,335
puis provoquer automatiquement un rechargement de ma page si nécessaire.

203
00:16:10,335 --> 00:16:14,180
Et puis, la prochaine configuration que je dois

204
00:16:14,180 --> 00:16:19,100
faire est d'autres options, pour mon BrowserSync.

205
00:16:19,100 --> 00:16:23,230
Donc, les options que je vais spécifier est,

206
00:16:23,510 --> 00:16:29,190
WatchTask true, ce qui signifie qu'il y a un WatchTask en cours d'exécution,

207
00:16:29,190 --> 00:16:33,130
et le répertoire de base pour mon serveur.

208
00:16:33,130 --> 00:16:35,605
Donc, je dis baseDIR,

209
00:16:35,605 --> 00:16:41,960
et puis je spécifie, point slash.

210
00:16:41,960 --> 00:16:43,720
Donc, le répertoire courant,

211
00:16:43,720 --> 00:16:45,880
comme mon répertoire de base.

212
00:16:45,880 --> 00:16:47,740
Donc, avec ces changements,

213
00:16:47,740 --> 00:16:51,815
laissez-moi enregistrer les modifications de mon fichier grognement,

214
00:16:51,815 --> 00:17:01,085
puis je vais descendre ci-dessous et puis configurer une autre tâche grognement, ici appelée par défaut.

215
00:17:01,085 --> 00:17:05,145
Donc, je spécifierais la tâche par défaut.

216
00:17:05,145 --> 00:17:08,720
Pour cette tâche par défaut, que dois-je faire ?

217
00:17:08,720 --> 00:17:12,060
J' ai besoin d'exécuter

218
00:17:12,160 --> 00:17:20,055
BrowserSync et aussi la deuxième tâche que je vais faire est de regarder.

219
00:17:20,055 --> 00:17:24,590
Je devrai d'abord faire la tâche BrowserSync, puis la WatchTask plus tard.

220
00:17:24,590 --> 00:17:27,310
Parce que la tâche BrowserSync va commencer à servir mon serveur.

221
00:17:27,310 --> 00:17:30,605
Si je fais d'abord la tâche WatchTask et la tâche BrowserSync plus tard,

222
00:17:30,605 --> 00:17:32,495
la WatchTask

223
00:17:32,495 --> 00:17:38,260
arrêtera tout, puis toutes les tâches restantes derrière qui ne s'exécuteront pas.

224
00:17:38,260 --> 00:17:40,525
Donc, si vous utilisez WatchTask,

225
00:17:40,525 --> 00:17:45,624
faites-le comme un dernier dans la séquence que vous spécifiez entre crochets.

226
00:17:45,624 --> 00:17:50,415
Avec cela, mon projet est maintenant configuré,

227
00:17:50,415 --> 00:17:57,100
à la fois pour surveiller mes fichiers SASS et le servir chaque fois que nécessaire.

228
00:17:57,100 --> 00:17:59,670
Donc, ça complète mon fichier grognement,

229
00:17:59,670 --> 00:18:02,795
revenons à notre terminal.

230
00:18:02,795 --> 00:18:04,740
Pour revenir à mon terminal,

231
00:18:04,740 --> 00:18:07,670
j'ai ouvert un autre onglet, puis dans cet onglet,

232
00:18:07,670 --> 00:18:11,335
je vais exécuter la tâche grossir,

233
00:18:11,335 --> 00:18:17,010
qui gardera également mon BrowserSync en cours d'exécution et servira des

234
00:18:17,010 --> 00:18:22,965
fichiers et rechargera automatiquement la page Web,

235
00:18:22,965 --> 00:18:25,055
si l'un de ces fichiers change.

236
00:18:25,055 --> 00:18:30,790
Donc, si vous configurez une tâche comme une tâche par défaut comme nous l'avons fait dans l'exercice,

237
00:18:30,790 --> 00:18:32,125
alors à l'invite,

238
00:18:32,125 --> 00:18:37,725
j'ai juste besoin de taper grognement, puis il exécutera automatiquement la tâche par défaut.

239
00:18:37,725 --> 00:18:40,680
Une fois que mes tâches grognement commencent à s'exécuter,

240
00:18:40,680 --> 00:18:44,015
vous pouvez voir qu'il a démarré BrowserSync et qu'il sert

241
00:18:44,015 --> 00:18:48,600
les fichiers et qu'il exécute également WatchTask,

242
00:18:48,600 --> 00:18:54,825
qui attend que toutes les modifications exécutent automatiquement la tâche SCSS.

243
00:18:54,825 --> 00:19:01,460
Pour vous montrer comment la tâche SCSS sera déclenchée,

244
00:19:01,460 --> 00:19:05,120
chaque fois que j'apporte des modifications à mon fichier .scss styles.scss,

245
00:19:05,120 --> 00:19:07,725
j'ai donc mis en place le fichier Styles.scss,

246
00:19:07,725 --> 00:19:11,845
et je vais simplement enregistrer ce fichier.

247
00:19:11,845 --> 00:19:14,175
Et puis vous remarquerez que immédiatement,

248
00:19:14,175 --> 00:19:22,285
sur le côté gauche, la tâche SASS est appelée et s'exécute, puis re-compile et cela

249
00:19:22,285 --> 00:19:30,705
provoquera également le changement du fichier Styles.scss, après avoir été recompilé.

250
00:19:30,705 --> 00:19:38,045
Ensuite, cela déclenchera BrowserSync pour recharger automatiquement ma page Web.

251
00:19:38,045 --> 00:19:43,750
Avec cela, nous terminons notre exercice de grognement première partie.

252
00:19:43,750 --> 00:19:48,659
C' est le bon moment pour enregistrer vos fichiers,

253
00:19:48,659 --> 00:19:54,960
dans le référentiel Git avec le message Grunt première partie.