Empezando con pug

Ejemplo de Hola Mundo

Primero, ¡creemos una plantilla para renderizar!

p Hello World, #{name}!

Guarde esto en un archivo que termine con la extensión .pug (puede llamarlo como quiera, 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 al 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 ejecuta este archivo con npm main.js, debería obtener el siguiente código HTML en su consola:

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

¡Felicitaciones, acaba de crear y compilar su primera plantilla! A cosas más avanzadas, como Conditionals, Iteration, ¡y mucho más!

Instalación

Para instalar el sistema de renderizado de plantillas Pug, siga estos pasos:

  1. Tenga 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á usando Express en su aplicación, no necesita require("pug"). Sin embargo, debe establecer la propiedad 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 la compilación).

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

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

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

En lo anterior, index apunta a un archivo ubicado en views/index.pug, y locals representa 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).