1
00:00:03,510 --> 00:00:07,990
Maintenant que nous avons une compréhension des

2
00:00:07,990 --> 00:00:12,965
différentes étapes impliquées dans la construction et le déploiement de notre site Web,

3
00:00:12,965 --> 00:00:18,690
ainsi qu'une brève introduction aux scripts NPM lors de la conférence précédente, nous

4
00:00:18,690 --> 00:00:22,830
allons plonger en profondeur dans le développement de

5
00:00:22,830 --> 00:00:28,755
scripts NPM pour automatiser de nombreuses tâches dont nous avions parlé plus tôt.

6
00:00:28,755 --> 00:00:31,350
Comme vous l'avez vu dans la conférence précédente,

7
00:00:31,350 --> 00:00:38,760
nous avons déjà quelques scripts NPM que nous avions inclus dans notre fichier package.json,

8
00:00:38,760 --> 00:00:41,735
un pour démarrer le serveur lite et le second

9
00:00:41,735 --> 00:00:46,240
pour convertir le code SCSS en CSS.

10
00:00:46,240 --> 00:00:49,755
Dans cet exercice et le suivant,

11
00:00:49,755 --> 00:00:53,055
nous allons explorer les scripts NPM un peu plus en détail.

12
00:00:53,055 --> 00:01:00,810
Pour commencer, faisons d'abord un peu de ménage sur le fichier index.html.

13
00:01:00,810 --> 00:01:03,095
En allant au fichier index.html,

14
00:01:03,095 --> 00:01:09,325
nous voyons que nous avons ce code JavaScript au bas de ce fichier index.html.

15
00:01:09,325 --> 00:01:12,930
Je préférerais garder ce code JavaScript dans

16
00:01:12,930 --> 00:01:19,385
un fichier séparé qui contient tous nos scripts,

17
00:01:19,385 --> 00:01:23,015
puis inclure ce fichier dans mon index.html.

18
00:01:23,015 --> 00:01:31,155
Pour ce faire, créons un autre dossier ici avec le nom js.

19
00:01:31,155 --> 00:01:34,210
Et dans ce dossier js,

20
00:01:34,210 --> 00:01:41,520
je vais créer un nouveau fichier avec le nom scripts.js.

21
00:01:42,120 --> 00:01:49,060
Et aller à index.html,

22
00:01:49,060 --> 00:01:54,890
je vais simplement couper ce code JavaScript d'ici,

23
00:01:54,890 --> 00:02:01,120
puis coller cela dans le fichier scripts.js,

24
00:02:01,120 --> 00:02:05,305
puis enregistrer les modifications dans le fichier scripts.js.

25
00:02:05,305 --> 00:02:10,915
Maintenant que nous avons déplacé tout notre code JavaScript dans son propre fichier,

26
00:02:10,915 --> 00:02:20,430
je vais maintenant inclure ce fichier JavaScript dans mon index.html juste là.

27
00:02:20,430 --> 00:02:24,540
Je dirais <script src =

28
00:02:24,540 --> 00:02:31,040
« js/scripts.js » Donc de cette façon,

29
00:02:31,040 --> 00:02:35,005
tout mon code JavaScript est maintenant inclus dans mon fichier index.html.

30
00:02:35,005 --> 00:02:40,390
De cette façon, mon fichier index.html contient tout le code html,

31
00:02:40,390 --> 00:02:46,345
et tout mon code CSS et JavaScript sont désactivés dans leurs propres fichiers séparés.

32
00:02:46,345 --> 00:02:52,590
Laissez-moi copier cette ligne de scripts à partir de la page index.html,

33
00:02:52,590 --> 00:02:56,330
puis aller à la page aboutus.html,

34
00:02:56,330 --> 00:02:59,365
faites défiler jusqu'au bas où j'ai inclus

35
00:02:59,365 --> 00:03:02,540
d'autres scripts, puis collez ceci.

36
00:03:02,540 --> 00:03:07,405
De même, laissez-moi passer à la page contactus.html,

37
00:03:07,405 --> 00:03:11,545
et à nouveau faites défiler vers le bas du fichier là.

38
00:03:11,545 --> 00:03:13,975
Laisse-moi coller cette ligne.

39
00:03:13,975 --> 00:03:18,205
Sauvegardons les modifications, puis passons à l'étape suivante.

40
00:03:18,205 --> 00:03:23,075
L' étape suivante que je voudrais faire est d'installer quelques

41
00:03:23,075 --> 00:03:29,905
modules NPM que je vais utiliser pour automatiser certaines tâches.

