Node.js - 6.4 Installer et utiliser le moteur Pug

Pour utiliser un moteur de modèles, il faut d'abord l'installer dans le projet. Cette leçon installe trois moteurs, puis configure Express pour utiliser Pug. Elle montre aussi comment transformer une page HTML en modèle Pug, en suivant l'indentation.

Installer les moteurs

Les moteurs font partie du code de l'application déployée. Ils s'installent donc comme dépendances de production, avec l'option de sauvegarde. Plusieurs paquets peuvent être installés en une seule commande, en les listant après npm install.

Pour Handlebars, le paquet à installer est express-handlebars, et non handlebars seul. Il s'intègre directement à Express.

npm install --save ejs pug express-handlebars

Configurer Express pour Pug

Dans app.js, après la création de l'application, définissez le moteur de vues avec app.set. Ici, la valeur est pug. Pug s'enregistre automatiquement auprès d'Express, ce qui n'est pas le cas de tous les moteurs.

Le dossier views est la valeur par défaut. Si vos modèles sont rangés ailleurs, il faut aussi définir ce dossier dans la configuration.

app.set('view engine', 'pug');

Transformer une page HTML en Pug

La syntaxe Pug n'utilise pas les balises HTML classiques. L'imbrication se fait par l'indentation : un élément indenté sous un autre en est l'enfant. Les balises fermantes disparaissent, car Pug les gère automatiquement.

Une classe s'écrit avec un point après le nom de l'élément, comme header.main-header. Les attributs se mettent entre parenthèses, comme href. Le texte se place à côté de la balise.

header.main-header
  nav
    ul
      li
        a(href='/') Boutique

En résumé

Trois moteurs sont installés en une seule commande, puis Pug est activé dans Express. Une page HTML se transforme en modèle Pug grâce à l'indentation. Le navigateur reçoit ensuite du HTML normal.

Points clés

• Les moteurs sont des dépendances de production, car ils font partie de l'application.
• Handlebars nécessite le paquet express-handlebars.
• app.set('view engine', 'pug') active Pug dans Express.
• L'indentation définit l'imbrication des éléments en Pug.
• Le code affiché dans le navigateur reste du HTML normal.

Questions fréquentes

Pourquoi Pug n'a-t-il pas besoin de balises fermantes ?

Parce que Pug les génère automatiquement à partir de l'indentation. Vous ne les écrivez donc jamais à la main.

Faut-il installer les trois moteurs en même temps ?

Ce n'est pas obligatoire. La leçon les installe ensemble, mais l'auteur les utilise ensuite un par un pour les comparer.

Que voit le navigateur après un rendu Pug ?

Il voit du HTML normal. En affichant la source de la page, on constate que le code a été généré par Pug.