1
00:00:03,060 --> 00:00:06,095
Maintenant que nous en avons assez accordé,

2
00:00:06,095 --> 00:00:08,700
il est temps de Gulp.

3
00:00:08,700 --> 00:00:12,010
Nous allons essayer d'effectuer le même type de

4
00:00:12,010 --> 00:00:16,235
tâches que nous avons effectuées avec les scripts NPM et Grunt,

5
00:00:16,235 --> 00:00:22,995
mais maintenant nous allons essayer de faire de même en utilisant les plug-ins Gulp et Gulp.

6
00:00:22,995 --> 00:00:29,090
Pour commencer, installons d'abord Gulp en tant que module global.

7
00:00:29,090 --> 00:00:31,635
Donc, pour ce faire, à l'invite,

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

9
00:00:38,740 --> 00:00:42,380
cela installera Gulp en tant que module global et le

10
00:00:42,380 --> 00:00:45,625
rendra disponible pour une utilisation sur la ligne de commande.

11
00:00:45,625 --> 00:00:47,605
Une fois cela terminé,

12
00:00:47,605 --> 00:00:51,425
l'étape suivante consiste à installer Gulp localement dans notre projet.

13
00:00:51,425 --> 00:00:53,975
Donc, à l'invite,

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

15
00:01:01,700 --> 00:01:03,835
Une fois ces deux étapes terminées,

16
00:01:03,835 --> 00:01:10,765
il est temps d'aller de l'avant et de configurer nos tâches Gulp.

17
00:01:10,765 --> 00:01:14,195
Avant de faire cela, notre prochaine étape,

18
00:01:14,195 --> 00:01:18,170
nous allons installer le plug-in Gulp Sass afin que nous puissions

19
00:01:18,170 --> 00:01:23,560
configurer le Sass pour voir comme tâche de conversion dans notre fichier Gulp.

20
00:01:23,560 --> 00:01:26,460
Donc, pour aller de l'avant et faire cela,

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

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

23
00:01:40,270 --> 00:01:43,835
Aussi pendant que nous y sommes,

24
00:01:43,835 --> 00:01:48,305
nous pourrions aussi bien installer la tâche Browser Sync Gulp aussi,

25
00:01:48,305 --> 00:01:53,835
afin que nous puissions configurer les deux l'une après l'autre.

26
00:01:53,835 --> 00:02:07,960
Donc, je vais installer, npm installer browser-sync —save-dev.

27
00:02:08,830 --> 00:02:11,480
Une fois ces

28
00:02:11,480 --> 00:02:17,980
deux-là installés, nous allons de l'avant et créons notre fichier Gulp puis configurez nos tâches Gulp ici.

29
00:02:17,980 --> 00:02:20,590
En allant dans notre dossier de projet,

30
00:02:20,590 --> 00:02:27,905
créons un nouveau fichier, puis nommez-le gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
et dans ce fichier, nous allons configurer nos tâches Gulp.

32
00:02:32,380 --> 00:02:34,950
Donc, une fois que le gulpfile.js est prêt,

33
00:02:34,950 --> 00:02:39,940
configurez bien les tâches Gulp ici en

34
00:02:39,940 --> 00:02:50,310
commençant par 'use strict', puis var gulp.

35
00:02:50,310 --> 00:02:57,585
Donc, nous devons exiger les modules de noeud gulp,

36
00:02:57,585 --> 00:02:59,810
et aussi pendant que nous y sommes,

37
00:02:59,810 --> 00:03:07,600
nous aurons besoin du module de noeud sass.

38
00:03:12,470 --> 00:03:16,310
Comme je l'ai mentionné dans l'exercice précédent,

39
00:03:16,310 --> 00:03:22,110
il vous sera plus clair pourquoi le code est écrit comme ceci,

40
00:03:22,110 --> 00:03:30,245
une fois que vous comprendrez plus sur les modules de noeud dans un cours ultérieur.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, donc ce que nous avons fait est d'inclure les

42
00:03:35,535 --> 00:03:40,895
modules de nœuds Gulp Contrast et BowserSync dans notre fichier Gulp.

43
00:03:40,895 --> 00:03:42,545
Et une fois que vous avez fait cela,

