Introducción a Pug

Clase 9 de 42 • Curso de Preprocesadores CSS

Resumen

Pug es un generador de templates implementado con Javascript que nos permite escribir un pseudocódigo limpio y fácil de leer que será compilado a HTML.

Christian David Sánchez

student•

Pug (anteriormente conocido como Jade) es un motor de plantilla de Node.js. con el que seremos capaces de escribir código HTML de una sintaxis mucho más sencilla, clara y directa, tanto a la hora de escribir como de leer y modificar.

Bernardo Aguayo Ortega

student•

lo ame ;)

Addi Alberto Salazar Espinosa

student•

Super! :D

Bewe Software Colombia SAS Bewe Software Colombia SAS

student•

Pug es un motor de plantillas enfocado en hacer mas rápida la codificación de Html. Ha sido implementado con Javascript para trabajar con nodeJs principalmente.

Bernardo Aguayo Ortega

student•

Me encanta!!

Irving Juárez

student•

¿Qué es pug y como nos puede ser útil?

Pug es un creador de templates para html. Esto significa que tu le das un pseudocodigo en un archivo.pug y lo compilas. Al momento de la compilación, se crea un archivo.html. Una cosa importante de pug es que es una librería de JavaScript, por lo que podemos usar JavaScript para usar esta herramienta. . Con esta herramienta podemos crear correos automatizados, en donde conectamos a una base de datos y usando JavaScript, creamos un loop que nos permita mandar correos a muchas personas con características distintas, como el nombre, localidad, etc.

Efraín Hernández García

student•

Las ventajas de PUG es que super sencillo de aprender!

Danilo Fernandez

student•

Genial.

Agustina Corvo

student•

La sorpresa del curso. No imaginaba encontrarme con un preprocesador de HTML.

Kevin Andres Curruchich Xocop

student•

No sabia que habian preprocesadores de HTML 😥😥

Wilson Delgado

student•

No lo conocía, vamos a aprenderlo!!

Bernardo Aguayo Ortega

student•

venga!!!!

Addi Alberto Salazar Espinosa

student•

Yo tampoco :O

Sergio Javier Lopez Olivera

student•

Pug es com escribir HTML con un lápiz de JavaScript. Simplifica mucho la escritura del HTML además que cumple con los principios fundamentales de los preprocesadores:

El markup debe ser agradable a la vista
El markup debe ser DRY (Don´t Repeat Yourself)
El markup debe estar bien indentado
La estructura del HTML debe ser clara

Elvis Milan

student•

Antes conocido como Jade!!!

Addi Alberto Salazar Espinosa

student•

Jheyson Eduardo Galvis Valencia

student•

Yo pensaba que Pug era una versión de Linux.

Sebastian Marin

student•

No sabîa que existia un preprocesador para html. Pinta muy bien

Carlos Zuluaga

student•

sigue siendo util utilizar este preprocesador en 2022?

Héctor Eduardo López Carballo

student•

¡Hola!

Yo no lo he usado, no me gustó tanto.

Pablo Andres Fernandez Cari

student•

Yo tengo la misma pregunta ¿A que conclusión llegaste?

Anfernee Valera

student•

Comenzando con pug, veamos que tal va.

Héctor Aguilar Mogollan

student•

Interesante, pero pienso que para html no hace falta un preprocesador, seria mejor hacerlo desde cero

Cristian Diaz

student•

Depende, ayuda mucho por ejemplo para hacer contenido iterable si tienes información de un array de datos, en ese sentido si conviene usar Pug.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

no conocía NADA de esta herramienta !! vamos a ver qué tiene que ofrecer.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

PUG es un Templete Engine. Templete Engine es un motor de plantillas. Entonces PUG es una tecnología que permite generar la estructura html para web y meterle datos, datos que podrían venir de una base de datos, api etc.

Addi Alberto Salazar Espinosa

student•

Vamos :D

SANDRO SIMON

student•

En lo personal no me gusta la sintaxis de IDENTACION de Pug. Quisiera saber si existen otras alternativas a Pug. EJS o Handlebars con tecnologías que generan HTML en tiempo de producción, al vuelo. Mientras que Pug lo hace al momento del desarrollo.

Andrés Felipe Moreno Jiménez

student•

Buenas tardes. Quisiera pedirles ayuda con lo siguiente:

Estoy desarrollando un proyecto con PUG que consta de una página principal y varias sub-páginas.

Para el proyecto no estoy usando JavaScript, es solo HTML y CSS, por lo que tampoco estoy usando JavaScript con PUG.

La estructura de carpetas del proyecto esta de la siguiente manera:

nombreProyecto componentes paginasInternas Sass index.pug

Tengo este código para la etiqueta head del proyecto:

head
		meta(charset=&quot;UTF-8&quot;)
		meta(name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;../sass/normalize.css&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;../sass/utilities/styles.css&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;https://use.fontawesome.com/releases/v5.0.13/css/all.css&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;)

El problema que tengo es con las URL's del proyecto.

El head esta dentro de la carpeta de componentes, pero dado a que mi proyecto tienen la página principal fuera de las otras carpetas y las sub-páginas están dentro de la carpeta de paginasInternas, la ruta del artibuto href en la etiqueta link va a ser diferente en la página principal y en las subpáginas, dado a que no están al mismo nivel.

Mi pregunta es: Cómo puedo hacer para no tener que crear una archivo de head.pug por cada página que voy a crear ya que todas van a tener el mismo contenido, lo único que varia es el contenido de la etiqueta href?

Este mismo problema lo tengo en todo el proyecto cada que deseo agrega una ruta ya sea con href o src. Si los archivos no están al mismo nivel de carpetas, la ruta se rompe.

Espero me puedan ayudar. Gracias.

Leonardo de los angeles Espinoza Hernandez

student•

Hola @andresmorenojf!

Te recomiendo llamar tus archivos ya sean imágenes o CSS desde la raíz de esta forma /sass/normalize.css nota que la barra (/) es la cual indica que estarás buscando desde tu home donde por lo regular se encuentra el index.html

Si mi explicación no fue lo suficientemente clara te invito a que respondas al comentario para darte ejemplos más claros

Francisco Javier Araujo de la Garza

student•

Puedes agregar una variable que contenga la ruta del href y solamente le cambias el valor a la variable en cada archivo html antes de incluir el head.

ruta=&quot;../sass/&quot;
include head.pug

Y este seria el archivo head.pug

head
		meta(charset=&quot;UTF-8&quot;)
		meta(name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;&quot;+ruta+&quot;normalize.css&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;&quot;+ruta+&quot;utilities/styles.css&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;https://use.fontawesome.com/releases/v5.0.13/css/all.css&quot;)
		link(rel=&quot;stylesheet&quot;, href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;)

Nilthon Enciso Cantero

student•

¿Es posible usar Pug desde WSL2? Si creo una carpeta desde ese entorno, me arroja este error. “Folder whit a UNC path can not be added as a project. Use "Map Network Drive" to assign a drive letter to the folder."

Diego Alberto González González

student•

Hola a todos.

¿Blade de Laravel es similar a PUG? ¿SI trabajo con blade no tengo necesidad de utilizar PUG?

Juan Castro

teacher•

Blade es el sistema de templates de Laravel. Nos permite realizar varias tareas de un preprocesador de HTML, como entregar contenido dinámico y organizar cada sección de nuestro HTML en diferentes archivos.

En realidad, parece que sí se pueden combinar. Pero te recomiendo que más bien estudies bien cada tecnología y solo las combines cuando sea necesario.

Andrés David Solarte Vidal

student•

He notado que PUG se puede usar como herramienta de maquetacion. Recomendaria usarla para ese fin, ya que blade es un sistema de plantillas de Laravel. Como tal, tengo entendido que peude modificar, es decir, usar PUG en Laravel, por medio de una instalacion a travez de composer. No se que tan recomendable sea hacerlo.

Daniel Alejandro Romero

student•

hola a todos , ¿pug es como figma o son cosas distintas?

Kevin Fiorentino

student•

Pug es un motor para generar código HTML con Javascript. Figma es editor gráfico que utilizan diseñadores UI/UX para diseñar interfaces gráficas que luego son desarrolladas por programadores Frontend. Son cosas muy distintas, ¿Cómo llegaste a relacionarlos? Saludos!

Daniel Alejandro Romero

student•

si tienes mucha razón, ya me di cuenta jaja 😆😆

Alejandro Ramos

student•

A darleeee!!!