Pug es un generador de templates implementado con JavaScript para Node.js y navegadores que nos permite escribir pseudo código de una forma muy limpia y fácil de leer que será compilado a HTML.

De esta forma nos olvidamos de escribir etiquetas de apertura y cierre para indicar únicamente la etiqueta de inicio seguido de un espacio y lo que vaya a continuación el preprocesador lo entenderá como contenido dentro de la etiqueta.

h1 Título
p Lorem, ipsum dolor sit amet consectetur adipisicing.
div.cta
	span Botón

Una vez procesado el archivo, esta plantilla se convertirá en:

<h1>Título</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
<div class="cta">
	<span>Botón</span>
</div>

Adicional a ello, podemos hacer modular nuestro código permitiéndonos ahorrar tiempo a la hora de maquetar, pero eso lo veremos mas adelante.

Instalación

Lo primero que debemos hacer es instalar la herramienta que nos vaya a servir de compilador y para esto tenemos dos opciones:

1. Prepos: Compilador de Pug (HTML), y de Less, Sass, Stylus (CSS)
2. Compilador desde la terminal

Prepos

Una de las opciones que tenemos para compilar, debugear y visualizar el código en tiempo real. Es multiplataforma y es completamente gratuito.

Descargar: https://prepros.io/

Una alternativa a instalar prepros es compilar todo desde el terminal (esto nos permite hacer uso de los scripts en npm para agilizar nuestro flujo de trabajo).

Compilar Pug desde el terminal

Requerimientos: nodeJS

Para instalar Pug ingresamos la siguiente línea de comandos en nuestro terminal:

sudo npm install pug-cli -g

Una vez finalice, para compilar tenemos las siguientes opciones:

Compilar una sola vez el archivo:

pug archivo.pug

Compilar cada vez que el archivo cambie:

pug -w archivo.pug

-w: watch (flag que le indica al compilador que esté observando cualquier cambio)

Compilar cada vez que el archivo cambie (en modo indentado)

pug -w --pretty archivo.pug

Por defecto, el código dentro del archivo *.html vendrá optimizado en una sola línea (minificado), lo cual es bueno en términos de optimización. Sin embargo, con el flag --pretty podemos generar archivos con indentación para que sea mucho más fácil para nosotros leerlo.

Para ver todos las opciones que tenemos a la hora de compilar nuestros archivos Pug nos dirigimos a la documentación de pug-cli.

Manos a la obra

Como se mencionó al inicio, una de las ventajas de utilizar un preprocesador de HTML hoy en día es la posibilidad de ahorrarnos código a la hora de maquetar.

Entonces, a partir de ahí surgirán algunas dudas sobre cómo vamos a escribir nuestro código en ciertos casos como la existencia de saltos de línea (interpolación) o la designación de atributos en algunas de las etiquetas que por ejemplo no tengan etiqueta de cierre como el caso de <img>.

Al respecto te diré que la mejor recomendación es siempre acudir a la documentación:

Getting Started – Pug

pug

Interpolación

Para anidar elementos dentro de otros en Pug, debemos considerar la siguiente configuración de saltos de línea.

p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, earum obcaecati. Voluptates, magni repudiandae. Asperiores labore reprehenderit cupiditate fugit atque debitis illum magni, officiis velit nobis, expedita maiores optio hic.

Es lo mismo que p., el hecho del punto al final de la etiqueta p le dice al preprocesador que todo lo que sigue después será parte de la misma etiqueta.

p.
	Lorem, ipsum dolor sit amet consectetur adipisicing elit.
	Voluptatibus, earum obcaecati. Voluptates, magni repudiandae.
	Asperiores labore reprehenderit cupiditate fugit atque
	debitis illum magni, officiis velit nobis, expedita maiores optio hic.

Si omitimos el punto después de la etiqueta p, debemos agregar un pipe (|) en cada salto de línea.

Incluso podemos seguir agregando mas etiquetas dentro la misma etiqueta, simplemente agregamos a la misma altura de la indentación, sólo que esta vez sin el pipe (|).

p
	| Lorem, ipsum dolor sit amet consectetur adipisicing elit.
	| Voluptatibus, earum obcaecati. Voluptates, magni repudiandae.
	| Asperiores labore reprehenderit cupiditate fugit atque
	| debitis illum magni, officiis velit nobis, expedita maiores optio hic.
	span Lorem, ipsum dolor sit amet consectetur adipisicing elit

Esto aplica aun si queremos agregar una etiqueta dentro de otra y esta se encuentra en medio del contenido (negritas, cursivas, etc.) y para ello incorporamos la etiqueta, y luego, nuevamente un salto de línea utilizando el pipe (|) para indicar que el resto del contenido sigue siendo parte de la etiqueta p.

p Lorem ipsum dolor 
  strong sit amet consectetur
  | adipisicing elit.

Variables

Por defecto, HTML no incluye las variables de forma nativa y es ahí donde Pug empieza a tomar relevancia.

Una variable nos sirve para almacenar datos y reutilizarlos en todo nuestro archivo HTML evitándonos tener que escribir lo mismo una y otra vez.

Estas variables se declaran al inicio del documento y se empiezan con -var seguido del nombre de la variable.

// Declarar variables
-var titulo = "Título principal"

Para hacer el llamado de la variable dentro de nuestra plantilla Pug:

// Primera opción
h2= titulo

// Segunda opción
h2 #{titulo}

