Pug JS : un moteur de template pour Node JS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h18
de formation
14
leçons vidéo
2
chapitres
Débutant
niveau requis
Sébastien Imbert
Sébastien Imbert
Formateur

Pug JS : un moteur de template pour Node JS

4.8/5 Trustpilot (1392 avis) Satisfait ou remboursé
1h18
de formation
14
leçons vidéo
2
chapitres

Un des problèmes qui peut survenir rapidement lors de l'intégration d'un site, est le manque de lisibilité et de maintenabilité du code HTML.
Ce problème peut être réglé avec Pug.js : un moteur de template pour Node.js.
Pug.js est un outil qui fonctionne comme un préprocesseur pour le HTML, comme SASS ou LESS le font pour le CSS.

L'objectif de Pug.js est de vous permettre de coder la structure d'un site dans une syntaxe bien plus simple et lisible que celle du HTML, et de rendre votre code maintenable en vous offrant la possibilité de créer entre autres, des variables, mixins, includes...

Au programme de ce tuto Pug.js

Pug.js nécessitant un environnement Node.js, nous verrons dans une première partie :

  • comment installer Node.js, npm et Gulp
  • comment configurer un environnement de travail Node.js
  • comment utiliser le task runner Gulp pour compiler les fichiers .pug

Puis, dans une seconde partie entièrement consacrée à Pug.js, nous verrons :

  • comment fonctionne la syntaxe de Pug.js
  • comment créer des variables, afficher le contenu de ces variables avec l'interpolation, et comment faire des itérations
  • comment créer des mixins pour ne coder qu'une seule fois les éléments qui se répètent
  • comment segmenter son code avec les includes, extends et block append et prepend

Ce tutoriel est accessible aux débutants, les seuls prérequis sont de savoir écrire du HTML et d'avoir quelques des notions de Javascript.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Mettre en place un environnement de travail Node.js
Chapitre 2
Pratique de Pug.js

Table des matières

Chapitre 1 : Mettre en place un environnement de travail Node.js

21m47
 
Leçon 1Installation de Node JS, npm et Gulp
Leçon 2Installation des dépendances
Leçon 3Créer une tâche Gulp pour compiler les fichiers .pug
Leçon 4Créer une tâche Gulp pour observer les changements sur les fichiers .pug

Chapitre 2 : Pratique de Pug.js

57m07
 
Leçon 1Découverte de Pug : la syntaxe partie 1/2
Leçon 2Découverte de Pug : la syntaxe partie 2/2
Leçon 3Activer la colorisation syntaxique sur les fichiers .pug
Leçon 4Notions de base : les variables
Leçon 5Notions de base : l'interpolation
Leçon 6Notions de base : les itérations
Leçon 7Notions avancées : les mixins partie 1/2
Leçon 8Notions avancées : les mixins partie 2/2
Leçon 9Notions avancées : les includes
Leçon 10Notions avancées : les extends, block append & prepend

Aperçus

Avis des apprenants

Détail des avis
5
Commentaires
4,6/5
Note moyenne
5/5
3
4/5
2
3/5
0
2/5
0
1/5
0
Gérard Bodet
Gérard Bodet
Publié le 01/03/2025
Bien et amusant , juste une remarque, Le tuto date un peu et le fichier gulpfile.js n'est pas adapté à la dernière version de gulp.
Fabrice Chapier
Fabrice Chapier
Publié le 11/06/2020
Merci pour ce Tuto de « mise en bouche » sur l’utilisation de PUG Il n’y a plus qu’à expérimenter !
Tommy Laurent
Tommy Laurent
Publié le 21/04/2018
Tuto clair, bien expliqué et agréable à suivre. De plus les tutos Pug en français sont assez rares.. alors merci :)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
13,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h18 de vidéo • 2 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 784 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données