44
00:03:42,545 --> 00:03:45,360
il est temps de configurer nos tâches Gulp.

45
00:03:45,360 --> 00:03:47,940
Comme nous l'avons appris précédemment,

46
00:03:47,940 --> 00:03:52,340
Gulp est un code basé sur la façon de configurer

47
00:03:52,340 --> 00:03:57,815
les tâches contrairement à Grunt qui repose davantage sur la configuration des tâches.

48
00:03:57,815 --> 00:04:00,455
Donc, dans le cas de Gulp,

49
00:04:00,455 --> 00:04:04,230
le bébé va configurer nos tâches pour taper

50
00:04:04,230 --> 00:04:11,340
gulp.task, puis nous allons mettre en place un nom de tâche 'sass',

51
00:04:11,340 --> 00:04:13,545
puis pour cette tâche,

52
00:04:13,545 --> 00:04:17,630
nous allons configurer cela comme une fonction,

53
00:04:19,990 --> 00:04:23,205
et c'est ainsi que le code est préparé.

54
00:04:23,205 --> 00:04:28,850
Donc, Gulp Tasks fonction Sass et ici,

55
00:04:28,850 --> 00:04:32,310
nous configurons les tâches Gulp,

56
00:04:34,850 --> 00:04:45,030
donc nous allons taper return gulp.src ('. /css/ *.scss') Comme nous l'avons appris,

57
00:04:45,030 --> 00:05:00,800
Gulp est un outil basé sur le code sur la configuration.

58
00:05:00,800 --> 00:05:06,630
Donc, nous allons préparer cette tâche en tant que telle.

59
00:05:06,630 --> 00:05:14,390
Donc, vous voyez que nous avons spécifié Gulp tuyau source sass sur,

60
00:05:14,390 --> 00:05:18,630
puis ici, erreur.

61
00:05:19,220 --> 00:05:22,600
Donc, si une erreur se produit,

62
00:05:24,020 --> 00:05:31,870
nous allons utiliser la méthode Sass pour enregistrer l'erreur, puis diriger cela

63
00:05:31,870 --> 00:05:43,480
par gulp.dest ('. /css '), et qui

64
00:05:52,970 --> 00:05:59,270
complète la configuration des tâches Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
Vous devez vous demander pourquoi nous écrivons le code comme ça.

66
00:06:03,540 --> 00:06:06,960
Il dit source gulp, puis spécifiez quelque chose là,

67
00:06:06,960 --> 00:06:10,650
puis le suivant dit pipe, puis le suivant dit pipe.

68
00:06:10,650 --> 00:06:16,045
Comprenons la façon Gulp de faire les choses un peu plus en détail.

69
00:06:16,045 --> 00:06:19,855
Pour vous aider à expliquer pourquoi nous configurons des tâches comme ça,

70
00:06:19,855 --> 00:06:24,730
j'ai une explication de ce que nous appelons Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
La façon dont Gulp fonctionne est comme si vous prenez un ensemble de fichiers et vous spécifiez l'ensemble de

72
00:06:29,900 --> 00:06:35,405
fichiers en disant source gulp comme nous l'avons fait avec les tâches Sass là-bas.

73
00:06:35,405 --> 00:06:39,005
Donc ici, c'est la fonction qui prend les fichiers.

74
00:06:39,005 --> 00:06:44,405
Vous pouvez même spécifier les fichiers en utilisant les modèles de globbing que nous avons appris dans Grunt,

75
00:06:44,405 --> 00:06:49,410
puis il crée un flux d'objets qui représente ces fichiers.

76
00:06:49,410 --> 00:06:51,560
Maintenant, une fois que le flux est créé

77
00:06:51,560 --> 00:06:54,480
, le flux peut être acheminé à travers un ensemble de

78
00:06:54,480 --> 00:06:58,795
fonctions l'une après l'autre afin de transformer ces fichiers.

79
00:06:58,795 --> 00:07:07,400
Et puis enfin, les fichiers transformés qui en résultent peuvent être placés dans un emplacement de destination.

80
00:07:07,400 --> 00:07:09,795
C' est pourquoi nous spécifions la source Gulp,

