Post Actualizado en febrero 19, 2020


Pug ¿qué es?

Cuando desarrollamos un sitio web o una aplicación estos suelen tener varias páginas y en muchos casos los códigos de estas se repiten, ya sea en la parte del header, del footer, etc. Es por eso que Pug, nos puede ser muy útil pues nos da la estructura lista para que simplemente le pongamos lo […]

Cuando desarrollamos un sitio web o una aplicación estos suelen tener varias páginas y en muchos casos los códigos de estas se repiten, ya sea en la parte del header, del footer, etc. Es por eso que Pug, nos puede ser muy útil pues nos da la estructura lista para que simplemente le pongamos lo datos.

pug-html

¿Qué es Pug?

Bueno es un template engine que mejora la legibilidad de nuestro código. Dando como resultado más facilidad a la hora de dar mantenimiento y aumentando la productividad de nuestro proyecto. No obstante, surge una pregunta, ¿por qué Pug y no otro template engine?

Ventajas y Desventajas

Para empezar, está basado en Javascript y eso ya es una ventaja si trabajamos con desarrollo web, pues JS es muy importante a la hora de crear sitios.

nodejs-pug

Ahora si hablamos de su sintaxis esta es increíblemente sencilla; gracias a Pug podemos olvidarnos de las etiquetas pues trabajamos con indentaciones y no sólo eso, sino que es perfectamente compatible con HTML.

Algo que no debes de olvidar es que en los archivos que uses Pug tienes que guardarlos con la terminación .pug

En todo caso ¿cuál podría ser una de sus “desventajas”? Esta consistiría en que el navegador no puede entender por si sólo Pug pues no es HTML es por eso que debemos usar un compilador.

Aquí te mostramos algunos:

Gulp.

Prepros.

Gulp

Gulp es una herramienta que utilizamos para automatizar tareas y se basa en NodeJS. Nos permite hacer un montón de cosas por ejemplo minificar (hacer más livianos nuestros archivos eliminando los bytes innecesarios), concatenar archivos y en este caso, compilar de un lenguaje a otro.

gulp-compila-pug

Prepros

Es un programa que nos permite compilar varios lenguajes y entre estos esta precisamente Pug. También nos permite concatenar todos nuestros archivos de Javascript ahorrándonos tiempo y a la vez ayudando a que nuestro sitio no tenga que hacer tantas solicitudes HTTP al servidor.

prepros-compila-pug

Comandos

No obstante, sino deseamos utilizar ninguna de las dos herramientas que se mencionaron arriba podemos usar la terminal de comandos.

Abajo te dejamos algunos ejemplos que seguramente te serán útiles.

comandos-pug

Entre las habilidades de un desarrollador debe estar el ahorrar tiempo y mejorar su trabajo. Pug es una buena opción a la hora de crear proyectos por su compatibilidad y también por su amplio campo de acción.