En la primera opción podemos llegar a cometer el error de separar el = de la variable, y entonces Pug lo tomaría como contenido dentro de la etiqueta, por esta razón la segunda opción suele ser mas intuitiva de utilizar.

Podemos asignar varios elementos en una variable (array)

-var titulos = ["Título 1", "Título 2", "Título 3"]

Para hacer el llamado de la variable debemos indicar en qué posición se encuentra el valor que deseamos obtener:

h2 #{titulos[0]} // Título 1

Las posiciones, como todo en lenguaje de programación empiezan por el cero. De esta forma las posiciones quedan así:

0 = Título 1
1 = Título 2
2 = Título 3

Condicionales y loops

Como se comentó al inicio, Pug eleva HTML a un lenguaje de programación en algunos aspectos. Uno de ellos es precisamente la posibilidad de utilizar condicionales y loops en código para mostrar contenido dependiendo de si se cumple la condición o no.

Un condicional nos permite evaluar cierta condición y tomar una opción entre dos caminos dependiente de si se cumple o no.

Comenzamos por la declaración de la variable:

-var usuario = "Israel"

Al momento de hacer el llamado tendríamos la siguiente estructura lógica:

if usuario
	a Hola #{usuario}
else
	a.boton Registro

Con lo anterior, si la variable usuario tiene valor, ya compilado nuestro código quedaría de la siguiente manera:

<a>Hola Israel</a>

De lo contrario tendríamos un enlace con la clase 'boton' para el registro.

Ahora, un loop es un fragmento de código que se va a ejecutar de forma repetitiva hasta que se cumpla una condición.

ul
	each titulo in titulos
    	li=titulo

Esto nos arrojaría el siguiente código ya compilado:

<ul>
	<li>Título 1</li>
    <li>Título 2</li>
    <li>Título 3</li>
</ul>

Es decir, toma de la variable titulos que es de tipo arreglo y lo va recorriendo un por uno para mostrar cada elemento dentro de listado.

⚡ El each deriva de foreach. La diferencia del ciclo for es que en el for le determinar cuántas vueltas tiene que dar, mientras que foreach lee la longitud del arreglo y desde el inicio ya sabe cuántas vuelta tiene que dar.

Mixins

Otra de las ventajas que ofrece el utilizar Pug como preprocesador es la posibilidad de utilizar mixins que nos permiten reutilizar fragmentos de código que cambien su resultado dependiendo del parámetro que le enviemos.

Con esto logramos escribir menos código, haciéndolo un poco más claro, expresivo y sobre todo mucho más fácil de mantener.

La declaración de los mixins, al igual que las variables se realiza al inicio del documento.

Comenzamos designando la palabra clave mixin seguido del nombre del mixin. Lo que va entre paréntesis representa las variables o parámetros dentro de este mixin.

mixin galeria(imagen, titulo, descripcion)
	.galeria
		.galeria__imagen: img(src="imagen", alt="titulo")
		.galeria__contenido:
			h3=titulo
			p=descripcion
			a.boton Leer más…

A la hora de hacer el llamado del mixin, quedaría de la siguiente manera:

+galeria('url/imagen.jpg', 'Título de la imagen', 'Descripción de la imagen')

Esto ya compilado nos arrojaría:

<div class="galeria">
	<div class="galeria__imagen">
    	<img src="url/imagen.jpg" alt="Título de la imagen">
    </div>
    <div class="galeria__contenido">
    	<h3>Título de la imagen</h3>
        <p>Título de la imagen</p>
        <a class="boton">Leer más…</a>
    </div>
</div>

Includes y extends

Como Pug funciona como un generador de plantillas, dos de sus principales características para aprovechar esta funcionalidad es haciendo uso de los includes y extends.

Los includes sirven para incluir un archivo de extensión *.pug dentro de otro.

Esto permite modularizar nuestro proyecto quedando de la siguiente manera:

html
	include ./head.pug
    body

De esta manera, al momento de compilar nuestro archivo Pug tomará el head que puede estar en la misma carpeta (o en otra) y nos ahorra el tener que incorporar la misma información cada vez.

Mas información acerca de los includes en Pug:

Includes – Pug

pug

Por otro lado, los extends te permiten adicionar bloques de código a una página. A través de ellos podemos seguir agregando contenido a partir de dónde se crearon los demás templates.

Imaginemos la siguiente estructura:

📁 components
┖ 🐶 template.pug
📄 post.pug

Dentro del archivo template.pug definimos la estructura de nuestra plantilla incorporando las variables, mixinis, head, etc. y justo donde queramos que vaya el contenido del post.pug debemos hacer el llamado con block posts o block contenidos si queremos darle un poco mas de dinamismo.

Luego, en nuestro archivo pug debemos hacer el extend de la plantilla.

extend ./components/template.pug
block contenidos
	// A partir de aquí ponemos todo el código que queramos que se incluya

Mas información acerca de los extends en Pug:

Template Inheritance – Pug

pug

Conclusión

Aunque puede parecer un engorroso aprender una nueva sintaxis, te aseguro que en la medida que tus proyectos vayan creciendo te será mucho mas útil contar con herramientas que te permitan escalar tu código a través de todas las bondades que nos otorga Pug.

Adicional a ello te recomiendo que consideres adoptar alguna metodología que te permita organizar tu código como BEM, esto hará que la estructura y nomenclatura con las clases sea mucho más fácil de definir.