¿Aburrido de escribir tantas llaves en HTML? ¿Cansado de copiar y pegar secciones de código? ¿No es fácil revisar tu código porque tu mismo te pierdes?
Bueno Pug es una opción a desaparecer estos problemas, es un preprocesador de HTML como lo sería SASS para CSS, pero ahora es HTML el que tiene súper poderes 🦸🏻♀️.
Dejenme introducirles a Pug.
Pues bueno, Pug es un motor de plantillas enfocado en hacer más rápida la codificación de HTML. Es implementado con JavaScript para Node.js y navegadores. La sintaxis de pug se basa en trabajar por indentación como Python lo hace y antes era conocido como Jade.
Y te preguntaras ¿cómo luce Pug?
Pues muy guapo, su logo es… Si, adivinaste un Pug ❤️ Para ver un poco de cómo es su sintaxis empecemos por un ¡Hola Mundo!
p Hello World
Lo que el preprocesador traduciría a lenguaje HTML como:
<p>Hello World</p>
La sintaxis de pug es muy sencilla y nos ahorra escritura de código, por lo que podríamos escribir más código en menos tiempo. En VSCode los archivos .pug
soportan la escritura con EMMET.
Es importante indicar que Pug tiene dos opciones para comentarios ya que uno de ellos será visible también en el HTML y otro sólo quedará en el archivo de pug.
Comentario en HTML y Pug.
// Soy un comentario en pug, que será visible en tu HTML.
Comentario exclusivo de Pug.
//- Soy un comentario que sólo será visible en el archivo de pug.
Ahora sí veamos las funcionalidades que nos ofrece trabajar con Pug para nuestro código HTML.
La sintaxis dentro de Pug es bastante sencilla, hace uso de la indentación para definir cuales son los elementos padres y cuales son los elementos hijos.
<!DOCTYPE html>
html(lang="es")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
link(rel="stylesheet", href="css/ejercicio-pug.css")
body
header
h1 Titular
a.boton(href="#") Registro
main
p Lorem ipsum, dolor sit amet consectetur adipisicing elit.
footer
p Todos los derechos reservados ©
El código anterior es un ejemplo de una página que tiene dentro del body
secciones de header
, main
y footer
. Lo anterior en código HTML sería la estructra básica que conocemos.
Cuando el elemento padre en Pug tiene un único hijo lo podemos declarar de la siguiente forma sin necesidad de indentar los elementos.
main
.intro__imagen: img(src="images/imagen.png", alt="")
Lo que estamos indicando en el código anterior es que dentro de la etiqueta main
tendremos un div
con las clase .intro_image
que a su vez contendrá al elemento img
.
Sí, Pug tiene variables y son muy útiles a la hora de hacer nuestro código mantenible. La forma de declarar las variables es la siguiente.
- var titulo = "Título Principal";
Pero no sólo podemos declarar variables simples, si no también podemos crear nuestros propios arreglos.
- var titulos = ["Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
Para hacer uso de estas variables dentro de nuestro código tendríamos que hacer uso de la siguiente sintaxis o de la interpolación que describiré más adelante.
header
h1= titulo
Es importante aclarar que para que funcione la asignación realizada en el código anterior el signo de igual no debe de tener ningún tipo de espaciado entre él y la etiqueta a la que se le va a asignar el valor de la variable.
Pug tiene diferentes tipos de interpolación que podemos usar, estas van desde el uso de variables hasta el control de los espacios en blanco.
<h3>Cadenas</h3>Esta interpolación es la que nos permite un mejor uso de nuestras variables cuando queremos concatenarles más información, en el código siguiente veremos un ejemplo de esto.
- var user = "Alejandra";
p Hola #{user}, bienvenido/a
El código dentro de #{}
es evaluado y el resultado se guarda en la plantilla generada.
Esto puede ser cualquier expresión valida de JavaScript.
¿Qué quiere decir lo anterior? Que podríamos utilizar el siguiente código.
- var msg = "estoy gritando";
p Yo no #{msg.toUpperCase()}
El cuál tendría la siguiente salida HTML completamente valida.
<p>Yo no ESTOY GRITANDO</p>
<h3>Etiquetas</h3>
La interpolación de etiquetas en Pug nos permite seguir escribiendo contenido de dicha etiqueta sin que esté necesariamente en la misma línea donde se declaró la etiqueta. Veamos un ejemplo.
p.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Consectetur, nemo laborum quidem at assumenda quo sit quisquam doloribus est aut.
Esto también lo conseguimos haciendo uso del caracter |
pero funciona levemente diferente.
p
| Lorem ipsum, dolor sit amet consectetur adipisicing elit.
| Consectetur, nemo laborum quidem at assumenda quo sit quisquam doloribus est aut.
El código anterior funciona de la misma forma que si usaramos el .
pero hay que tener en cuenta que Pug por defecto elimina todos los espacios en blanco que hay antes y después de una etiqueta. Eso significa que si tenemos un código como este:
p
| Lorem ipsum,
strong dolor sit amet
| consectetur adipisicing elit.
Obtendriamos el siguiente resultado, sin los espacios correctos en la frase.
<p>Lorem ipsum,<strong>dolor sit amet<strong>consectetur adipisicing elit.</p>
Por el contrario, si utilizamos el operador de .
para la interpolación Pug respetará los espacios de dicha etiqueta.
Las condicionales en Pug funcionan de la misma forma que en cualquier otro lengua de programación, aquí nos permiten por ejemplo mostrar uns etiqueta si se cumple dicha condición o mostrar otra si no se cumple. La sintaxis para hacer uso de las condicionales en pug es la siguiente.
section
if usuario
a(href="#") Hola #{usuario}
else
a.boton(href="#") Registro
<h3>Ciclos</h3>
De igual forma tenemos ciclos, que por ejemplo nos permiten iterar una variable de tipo arreglo para generar una lista, lo cual nos ahorra código escrito y como muchas de las cosas en Pug, nos ayuda a que nuestro código sea matenible.
La sintaxis para realizar esto es:
- var titulos = ["Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
ul
each titulo in titulos
li #{titulo}
El código anterior generará el siguiente código HTML.
<ul><li>Subtitulo 1</li><li>Subtitulo 2</li><li>Subtitulo 3</li></ul>
La finalidad de los mixins es ofrecer una funcionalidad que pueda ser reutilizada en otras clases. Nos permite crear bloques reusables de código que cambian su resultado dependiendo del parámetro que enviemos.
Con los mixin logramos escribir menos código, produciendo un código más claro, más expresivo y sobre todo más fácil de mantener.
Los mixins se declaran de la siguiente forma:
mixin caja(imagen, titulo, contenido)
.caja
.caja__imagen: img(src="images/"+imagen, alt="Imagen")
.caja__contenido
h3 #{titulo}
p #{contenido}
Para hacer uso de un mixin declarado la sintaxis es:
+caja('imagen.png', titulos[0], 'Lorem ipsum, dolor sit amet consectetur adipisicing elit.')
La funcionalidad de los includes en Pug nos permite modularizar nuestro código para hacerlo reutilizable. Su sintaxis es la siguiente.
body
include components/header.pug
Y su función no es otra que mandar a llamar un bloque de código especificado en otro archivo, como ya mencioné la principal funcionalidad de los include
es incluir un archivo de extensión .pug
dentro de otro.
En Pug además tenemos los extens que nos permiten adicionar bloques de código a una página. Su sintaxis es:
extend components/plantilla.pug
Debemos de tener en cuenta que al hacer uso del extend
también debemos definir en que sección de nuestro código se va a adicionar el nuevo bloque de codigo, esto lo indicamos con el siguiente fragmento de código.
block contenidos
Y listo, Pug hará el resto.
Este articulo también lo puede encontrar en Medium. Donde también escribo más artículos o al menos lo intento 👌🏻
Es pug utilizado por empresas o es algo de preferencia personal?
Hola, ¿hay alternativas a Pug? Cuando uno busca en Google te salen cosas como Handlebar o EJS. Sin embargo estos se usan para generar código de forma dinámica ya en etapa de producción. Lo que yo quiero saber si hay herramientas similares a Pug en las que pueda generar HTML en la etapa de desarrollo, tal como se hace con Sass para CSS. Slds.
¿Como hago para que me guarde el html en un archivo específico? Pruebo con esto pero me crea una carteta extra que se llama pug
pug -w . -o ./html/index.html -P
Buena información, lo tendré guardado para mi proyecto.
Gracias, que bueno que te sirve 😃