Qué es pug y cómo aplicarlo

Para desarrollar un sitio web se pueden utilizar distintos procesos, herramientas y caminos, como apostar por un CMS como WordPress o PrestaShop, usar portales web comerciales enfocados a usuarios sin conocimientos de programación web, realizar un diseño y desarrollo completo por código o utilizar un motor de plantillas como Pug HTML.

A continuación, hablaremos sobre 

Pug, qué es, para qué se utiliza y qué beneficios aporta a la hora de utilizarlo para afrontar un proyecto web.

Qué es una página con pug

Pug se llamó en principio Jade, pero a lo largo del desarrollo de este proyecto tuvo que cambiar de nombre por motivos de licencia en el nombre de Jade. Cuando hablamos de Pug en diseño y desarrollo web estamos haciendo referencia a un motor de plantillas que tiene como objetivo facilitar la creación de código HTML. Al ser un motor, pug es capaz de procesar código HTML, estando construido con JavaScript lo que le permite trabajar con Node.js.

Por lo tanto, Pug es un template engine que facilita la creación de código en HTML, haciendo mucho más sencilla su lectura y comprensión, lo que repercute positivamente a la hora de realizar cambios o mantenimiento en un sitio web.

Pug no trabaja con etiquetas, sino con indentaciones como Python, por lo que el código se presenta en un formato jerárquico utilizando tabulaciones, haciéndolo mucho más amigable para la vista, y facilitando de forma notable su compresión.

A la hora de escribir código con Pug solo es necesario escribir el nombre de la etiqueta, añadir un espacio, y luego su contenido, por ejemplo: 

head

 title Título de la web

Este mismo código en HTML sería:

< head > 

< title >Título de la web

< /head > 

Podemos apreciar como es mucho más sencillo y fácil de leer el código HTML anterior utilizando Pug que haciéndolo directamente con HTML puro. 

En internet existen algunas páginas que permiten pasar código HTML to Pug, para poder verificar cómo es mucho más sencillo de leer cualquier sitio web desarrollado con este motor de plantillas de Node.js.

Cómo utilizar Pug

Para poder utilizar pug solo es necesario instalar un compilador y añadir una extensión a la herramienta que se utilice para codificar, que añada la sintaxis propia de Pug.

Cuando se compila el código escrito en Pug, se genera el código correspondiente en HTML de forma automática, por lo que las webs desarrolladas con este motor de plantillas son compatibles para cualquier navegador.

Gulp y Prepros son dos de los compiladores de Pug más populares que se utilizan actualmente.