81
00:07:09,795 --> 00:07:11,585
puis nous spécifions le tuyau.

82
00:07:11,585 --> 00:07:15,945
Donc, le tuyau permet au flux d'être canalisé à travers une fonction,

83
00:07:15,945 --> 00:07:18,295
et donc, c'est pourquoi nous avons dit point pipe,

84
00:07:18,295 --> 00:07:20,600
et puis nous avons dit gulp.

85
00:07:20,600 --> 00:07:23,965
Et puis nous avons dit sass sur erreur.

86
00:07:23,965 --> 00:07:30,255
Et puis le suivant dit Pipe Gulp Dest.

87
00:07:30,255 --> 00:07:35,950
Ainsi, le gulp dest spécifie la destination des fichiers qui ont été traités.

88
00:07:35,950 --> 00:07:43,860
Donc, c'est ainsi qu'une tâche typique est spécifiée dans gulp car mais gulp fonctionne sur les flux.

89
00:07:43,860 --> 00:07:48,875
Ainsi, vos fichiers de flux à travers les tuyaux jusqu'à ce qu'ils

90
00:07:48,875 --> 00:07:54,805
soient transférés, puis ils seront déposés à destination spécifiée.

91
00:07:54,805 --> 00:07:59,610
Ainsi, vous verrez une structure similaire pour la plupart des tâches gulp

92
00:07:59,610 --> 00:08:04,740
que nous allons configurer dans cet exercice et le prochain exercice.

93
00:08:04,740 --> 00:08:11,460
Maintenant que vous avez compris un peu comment gulp fonctionne avec les flux et comment

94
00:08:11,460 --> 00:08:21,005
la tâche gulp utilise le tuyau pour traiter les fichiers via un ensemble de fonctions,

95
00:08:21,005 --> 00:08:28,290
et il devient plus clair pour vous pourquoi nous avons configuré cette tâche sass comme vu dans ce code ici.

96
00:08:28,290 --> 00:08:33,260
La tâche suivante que nous allons configurer s'appelle gulp,

97
00:08:33,340 --> 00:08:39,900
et nous allons configurer cette tâche comme sass watch.

98
00:08:39,900 --> 00:08:42,700
Donc, c'est une tâche de surveillance que nous allons configurer,

99
00:08:42,700 --> 00:08:48,920
puis vous spécifieriez la fonction.

100
00:08:49,190 --> 00:08:51,330
Et donc ici,

101
00:08:51,330 --> 00:08:53,320
la tâche de surveillance Gulp Sass,

102
00:08:53,320 --> 00:08:58,490
ce que nous faisons est de spécifier les fichiers que nous allons regarder.

103
00:08:58,490 --> 00:09:05,600
Donc, nous utilisons la tâche Gulp watch pour regarder le fichier.

104
00:09:05,600 --> 00:09:08,830
Donc, la montre est déjà intégrée dans Gulp.

105
00:09:08,830 --> 00:09:17,660
Donc, il faudra Gulp watch et ensuite nous spécifions les fichiers là-bas *.SCSS.

106
00:09:17,660 --> 00:09:21,390
Ainsi, comme vous pouvez le voir, la montre Gulp surveillera

107
00:09:21,390 --> 00:09:25,915
ces fichiers, puis quand des modifications de ces fichiers se produisent,

108
00:09:25,915 --> 00:09:30,225
elle exécutera cette tâche sass,

109
00:09:30,225 --> 00:09:32,975
que nous avons spécifiée plus tôt.

110
00:09:32,975 --> 00:09:37,360
Donc, c'est comme ça que cette tâche de montre sass est configurée.

111
00:09:37,360 --> 00:09:39,495
Maintenant que nous avons fait ces deux,

112
00:09:39,495 --> 00:09:42,730
configurons ensuite cette tâche de synchronisation du navigateur.

113
00:09:42,730 --> 00:09:47,650
Donc, fermez cela avec le point-virgule, puis la

114
00:09:47,650 --> 00:09:53,375
tâche suivante que nous allons configurer est la tâche de synchronisation du navigateur.

115
00:09:53,375 --> 00:10:01,735
Donc, je vais spécifier la tâche de synchronisation du navigateur là.

