1
00:00:00,000 --> 00:00:04,674
[MUSIC]

2
00:00:04,674 --> 00:00:08,968
Jusqu'à présent, nous nous sommes concentrés sur la conception et la

3
00:00:08,968 --> 00:00:14,540
mise en œuvre de notre site Web, que ce soit du code HTML, CSS ou JavaScript.

4
00:00:16,170 --> 00:00:21,890
Une fois votre site Web prêt, l'étape suivante consiste à être en mesure de construire votre site Web et de le

5
00:00:21,890 --> 00:00:26,010
déployer sur un serveur Web, afin qu'il devienne accessible au public.

6
00:00:27,300 --> 00:00:30,750
Ensuite, notre deuxième série d'étapes que nous devons suivre avant que

7
00:00:30,750 --> 00:00:34,580
votre site Web soit prêt pour le déploiement sur un serveur Web.

8
00:00:34,580 --> 00:00:39,079
C' est ce que nous allons examiner dans cette leçon et dans la prochaine leçon.

9
00:00:40,915 --> 00:00:43,479
Comme je l'ai mentionné, le développement et

10
00:00:43,479 --> 00:00:47,870
le déploiement web impliquent beaucoup de tâches répétitives.

11
00:00:47,870 --> 00:00:54,820
Évidemment, l'écriture du code HTML/CSS et JavaScript en est une partie.

12
00:00:54,820 --> 00:00:57,600
Mais l'autre partie est le fait que si vous écrivez

13
00:00:59,200 --> 00:01:04,170
le code CSS en utilisant l'un des langages de prétraitement CSS, comme Sass ou

14
00:01:04,170 --> 00:01:09,200
Less, alors vous devez convertir ce code en code CSS correspondant.

15
00:01:09,200 --> 00:01:14,614
Par la suite, vous devez effectuer un traitement supplémentaire sur vos

16
00:01:14,614 --> 00:01:20,810
fichiers CSS comme la minification, le compactage et la concaténation.

17
00:01:20,810 --> 00:01:24,850
Nous en parlerons un peu plus dans les prochaines diapositives.

18
00:01:24,850 --> 00:01:30,090
De même, avec votre code JavaScript, vous devez faire

19
00:01:30,090 --> 00:01:34,580
JShinting, en vérifiant les erreurs potentielles.

20
00:01:34,580 --> 00:01:40,590
Puis concaténation de divers fichiers de script

21
00:01:40,590 --> 00:01:45,100
, puis même uglification et le mangling du code.

22
00:01:45,100 --> 00:01:49,240
Nous en parlerons un peu dans les prochaines diapositives.

23
00:01:49,240 --> 00:01:54,889
Toutes ces tâches sont des tâches répétitives, que nous aimerions automatiser

24
00:01:54,889 --> 00:02:00,536
autant que possible, afin que nous puissions nous concentrer sur la conception et la

25
00:02:00,536 --> 00:02:05,730
construction réelles de notre site Web, plutôt que sur ces tâches répétitives.

26
00:02:05,730 --> 00:02:09,623
Pour que le principe DRY, ne vous répétez pas le principe,

27
00:02:09,623 --> 00:02:11,840
est très essentiel dans ce cas.

28
00:02:11,840 --> 00:02:16,840
Nous ne voulons pas perdre notre temps sur de telles tâches de combustion répétitives,

29
00:02:16,840 --> 00:02:20,140
et plutôt essayer de les automatiser autant que possible pour

30
00:02:20,140 --> 00:02:23,410
qu'elles puissent être exécutées chaque fois que nécessaire.

31
00:02:23,410 --> 00:02:27,649
Parlons de certaines de ces tâches répétitives un peu plus en détail.

32
00:02:28,950 --> 00:02:33,580
Prenons l'exemple de CSS comme un cas.

33
00:02:33,580 --> 00:02:37,470
Lorsque nous écrivons du code CSS, nous écrivons souvent le code

34
00:02:37,470 --> 00:02:41,440
en utilisant l'un des langages de prétraitement comme Less ou Sass.

35
00:02:41,440 --> 00:02:46,920
Maintenant, une fois que le code est écrit, il doit être converti en CSS en utilisant l'

36
00:02:46,920 --> 00:02:52,460
un des préprocesseurs comme nous l'avons vu dans la leçon précédente.

37
00:02:54,130 --> 00:02:59,660
Là, nous pouvons avoir besoin de faire un préfixe spécifique au fournisseur pour

38
00:02:59,660 --> 00:03:06,300
notre code CSS pour résoudre les problèmes qui pourraient survenir avec différents navigateurs.

39
00:03:06,300 --> 00:03:12,599
C' est donc là que la tâche de faire l'auto-préfixation est utilisée

40
00:03:12,599 --> 00:03:16,980
, ce qui peut être fait automatiquement pour nous.

41
00:03:16,980 --> 00:03:20,430
De même, une fois que votre code CSS est écrit, évidemment,

42
00:03:20,430 --> 00:03:26,010
la façon dont nous écrivons du code CSS est d'être humainement lisible.