42
00:03:29,905 --> 00:03:34,310
Le premier module NMP que je vais installer s'appelle onchange.

43
00:03:34,310 --> 00:03:42,335
Ce module onchange va regarder les fichiers dans mon dossier de projet,

44
00:03:42,335 --> 00:03:44,445
puis chaque fois que ces fichiers changent,

45
00:03:44,445 --> 00:03:48,865
il déclenche automatiquement une tâche à exécuter.

46
00:03:48,865 --> 00:03:50,660
De cette façon, par exemple,

47
00:03:50,660 --> 00:03:56,860
si je mets en place une montre sans citation sur certains fichiers,

48
00:03:56,860 --> 00:03:59,305
disons par exemple mon fichier SCSS,

49
00:03:59,305 --> 00:04:02,270
alors chaque fois que j'apporte des modifications à mon fichier SCSS,

50
00:04:02,270 --> 00:04:07,220
il sera automatiquement recompilé dans le fichier CSS correspondant.

51
00:04:07,220 --> 00:04:11,565
Nous avons déjà le script qui fait la recompilation.

52
00:04:11,565 --> 00:04:16,080
Donc tout ce que j'ai à faire est de mettre en place une montre sur ce dossier particulier.

53
00:04:16,080 --> 00:04:20,675
Maintenant, c'est là que je vais utiliser le module NPM appelé Onchange.

54
00:04:20,675 --> 00:04:23,170
Il existe un autre modèle NPM appelé Watch,

55
00:04:23,170 --> 00:04:25,945
que vous pouvez également utiliser dans le même but.

56
00:04:25,945 --> 00:04:29,240
Dans cet exercice, je vais utiliser le module Onchange,

57
00:04:29,240 --> 00:04:34,765
puis nous traitons de grant and gulp dans les leçons ultérieures,

58
00:04:34,765 --> 00:04:37,580
nous allons utiliser le module Watch dans le même but.

59
00:04:37,580 --> 00:04:42,845
En outre, je vais également installer un autre module NPM appelé shell parallèle.

60
00:04:42,845 --> 00:04:46,250
Ce module Parallelshell me permet d'exécuter

61
00:04:46,250 --> 00:04:51,320
plusieurs scripts NPM dans Parallelshells comme son nom l'indique.

62
00:04:51,320 --> 00:04:55,095
Ainsi, plusieurs scripts NPM peuvent être

63
00:04:55,095 --> 00:04:59,785
exécutés simultanément et me permettent de surveiller divers fichiers,

64
00:04:59,785 --> 00:05:03,835
et d'effectuer d'autres tâches.

65
00:05:03,835 --> 00:05:06,340
Donc, permet d'installer ces deux modules NPM.

66
00:05:06,340 --> 00:05:09,645
Nous allons les installer localement dans ce projet particulier.

67
00:05:09,645 --> 00:05:14,555
Donc, pour ce faire, je vais taper npm install.

68
00:05:14,555 --> 00:05:20,420
Je dois —save-dev, puis je dirais onchange

69
00:05:20,420 --> 00:05:27,540
et parallelshell et ensuite attendre que ces deux modules NPM soient installés.

70
00:05:27,540 --> 00:05:29,755
Une fois les deux modules installés,

71
00:05:29,755 --> 00:05:35,745
je vais inclure quelques scripts NPM dans mon fichier package.json.

72
00:05:35,745 --> 00:05:40,930
Et je vais vous expliquer la raison car nous y incluons ces scripts.

73
00:05:40,930 --> 00:05:43,650
Pour revenir à mon fichier package.json,

74
00:05:43,650 --> 00:05:46,270
juste après ce SCSS,

75
00:05:46,270 --> 00:05:52,565
je vais inclure un autre script appelé « watch:scss ».

76
00:05:52,565 --> 00:05:55,125
Et comme son nom l'indique,

77
00:05:55,125 --> 00:05:59,290
cela va garder une surveillance sur les fichiers SCSS.

78
00:05:59,290 --> 00:06:07,435
Donc, c'est là que j'invoquerai le module NPM onchange que je viens d'installer,

79
00:06:07,435 --> 00:06:12,610
puis je dirais un code unique 'css/*.scss ».

80
00:06:13,960 --> 00:06:20,465
Donc, ce qui signifie que garder la surveillance sur tous les fichiers SCSS qui sont là dans le dossier CSS.

81
00:06:20,465 --> 00:06:22,095
Si l'un d'eux change,