116
00:10:01,735 --> 00:10:04,550
Et puis pour la tâche de synchronisation du navigateur,

117
00:10:04,550 --> 00:10:07,480
je vais spécifier cette fonction.

118
00:10:07,480 --> 00:10:11,725
Encore une fois, notez la structure dans laquelle nous écrivons le code,

119
00:10:11,725 --> 00:10:16,405
tâche gulp et puis vous spécifiez quelque chose qui a suivi mais avec une fonction.

120
00:10:16,405 --> 00:10:17,990
Maintenant, comme je l'ai dit,

121
00:10:17,990 --> 00:10:23,155
nous apprenons les modules de noeud dans le dernier cours de cette spécialisation,

122
00:10:23,155 --> 00:10:28,520
il deviendra plus clair pour vous pourquoi pas les modules écrits avec cette structure,

123
00:10:28,520 --> 00:10:31,790
et pourquoi les fonctions sont écrites comme ceci.

124
00:10:31,790 --> 00:10:34,470
Donc, nous disons la synchronisation du navigateur de tâche gulp.

125
00:10:34,470 --> 00:10:38,260
Ici, je vais définir une variable,

126
00:10:38,260 --> 00:10:40,920
une variable JavaScript appelée fichiers,

127
00:10:40,920 --> 00:10:45,050
qui n'est rien d'autre que dans le tableau,

128
00:10:45,160 --> 00:10:55,935
et que dans ce tableau de fichiers je spécifierais tous les fichiers que

129
00:10:55,935 --> 00:10:58,790
si modifié la synchronisation du navigateur doit

130
00:10:58,790 --> 00:11:07,125
provoquer le rechargement ou le fichier.

131
00:11:07,125 --> 00:11:12,690
Donc, les fichiers html, les fichiers CSS dans le dossier CSS,

132
00:11:12,690 --> 00:11:18,420
et puis de même je vais également regarder les fichiers image,

133
00:11:26,080 --> 00:11:31,960
et les fichiers JavaScript.

134
00:11:33,840 --> 00:11:36,730
Tous ces fichiers si l'un d'entre eux change.

135
00:11:36,730 --> 00:11:40,800
Donc, après cela, je vais configurer la synchronisation du navigateur ici.

136
00:11:40,800 --> 00:11:44,315
Donc, je vais dire synchronisation du navigateur.

137
00:11:44,315 --> 00:11:49,010
Nous avons déjà défini cette variable appelée synchronisation du navigateur plus tôt.

138
00:11:49,010 --> 00:11:54,400
Donc, nous devons initialiser la synchronisation du navigateur,

139
00:11:56,230 --> 00:12:01,805
et donc, le premier paramètre à cela

140
00:12:01,805 --> 00:12:08,895
est les fichiers qui devront être surveillés,

141
00:12:08,895 --> 00:12:18,160
puis le second paramètre spécifie les options que nous donnons au navigateur.

142
00:12:18,160 --> 00:12:21,720
Donc, l'option que je spécifie est pour le serveur.

143
00:12:21,720 --> 00:12:31,350
Je vais spécifier le répertoire de base comme répertoire courant,

144
00:12:31,350 --> 00:12:38,595
puis cela complète la spécification de la tâche de synchronisation du navigateur.

145
00:12:38,595 --> 00:12:43,280
Donc, avec cela, nous avons terminé de spécifier la tâche de synchronisation du navigateur ici.

146
00:12:43,280 --> 00:12:46,750
Ainsi, vous pouvez voir que la façon dont nous avons configuré la tâche de synchronisation

147
00:12:46,750 --> 00:12:48,480
du navigateur, nous avons spécifié les fichiers, puis enregistrer la

148
00:12:48,480 --> 00:12:51,750
synchronisation du navigateur en elle et fournir les fichiers comme premier paramètre.

149
00:12:51,750 --> 00:12:58,940
Le deuxième paramètre est les options pour le plugin de synchronisation du navigateur.

150
00:12:58,940 --> 00:13:02,620
Ensuite, nous allons planifier ou

151
00:13:02,620 --> 00:13:10,680
nous allons configurer la tâche appelée par défaut.

