[MUSIC]
Jusqu'à présent, nous nous sommes concentrés sur la conception et la
mise en œuvre de notre site Web, que ce soit du code HTML, CSS ou JavaScript.
Une fois votre site Web prêt, l'étape suivante consiste à être en mesure de construire votre site Web et de le
déployer sur un serveur Web, afin qu'il devienne accessible au public.
Ensuite, notre deuxième série d'étapes que nous devons suivre avant que
votre site Web soit prêt pour le déploiement sur un serveur Web.
C' est ce que nous allons examiner dans cette leçon et dans la prochaine leçon.
Comme je l'ai mentionné, le développement et
le déploiement web impliquent beaucoup de tâches répétitives.
Évidemment, l'écriture du code HTML/CSS et JavaScript en est une partie.
Mais l'autre partie est le fait que si vous écrivez
le code CSS en utilisant l'un des langages de prétraitement CSS, comme Sass ou
Less, alors vous devez convertir ce code en code CSS correspondant.
Par la suite, vous devez effectuer un traitement supplémentaire sur vos
fichiers CSS comme la minification, le compactage et la concaténation.
Nous en parlerons un peu plus dans les prochaines diapositives.
De même, avec votre code JavaScript, vous devez faire
JShinting, en vérifiant les erreurs potentielles.
Puis concaténation de divers fichiers de script
, puis même uglification et le mangling du code.
Nous en parlerons un peu dans les prochaines diapositives.
Toutes ces tâches sont des tâches répétitives, que nous aimerions automatiser
autant que possible, afin que nous puissions nous concentrer sur la conception et la
construction réelles de notre site Web, plutôt que sur ces tâches répétitives.
Pour que le principe DRY, ne vous répétez pas le principe,
est très essentiel dans ce cas.
Nous ne voulons pas perdre notre temps sur de telles tâches de combustion répétitives,
et plutôt essayer de les automatiser autant que possible pour
qu'elles puissent être exécutées chaque fois que nécessaire.
Parlons de certaines de ces tâches répétitives un peu plus en détail.
Prenons l'exemple de CSS comme un cas.
Lorsque nous écrivons du code CSS, nous écrivons souvent le code
en utilisant l'un des langages de prétraitement comme Less ou Sass.
Maintenant, une fois que le code est écrit, il doit être converti en CSS en utilisant l'
un des préprocesseurs comme nous l'avons vu dans la leçon précédente.
Là, nous pouvons avoir besoin de faire un préfixe spécifique au fournisseur pour
notre code CSS pour résoudre les problèmes qui pourraient survenir avec différents navigateurs.
C' est donc là que la tâche de faire l'auto-préfixation est utilisée
, ce qui peut être fait automatiquement pour nous.
De même, une fois que votre code CSS est écrit, évidemment,
la façon dont nous écrivons du code CSS est d'être humainement lisible.
Mais pour une machine, cela ne se soucie pas vraiment de savoir s'il y a suffisamment d'espaces
entre le code ou s'il est correctement formaté ou non.
Donc, la minification est le processus de suppression de tous les caractères inutiles,
l'espace blanc, les sauts de ligne, les commentaires, de votre code CSS.
Pour que votre résultat final soit un fichier très compact avec un nombre minimum
de caractères, de sorte qu'il peut être servi très, très rapidement.
Mais en même temps,
vous voulez préserver la fonctionnalité que vous avez conçue dans votre code CSS.
De même, vous pouvez distribuer votre code CSS dans de nombreux fichiers,
pendant que vous concevez et construisez votre site Web.
Vous voudrez peut-être les concaténer tous dans un seul fichier CSS à la fin, de
sorte qu'un seul fichier CSS doit être téléchargé
par le navigateur lorsqu'il rend votre site Web.
Donc, la concaténation est
une autre tâche qui est impliquée lorsque vous construisez votre site Web.
De même, lorsque vous écrivez du code JavaScript, que ce soit JavaScript pur
ou jQuery ou l'un des frameworks que nous utiliserons dans
les futurs cours de cette spécialisation, vous devrez écrire du code JavaScript.
Donc, une fois que vous avez écrit le code JavaScript, vous voudrez être en mesure de vérifier
le code JavaScript pour les erreurs et les problèmes potentiels.
Des choses comme des points-virgules manquants, une
mauvaise utilisation du langage, et ainsi de suite, donc ce que nous appelons comme analyse de code statique.
Donc, si vous voulez être en mesure d'effectuer cela, avant même que nous déployions notre
site Web sur le serveur Web.
De même, nous pourrions organiser notre code en plusieurs fichiers JavaScript.
Lorsque nous déployons réellement, nous pouvons vouloir concaténer tous ces fichiers dans
un seul fichier JavaScript, puis l'utiliser dans nos pages Web.
Et cette concaténation peut être faite automatiquement.
De même, l'uglification du code JavaScript, qui signifie
minification, ce qui signifie supprimer tous les espaces et
commentaires inutiles et ainsi de suite.
Et en mangeant le code, ce qui signifie réduire les noms des
variables locales en lettres simples dans la mesure du possible.
Maintenant, du point de vue d'un ordinateur,
ça ne se soucie pas vraiment de ce que le code ressemble tant qu'il fonctionne correctement.
Pour un format lisible par l'homme, nous écrivons évidemment du code de
manière beaucoup plus élaborée, de sorte qu'il nous est plus facile de suivre ce que fait le code.
Donc, lorsque vous déployez réellement,
vous pouvez souhaiter supprimer toutes les fonctionnalités étrangères de votre code.
Et puis compactez-le pour que la quantité minimale de code soit servie.
Dans le même temps, une fois le
processus de concaténation et d'uglification JShint terminé,
vous pouvez toujours vous assurer que votre code résultant fonctionnera toujours correctement.
Donc, vous voudrez peut-être revérifier votre code pour des erreurs potentielles.
CSS et JavaScript sont deux aspects majeurs de votre développement web auxquels vous
devez évidemment prêter beaucoup d'attention.
Mais il y a beaucoup d'autres tâches plus petites que vous devez effectuer
avant que votre site Web soit prêt pour le déploiement.
Vous pouvez inclure beaucoup d'images dans vos pages Web.
Une fois votre site Web prêt, vous pouvez compacter ces images afin d'
optimiser la taille des fichiers, de sorte
que leurs images soient des fichiers de taille minimale à déployer.
De même, pendant que vous faites du développement, vous pouvez apporter des modifications,
par exemple, à vos fichiers Sass ou à votre code JavaScript.
Lorsque de telles modifications sont effectuées,
vous voulez être en mesure d'effectuer automatiquement ces tâches,
comme les tâches de concaténation, de minification et d'uglification.
Nous pourrions donc utiliser des tâches de surveillance,
dont le travail principal est de surveiller tous ces fichiers.
Et si des modifications sont apportées à ces fichiers,
les tâches seront automatiquement exécutées.
Cela libérera beaucoup de notre temps de faire des tâches répétitives manuellement.
Nous examinerons certains de ces aspects plus en détail dans les exercices qui suivent.
Un autre aspect, pendant que vous faites votre développement,
est de pouvoir servir votre code et
regarder le code dans votre navigateur.
Nous avons donc vu l'utilisation du serveur en direct dans notre développement précédent,
où nous avions le serveur en marche et en service le code.
Pour que nous puissions voir les changements que nous faisons instantanément
sont rendus dans le navigateur.
Donc, pour cela, nous avons besoin d'un mécanisme de serveur et de livereload, et le
serveur en direct que nous avons vu plus tôt est un exemple de la façon dont nous pouvons y parvenir.
Enfin, si vous écrivez du code, vous devez évidemment effectuer
des tests de votre code, ce qui, dans le cas de Bootstrap, est beaucoup moins considéré.
Mais à mesure que vous continuez à utiliser divers frameworks JavaScript,
tester devient une tâche tout aussi importante.
Enfin, vous voulez être en mesure d'accomplir toutes ces tâches,
puis de créer votre code de déploiement final qui peut ensuite être téléchargé
sur votre serveur Web pour rendre votre site Web accessible au grand public.
Les étapes impliquées dans la construction de votre site pour le déploiement, ce
que nous appelons la création des fichiers de distribution, sont également une tâche tout aussi importante.
Nous examinerons certains d'entre eux à travers des exemples dans le prochain exercice et
aussi la leçon suivante où nous examinerons les coureurs de tâches.
[ MUSIQUE]