pug Tutorial
Empezando con Pug

Observaciones

Versiones

Instalación

Para instalar el sistema de representación de plantillas Pug, siga estos pasos:

1. Tener el entorno Node.js instalado en su máquina
2. Ejecute npm install pug --save para instalar el módulo pug en su proyecto actual.

Ahora puede usar pug en su proyecto a través del mecanismo estándar require :

const pug = require("pug");

Si está utilizando Express en su aplicación, no necesita require("pug") . Sin embargo, debe establecer la propiedad del view engine de su aplicación Express en pug .

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

Además, debe configurar el directorio de vista de su aplicación para que Express sepa dónde buscar sus archivos Pug (para compilación).

app.set("views", "path/to/views");

Dentro de su ruta Express, puede procesar sus archivos Pug llamando a la función res.render con la ruta del archivo (comenzando desde el directorio establecido por la app.set("views") ).

app.get("/", function (req, res, next) {
    // Your route code
    var locals = {
        title: "Home",
    };
    res.render("index", locals);
});

En lo anterior, el index apunta a un archivo ubicado en views/index.pug , y los locals representan un objeto de variables que están expuestas a su archivo. Como se explicará en secciones posteriores, Pug puede acceder a las variables que se le pasan y realizar una variedad de acciones (condicionales, interpolación, iteración y más).

Hola mundo ejemplo

Primero, vamos a crear una plantilla para ser renderizada!

p Hello World, #{name}!

.pug en un archivo que termine con la extensión .pug (puede llamarlo como desee, pero usaremos view.pug en el siguiente código para compilarlo).

¡Todo lo que queda por hacer ahora es compilar esa plantilla! Cree un archivo de script JS (llamaremos a nuestro main.js ), y agregue el siguiente contenido:

// Import the pug module
const pug = require('pug');

// Compile the template (with the data not yet inserted)
const templateCompiler = pug.compileFile('view.pug');

// Insert your data into the template file
console.log(templateCompiler({ name: 'John' });

Cuando ejecute este archivo con npm main.js , debería obtener el siguiente código HTML en su consola:

<p>Hello World, John!</p>

¡Felicidades, acabas de crear y compilar tu primera plantilla! ¡A cosas más avanzadas, como Condicionales , Iteración y mucho más!