82
00:06:22,095 --> 00:06:29,535
alors vous allez déclencher ce script particulier et le script est « —npm

83
00:06:29,535 --> 00:06:35,915
run scss » parce que c'

84
00:06:35,915 --> 00:06:42,380
est le script qui va faire la recompilation de mon code SCSS dans le code CSS correspondant.

85
00:06:42,380 --> 00:06:46,075
Donc avec ça, j'ai mis en place une montre pour mon SCSS.

86
00:06:46,075 --> 00:06:49,160
Évidemment, je peux taper « nmp watch : scss ».

87
00:06:49,160 --> 00:06:56,700
Et puis il déclenchera le script là-bas avec le module onchange,

88
00:06:56,700 --> 00:06:58,690
donc il gardera une surveillance sur cela.

89
00:06:58,690 --> 00:07:02,960
Si vous faites cet exercice sur une machine Windows,

90
00:07:02,960 --> 00:07:06,345
au lieu de la citation simple dans le script,

91
00:07:06,345 --> 00:07:10,760
vous devriez remplacer cela par la barre oblique inverse et le guillemet double.

92
00:07:10,760 --> 00:07:13,660
De même, l'autre guillemet simple

93
00:07:13,660 --> 00:07:16,490
remplace également celui par la barre oblique inverse et le guillemet double.

94
00:07:16,490 --> 00:07:22,770
Donc, voici comment le script va ressembler sur une machine Windows.

95
00:07:22,770 --> 00:07:28,385
Maintenant, je vais utiliser Parallelshell

96
00:07:28,385 --> 00:07:35,765
pour déclencher plusieurs de ces scripts pour être simultanément actifs.

97
00:07:35,765 --> 00:07:39,670
Donc, je dirais « parallelshell »,

98
00:07:39,990 --> 00:07:42,660
puis entre guillemets,

99
00:07:42,660 --> 00:07:49,150
je dirais 'npm run watch : scss'.

100
00:07:49,590 --> 00:07:55,605
Ainsi, le Parallelshell prend plusieurs de ces paramètres en tant que paramètres,

101
00:07:55,605 --> 00:07:58,380
chacun entre guillemets simples.

102
00:07:58,380 --> 00:08:05,380
Et le second est 'npm run lite'.

103
00:08:05,550 --> 00:08:11,630
Vous pouvez donc voir que ce Parallelshell me permet d'exécuter deux scripts simultanément, l'

104
00:08:11,630 --> 00:08:14,370
un pour surveiller mon fichier SCSS,

105
00:08:14,370 --> 00:08:17,745
l'autre pour exécuter le shell lite.

106
00:08:17,745 --> 00:08:21,840
Si vous faites cet exercice sur une machine Windows,

107
00:08:21,840 --> 00:08:25,245
au lieu du code unique dans le script,

108
00:08:25,245 --> 00:08:29,665
vous devriez remplacer celui-ci par la barre oblique inverse et le guillemet double.

109
00:08:29,665 --> 00:08:32,560
De même, l'autre guillemet simple

110
00:08:32,560 --> 00:08:35,390
remplace également celui par la barre oblique inverse et le guillemet double.

111
00:08:35,390 --> 00:08:41,685
C' est ainsi que le script va ressembler sur une machine Windows.

112
00:08:41,685 --> 00:08:44,335
Maintenant, après avoir fait ces changements,

113
00:08:44,335 --> 00:08:48,160
laissez-moi enregistrer les changements et puis je vais monter

114
00:08:48,160 --> 00:08:52,890
ici et puis commencer un script que j'ai ici.

115
00:08:52,890 --> 00:08:59,480
Je vais changer cela de « npm run lite » à « npm run watch : all ».

116
00:09:01,950 --> 00:09:05,145
Et enregistrez les modifications ici.

117
00:09:05,145 --> 00:09:10,460
Donc, avec cela, les scripts dont j'ai besoin sont maintenant configurés.

118
00:09:10,460 --> 00:09:15,745
Donc maintenant, je peux aller de l'avant et faire

119
00:09:15,745 --> 00:09:21,124
« npm start » et qui va essentiellement démarrer ces deux scripts simultanément, l'

120
00:09:21,124 --> 00:09:24,850
un en gardant une surveillance sur mes fichiers SCSS qui

121
00:09:24,850 --> 00:09:28,825
à son tour déclenchera la compilation du SCSS en CSS,

122
00:09:28,825 --> 00:09:32,150
l'autre qui démarre mon serveur lite.