152
00:13:10,680 --> 00:13:17,005
Tout comme j'ai la tâche par défaut dans Grunt,

153
00:13:17,005 --> 00:13:23,475
nous pouvons également avoir une tâche par défaut similaire définie pour gulp.

154
00:13:23,475 --> 00:13:28,095
Donc, ici, nous disons gulp tâche synchronisation du navigateur par défaut,

155
00:13:28,095 --> 00:13:33,275
puis spécifiez la fonction.

156
00:13:33,275 --> 00:13:42,085
Et à l'intérieur, nous allons spécifier Gulp start.

157
00:13:42,085 --> 00:13:46,185
Donc, cela spécifie que je devrais commencer

158
00:13:46,185 --> 00:13:54,730
cette autre tâche qui sass watch task.La tâche de montre sass doit être démarrée.

159
00:13:54,840 --> 00:14:00,370
Assurez-vous que la tâche de synchronisation du navigateur est en cours d'exécution avant le démarrage de la tâche de surveillance sass.

160
00:14:00,370 --> 00:14:04,060
Donc, c'est la syntaxe pour spécifier cela dans gulp.

161
00:14:04,060 --> 00:14:08,095
Donc, avec cela, nous avons configuré tout ce dont nous avons besoin dans le fichier gulp.

162
00:14:08,095 --> 00:14:09,870
Donc, encore une fois en arrière,

163
00:14:09,870 --> 00:14:11,675
il y a des étapes que nous avons faites.

164
00:14:11,675 --> 00:14:17,460
Nous avons d'abord utilisé require d'inclure tous leurs plugins gulp là,

165
00:14:17,460 --> 00:14:22,575
puis nous avons configuré la tâche sass,

166
00:14:22,575 --> 00:14:25,455
puis spécifié sass watch tâche.

167
00:14:25,455 --> 00:14:31,995
C' est là que nous utilisons la montre Gulp qui nous est disponible comme de Gulp.

168
00:14:31,995 --> 00:14:37,290
Ensuite, nous avons spécifié la tâche de synchronisation du navigateur, puis finalement

169
00:14:37,290 --> 00:14:43,150
reprogrammer la tâche par défaut avec le navigateur Sync et le gulp commencer avec sass watch.

170
00:14:43,150 --> 00:14:45,705
Maintenant, voyons les changements,

171
00:14:45,705 --> 00:14:49,875
puis nous allons aller de l'avant et exécuter le fichier gulp add,

172
00:14:49,875 --> 00:14:52,255
et le type d'invite gulp.

173
00:14:52,255 --> 00:14:59,780
Vous verrez que gulp démarre avec la synchronisation du navigateur et la tâche de surveillance sass démarre,

174
00:14:59,780 --> 00:15:06,565
puis votre synchronisation du navigateur commencera à servir les fichiers.

175
00:15:06,565 --> 00:15:12,770
Si vous affichez votre site Web à l'aide d'un navigateur,

176
00:15:12,770 --> 00:15:17,425
vous pourrez voir le site Web en cours de diffusion dans le navigateur.

177
00:15:17,425 --> 00:15:23,090
Permettez-moi également d'illustrer le fonctionnement de la tâche de veille.

178
00:15:23,090 --> 00:15:26,795
Donc, je vais tirer le style.css et

179
00:15:26,795 --> 00:15:31,185
essayer juste d'enregistrer le changement et vous remarquerez que sur le côté gauche,

180
00:15:31,185 --> 00:15:36,850
la tâche sass est immédiatement appelée et elle

181
00:15:36,850 --> 00:15:44,460
recompilera le fichier style.scss dans les fichiers CSS.

182
00:15:44,460 --> 00:15:48,840
Et puis ce navigateur se rechargera à ce stade.

183
00:15:48,840 --> 00:15:54,085
Avec cela, nous complétons la première partie de l'exercice Gulp.

184
00:15:54,085 --> 00:15:58,710
Dans la deuxième partie, nous allons préparer le dossier de distribution.

185
00:15:58,710 --> 00:16:05,030
C' est le bon moment pour vous de faire un git-commit avec le message Gulp partie 1.