43
00:03:26,010 --> 00:03:30,550
Mais pour une machine, cela ne se soucie pas vraiment de savoir s'il y a suffisamment d'espaces

44
00:03:30,550 --> 00:03:34,000
entre le code ou s'il est correctement formaté ou non.

45
00:03:35,100 --> 00:03:41,274
Donc, la minification est le processus de suppression de tous les caractères inutiles,

46
00:03:41,274 --> 00:03:46,080
l'espace blanc, les sauts de ligne, les commentaires, de votre code CSS.

47
00:03:46,080 --> 00:03:51,280
Pour que votre résultat final soit un fichier très compact avec un nombre minimum

48
00:03:51,280 --> 00:03:56,306
de caractères, de sorte qu'il peut être servi très, très rapidement.

49
00:03:56,306 --> 00:03:57,812
Mais en même temps,

50
00:03:57,812 --> 00:04:03,099
vous voulez préserver la fonctionnalité que vous avez conçue dans votre code CSS.

51
00:04:04,550 --> 00:04:09,140
De même, vous pouvez distribuer votre code CSS dans de nombreux fichiers,

52
00:04:09,140 --> 00:04:12,870
pendant que vous concevez et construisez votre site Web.

53
00:04:12,870 --> 00:04:17,620
Vous voudrez peut-être les concaténer tous dans un seul fichier CSS à la fin, de

54
00:04:17,620 --> 00:04:21,430
sorte qu'un seul fichier CSS doit être téléchargé

55
00:04:21,430 --> 00:04:25,290
par le navigateur lorsqu'il rend votre site Web.

56
00:04:25,290 --> 00:04:27,150
Donc, la concaténation est

57
00:04:27,150 --> 00:04:32,340
une autre tâche qui est impliquée lorsque vous construisez votre site Web.

58
00:04:33,660 --> 00:04:38,940
De même, lorsque vous écrivez du code JavaScript, que ce soit JavaScript pur

59
00:04:38,940 --> 00:04:44,800
ou jQuery ou l'un des frameworks que nous utiliserons dans

60
00:04:44,800 --> 00:04:50,640
les futurs cours de cette spécialisation, vous devrez écrire du code JavaScript.

61
00:04:50,640 --> 00:04:53,550
Donc, une fois que vous avez écrit le code JavaScript, vous voudrez être en mesure de vérifier

62
00:04:53,550 --> 00:04:57,510
le code JavaScript pour les erreurs et les problèmes potentiels.

63
00:04:57,510 --> 00:05:00,576
Des choses comme des points-virgules manquants, une

64
00:05:02,810 --> 00:05:09,030
mauvaise utilisation du langage, et ainsi de suite, donc ce que nous appelons comme analyse de code statique.

65
00:05:09,030 --> 00:05:13,490
Donc, si vous voulez être en mesure d'effectuer cela, avant même que nous déployions notre

66
00:05:14,830 --> 00:05:18,180
site Web sur le serveur Web.

67
00:05:18,180 --> 00:05:23,379
De même, nous pourrions organiser notre code en plusieurs fichiers JavaScript.

68
00:05:23,379 --> 00:05:28,135
Lorsque nous déployons réellement, nous pouvons vouloir concaténer tous ces fichiers dans

69
00:05:28,135 --> 00:05:33,515
un seul fichier JavaScript, puis l'utiliser dans nos pages Web.

70
00:05:33,515 --> 00:05:36,775
Et cette concaténation peut être faite automatiquement.

71
00:05:36,775 --> 00:05:42,340
De même, l'uglification du code JavaScript, qui signifie

72
00:05:42,340 --> 00:05:46,720
minification, ce qui signifie supprimer tous les espaces et

73
00:05:46,720 --> 00:05:48,880
commentaires inutiles et ainsi de suite.

74
00:05:48,880 --> 00:05:53,670
Et en mangeant le code, ce qui signifie réduire les noms des

75
00:05:53,670 --> 00:05:58,100
variables locales en lettres simples dans la mesure du possible.

76
00:05:58,100 --> 00:06:01,562
Maintenant, du point de vue d'un ordinateur,

77
00:06:01,562 --> 00:06:06,790
ça ne se soucie pas vraiment de ce que le code ressemble tant qu'il fonctionne correctement.

78
00:06:06,790 --> 00:06:12,230
Pour un format lisible par l'homme, nous écrivons évidemment du code de

79
00:06:12,230 --> 00:06:17,960
manière beaucoup plus élaborée, de sorte qu'il nous est plus facile de suivre ce que fait le code.

80
00:06:17,960 --> 00:06:19,620
Donc, lorsque vous déployez réellement,

81
00:06:19,620 --> 00:06:23,460
vous pouvez souhaiter supprimer toutes les fonctionnalités étrangères de votre code.

82
00:06:23,460 --> 00:06:29,226
Et puis compactez-le pour que la quantité minimale de code soit servie.

83
00:06:29,226 --> 00:06:35,270
Dans le même temps, une fois le

84
00:06:35,270 --> 00:06:37,200
processus de concaténation et d'uglification JShint terminé,

