14,00

Tuto Pug JS : un moteur de template pour Node JS avec JavaScript

14,00

  • Une formation vidéo de 1h18m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Pug JS : un moteur de template pour Node JS

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation JavaScript (durée : 1h18m)

  • Mettre en place un environnement de travail Node.js
    • Installation de Node JS, npm et Gulp 00:05:17
    • Installation des dépendances 00:06:31
    • Créer une tâche Gulp pour compiler les fichiers .pug 00:05:57
    • Créer une tâche Gulp pour observer les changements sur les fichiers .pug 00:04:02
  • Pratique de Pug.js
    • Découverte de Pug : la syntaxe partie 1/2 00:08:21
    • Découverte de Pug : la syntaxe partie 2/2 00:07:13
    • Activer la colorisation syntaxique sur les fichiers .pug 00:02:14
    • Notions de base : les variables 00:02:18
    • Notions de base : l'interpolation 00:04:15
    • Notions de base : les itérations 00:03:49
    • Notions avancées : les mixins partie 1/2 00:03:51
    • Notions avancées : les mixins partie 2/2 00:12:59
    • Notions avancées : les includes 00:04:41
    • Notions avancées : les extends, block append & prepend 00:07:26



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 4,9/5 sur 8 915 tutoriels vendus. Voir les autres formations de Sébastien Imbert

4,8
note moyenne

4
avis laissés
5 étoiles
3
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de faboldchap03400 laissé 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 !

  • 5
    avis de nihao laissé 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 :)

  • 5
    avis de rossi56 laissé le 16/02/2018
    Très bon tuto. Toujours très clair dans les explications. Merci Sébastien

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    Node.js 6.11.1, JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1407 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données