123
00:09:32,150 --> 00:09:41,125
Maintenant, j'ai commencé sous l'onglet de la table, puis je suis passé dans le dossier du projet,

124
00:09:41,125 --> 00:09:42,665
puis j'ajoute l'invite.

125
00:09:42,665 --> 00:09:44,705
Je vais taper « npm start ».

126
00:09:44,705 --> 00:09:46,585
Et cela devrait déclencher à la

127
00:09:46,585 --> 00:09:54,435
fois mon serveur lite qui va enregistrer les fichiers de mon dossier de confusion,

128
00:09:54,435 --> 00:10:02,290
et aussi déclencher le module Onchange pour garder une surveillance sur les fichiers SCSS.

129
00:10:02,290 --> 00:10:09,100
Pour vous aider à illustrer comment cette Onchange garde une surveillance sur mes fichiers SCSS,

130
00:10:09,100 --> 00:10:14,705
ce que je vais faire est d'aller dans mon fichier .scss stylesici,

131
00:10:14,705 --> 00:10:18,675
puis je vais simplement enregistrer le fichier à nouveau.

132
00:10:18,675 --> 00:10:20,860
Maintenant, chaque fois que ce fichier est enregistré,

133
00:10:20,860 --> 00:10:22,620
je ne vais pas y apporter de modifications.

134
00:10:22,620 --> 00:10:25,755
Je vais juste frapper la sauvegarde sur le fichier.

135
00:10:25,755 --> 00:10:27,840
Donc, à chaque fois que ce fichier est modifié,

136
00:10:27,840 --> 00:10:30,620
vous verrez que immédiatement

137
00:10:32,750 --> 00:10:40,495
Onchange déclenchera le script SAS du nœud à exécuter,

138
00:10:40,495 --> 00:10:47,555
qui compilera le fichier de SCSS en CSS et crée le fichier CSS ici,

139
00:10:47,555 --> 00:10:50,335
puis enregistre le fichier qui déclenchera également

140
00:10:50,335 --> 00:10:55,450
ma page Web pour le recharger dans le navigateur.

141
00:10:55,450 --> 00:11:03,285
Donc, c'est essentiellement ce que nous avons réalisé en utilisant le module Onchange pour

142
00:11:03,285 --> 00:11:07,660
garder une surveillance sur les fichiers qui ont ensuite changé

143
00:11:07,660 --> 00:11:12,395
déclenchera certains des scripts NPM automatiquement.

144
00:11:12,395 --> 00:11:20,790
Maintenant, cela nous libère des préoccupations concernant le déclenchement manuel de ces tâches.

145
00:11:20,790 --> 00:11:25,390
Par exemple, si vous avez un ensemble de tâches que vous souhaitez déclencher automatiquement,

146
00:11:25,390 --> 00:11:27,395
certaines modifications se produisent.

147
00:11:27,395 --> 00:11:35,100
Vous pouvez facilement configurer de telles tâches de surveillance pour garder une surveillance sur ces modifications.

148
00:11:35,100 --> 00:11:37,785
Maintenant, je l'ai illustré avec un seul exemple.

149
00:11:37,785 --> 00:11:39,985
Dans mon exemple ici,

150
00:11:39,985 --> 00:11:45,260
je ne modifie que les fichiers CSS qui doivent être compilés.

151
00:11:45,260 --> 00:11:50,125
Mais plus tard, nous travaillons avec des frameworks JavaScript.

152
00:11:50,125 --> 00:11:57,335
Vous verrez que vous voudrez peut-être déclencher des compilations lorsque divers fichiers ont changé.

153
00:11:57,335 --> 00:12:02,964
Et tout cela peut être facilement géré à l'aide de ces tâches de montre.

154
00:12:02,964 --> 00:12:07,560
Est-ce que cela, nous terminons cet exercice.

155
00:12:07,560 --> 00:12:13,685
Ici, nous avons appris à configurer quelques scripts NPM supplémentaires

156
00:12:13,685 --> 00:12:20,855
et à déclencher automatiquement certains scripts en utilisant le module onchange NPM.

157
00:12:20,855 --> 00:12:24,550
Nous avons également vu l'utilisation du module shell parallèle pour exécuter

158
00:12:24,550 --> 00:12:32,050
plusieurs scripts NPM simultanément dans notre fenêtre de terminal.

159
00:12:32,200 --> 00:12:42,890
C' est un bon point pour vous de faire un commentaire Git avec le message « NPM Scripts Part 1".