Qué es pug y cómo aplicarlo
Por FelipePublicado en:
Pug es un motor de plantillas (template engine) para Node.js que permite escribir HTML de forma más rápida y limpia. En lugar de etiquetas, emplea la indentación al estilo de Python y su compilador genera el HTML equivalente de manera automática. Resulta muy práctico para programar webs con menos código y mantenerlas con mayor comodidad.
Qué es Pug y por qué dejó de llamarse Jade
Pug es un motor de plantillas pensado para facilitar la generación de código HTML. Funciona sobre JavaScript, lo que le permite integrarse con Node.js y encajar en el flujo de trabajo habitual del desarrollo web moderno. Su propósito es sencillo: reducir la cantidad de código que escribes y conseguir que ese código sea más fácil de leer y de mantener.
En sus orígenes, el proyecto se llamó Jade. Sin embargo, a lo largo de su desarrollo tuvo que cambiar de nombre por motivos de licencia relacionados con la marca «Jade», y pasó a denominarse Pug. Si te encuentras documentación o tutoriales antiguos que hablan de Jade, en la práctica se refieren al mismo motor de plantillas, con idéntica filosofía y una sintaxis casi igual. Conviene tenerlo presente para no confundirte al consultar recursos de distintas épocas.
Cómo funciona Pug: sintaxis por indentación
La diferencia principal de Pug frente al HTML tradicional es que no trabaja con etiquetas de apertura y cierre, sino con indentaciones, igual que Python. El código se organiza en un formato jerárquico mediante tabulaciones, de modo que la estructura del documento se aprecia de un solo vistazo y resulta mucho más amigable para la vista. Esa jerarquía visual facilita de forma notable la comprensión de cada elemento.
Para escribir una etiqueta solo necesitas indicar su nombre, añadir un espacio y, a continuación, su contenido. La jerarquía (qué elemento está dentro de cuál) se define con la sangría de cada línea, sin necesidad de cerrar etiquetas manualmente.
Un ejemplo práctico
Imagina que quieres definir el encabezado de una página con su título. En Pug lo escribirías así:
head
title Título de la webEse mismo fragmento, en HTML puro, equivaldría a:
<head>
<title>Título de la web</title>
</head>Como puedes comprobar, la versión en Pug es más breve y fácil de leer. Si quieres ver cómo quedaría cualquier web traducida a este formato, existen herramientas en línea como HTML to Pug que convierten el código HTML a Pug para que aprecies la diferencia con tus propios proyectos.
Cómo empezar a usar Pug paso a paso
Poner en marcha Pug es asequible incluso si vienes del HTML clásico. Estos son los pasos básicos para configurar tu entorno:
- Instala un compilador. Es el componente que transforma tu código Pug en HTML. Dos de los compiladores más utilizados actualmente son Gulp y Prepros.
- Añade la extensión a tu editor. Configura en tu editor de código una extensión que reconozca la sintaxis propia de Pug, de modo que dispongas de resaltado y autocompletado mientras programas.
- Escribe y compila. Cuando compilas el código escrito en Pug, se genera automáticamente el HTML correspondiente. Por eso, las webs desarrolladas con este motor de plantillas son compatibles con cualquier navegador.
Al apoyarte en el compilador, no tienes que preocuparte por escribir las etiquetas de cierre ni por los pequeños errores de sintaxis típicos del HTML manual: el resultado final siempre es HTML estándar, listo para publicar.
Ventajas de Pug frente a HTML puro
El objetivo principal de Pug es acelerar y simplificar la escritura de HTML para crear una página web. De ahí se derivan varias ventajas prácticas que conviene conocer antes de adoptarlo en un proyecto.
Acelera el tiempo de codificado
Al escribir menos caracteres y prescindir de las etiquetas de cierre, avanzas más deprisa y reduces el trabajo repetitivo, algo que se nota especialmente en plantillas largas.
Genera un código más limpio
La indentación jerárquica hace que la estructura sea evidente. Leer un documento en Pug y entender cada elemento resulta más sencillo que revisar HTML puro, lo que ayuda en el mantenimiento a medio y largo plazo.
Es fácil de aprender
Solo necesitas conocer un par de normas que simplifican el HTML. Si ya tienes conocimientos de HTML, el salto a Pug es prácticamente inmediato y podrás programar sin dificultad desde el primer día.
Produce HTML equivalente
Abordar un proyecto con Pug no implica problemas de compatibilidad al publicar el sitio en internet, porque los compiladores convierten el código Pug en HTML puro de forma automática.
No tiene coste
Pug es un proyecto de código abierto, así que puedes utilizarlo incluso en proyectos profesionales sin pagar ninguna licencia de uso.
Dónde publicar tu web hecha con Pug
Una vez compilado, tu proyecto Pug se convierte en archivos HTML, CSS y JavaScript estándar que se sirven como cualquier otra web estática o como parte de una aplicación Node.js. Para que cargue con rapidez conviene alojarla en un servicio de hosting con discos NVMe y tecnología LiteSpeed, que mejoran los tiempos de respuesta frente a configuraciones más antiguas.
HostingPlus, que opera desde 2004, incluye el certificado SSL y la migración en sus planes, además de soporte 24/7 en español y servidores en EE. UU. Si tu proyecto va a crecer, contar con una base de autogestión, sin necesidad de llamadas telefónicas, facilita el día a día. Para conocer las características y los precios en euros de cada plan, puedes consultar la página de hosting.
Cuándo conviene utilizar Pug
Pug resulta especialmente interesante en proyectos donde escribes mucho HTML repetitivo, como plantillas de correo, páginas de aterrizaje o sitios con una estructura muy modular. También encaja bien cuando varias personas mantienen el mismo código, ya que la indentación obliga a un estilo ordenado y reduce los errores de etiquetas mal cerradas. Para quienes quieren codificar una web en HTML y tener un mayor control sobre todos los detalles y elementos que la forman, Pug se presenta como una alternativa muy práctica gracias a los beneficios que aporta. Si tu objetivo es simplificar y acelerar el proceso de maquetación sin renunciar a un resultado estándar, merece la pena probarlo.
Preguntas frecuentes
¿Pug sustituye a HTML?
No. Pug es una forma más cómoda de escribir HTML: el compilador siempre genera HTML estándar, que es lo que finalmente interpreta el navegador. Aprender Pug no te exime de entender HTML, sino que te ayuda a escribirlo con menos esfuerzo.
¿Necesito saber Node.js para usar Pug?
Pug funciona sobre JavaScript y se integra con Node.js, pero para tareas básicas basta con instalar un compilador como Gulp o Prepros y conocer la sintaxis. A medida que avances, los conocimientos de Node.js te darán un mayor control sobre el proceso.
¿Pug afecta al SEO o al rendimiento de mi web?
No de forma directa. Como el resultado es HTML equivalente, el rendimiento depende del código final, de las imágenes y del hosting. Un alojamiento rápido con LiteSpeed y discos NVMe influye más en la velocidad de carga que el motor de plantillas que utilices.
Hosting en España con soporte real en español, migración gratis, SSL incluido y 30 días de garantía. Sin líos y sin costes ocultos.
Ver planes de hosting →