85
00:06:37,200 --> 00:06:41,990
vous pouvez toujours vous assurer que votre code résultant fonctionnera toujours correctement.

86
00:06:41,990 --> 00:06:46,490
Donc, vous voudrez peut-être revérifier votre code pour des erreurs potentielles.

87
00:06:47,550 --> 00:06:52,127
CSS et JavaScript sont deux aspects majeurs de votre développement web auxquels vous

88
00:06:52,127 --> 00:06:55,640
devez évidemment prêter beaucoup d'attention.

89
00:06:55,640 --> 00:06:59,640
Mais il y a beaucoup d'autres tâches plus petites que vous devez effectuer

90
00:06:59,640 --> 00:07:02,870
avant que votre site Web soit prêt pour le déploiement.

91
00:07:02,870 --> 00:07:08,601
Vous pouvez inclure beaucoup d'images dans vos pages Web.

92
00:07:08,601 --> 00:07:14,574
Une fois votre site Web prêt, vous pouvez compacter ces images afin d'

93
00:07:14,574 --> 00:07:17,881
optimiser la taille des fichiers, de sorte

94
00:07:17,881 --> 00:07:23,440
que leurs images soient des fichiers de taille minimale à déployer.

95
00:07:24,510 --> 00:07:30,310
De même, pendant que vous faites du développement, vous pouvez apporter des modifications,

96
00:07:30,310 --> 00:07:35,580
par exemple, à vos fichiers Sass ou à votre code JavaScript.

97
00:07:35,580 --> 00:07:38,268
Lorsque de telles modifications sont effectuées,

98
00:07:38,268 --> 00:07:42,748
vous voulez être en mesure d'effectuer automatiquement ces tâches,

99
00:07:42,748 --> 00:07:47,990
comme les tâches de concaténation, de minification et d'uglification.

100
00:07:47,990 --> 00:07:52,110
Nous pourrions donc utiliser des tâches de surveillance,

101
00:07:52,110 --> 00:07:56,480
dont le travail principal est de surveiller tous ces fichiers.

102
00:07:56,480 --> 00:07:59,340
Et si des modifications sont apportées à ces fichiers,

103
00:07:59,340 --> 00:08:03,070
les tâches seront automatiquement exécutées.

104
00:08:03,070 --> 00:08:09,260
Cela libérera beaucoup de notre temps de faire des tâches répétitives manuellement.

105
00:08:10,610 --> 00:08:15,320
Nous examinerons certains de ces aspects plus en détail dans les exercices qui suivent.

106
00:08:16,660 --> 00:08:22,060
Un autre aspect, pendant que vous faites votre développement,

107
00:08:22,060 --> 00:08:25,940
est de pouvoir servir votre code et

108
00:08:25,940 --> 00:08:30,570
regarder le code dans votre navigateur.

109
00:08:30,570 --> 00:08:37,960
Nous avons donc vu l'utilisation du serveur en direct dans notre développement précédent,

110
00:08:37,960 --> 00:08:42,330
où nous avions le serveur en marche et en service le code.

111
00:08:42,330 --> 00:08:46,530
Pour que nous puissions voir les changements que nous faisons instantanément

112
00:08:48,230 --> 00:08:51,020
sont rendus dans le navigateur.

113
00:08:51,020 --> 00:08:55,549
Donc, pour cela, nous avons besoin d'un mécanisme de serveur et de livereload, et le

114
00:08:55,549 --> 00:09:01,340
serveur en direct que nous avons vu plus tôt est un exemple de la façon dont nous pouvons y parvenir.

115
00:09:02,740 --> 00:09:07,850
Enfin, si vous écrivez du code, vous devez évidemment effectuer

116
00:09:07,850 --> 00:09:14,210
des tests de votre code, ce qui, dans le cas de Bootstrap, est beaucoup moins considéré.

117
00:09:14,210 --> 00:09:18,930
Mais à mesure que vous continuez à utiliser divers frameworks JavaScript,

118
00:09:18,930 --> 00:09:21,915
tester devient une tâche tout aussi importante.

119
00:09:23,190 --> 00:09:28,680
Enfin, vous voulez être en mesure d'accomplir toutes ces tâches,

120
00:09:28,680 --> 00:09:34,250
puis de créer votre code de déploiement final qui peut ensuite être téléchargé

121
00:09:34,250 --> 00:09:40,790
sur votre serveur Web pour rendre votre site Web accessible au grand public.

122
00:09:42,450 --> 00:09:48,115
Les étapes impliquées dans la construction de votre site pour le déploiement, ce

123
00:09:48,115 --> 00:09:53,950
que nous appelons la création des fichiers de distribution, sont également une tâche tout aussi importante.

124
00:09:53,950 --> 00:09:59,754
Nous examinerons certains d'entre eux à travers des exemples dans le prochain exercice et

125
00:09:59,754 --> 00:10:04,470
aussi la leçon suivante où nous examinerons les coureurs de tâches.

126
00:10:04,470 --> 00:10:10,569
[ MUSIQUE]