Bonus: html, css, js

Pug nos permite utilizar una sintaxis un poco diferente al HTML común y corriente, pero es más amigable, en vez de encerrar las etiquetas dentro de otras etiquetas podemos simplemente tabular (dejar espacios) y automáticamente nuestro html funcionara a la perfección, también podemos utilizar las funciones extends y block para definir layouts o templates que podemos modificar cuando necesitemos:

html
	head
		link(rel="stylesheet" href="...") // los atributos van entre ()
		// al tabular obtenemos un resultado másomenos así:
		// <html>
		// 		<head>
		// 		 <link ...etc />
		// 		</head>
		// </html>
	body
		block content // cuando utilicemos este template podemos definr el contenido de aquí :o

Christian Velázquez

El curso de Preprocesadores, te ayudará a practicar distintas formas de utilizar “PUG”, con “SASS”, “LESS”…etc. Muy recomendable.

33andres33

En el curso de preprocesadores que por cierto me gusto, enseñan pug

Juan Esteban Galvis

El curso de preprocesadores explica muy bien lo de Pug y otros preprocesadores para CSS como Sass, Less y Stylus.

Christian Velázquez

Te dejo el “link”, para la herramienta Prepros (https://prepros.io/)

antonymedina

Creo que me saltado clases... Aunque no las veo, ¿Hay clases sobre Pug? ¿En qué momento instaló todo eso?😱

Alvise Leal

Pug se puede tomar como un motor de plantillas ¿no? Porque actualmente utilizo Nunjucks, ya que había leído que es muy potente (aún no le exprimo todo el jugo).
Pero tengo la curiosidad de saber que tan versátil es Pug funcionaría como motor de plantillas y ver sus principales pros y contras.

Danelia Sanchez Sanchez

Pug es muy estricto en cuanto los espacios y tabuladores. No puedes mezclar ambos. Tener cuidado con la indentación ya que podría haber errores en la compilación.

natagutierrez88

hace 2 años

Esta es la documentacion del sistema de plantillas pug:
https://github.com/pugjs/pug

Andres Alvarez Becerra

hace 2 años

Hola, si quieren aprender un poco más sobre el uso de bloques, les recomiendo este video y la lista de videos sobre este tema en el siguiente link: https://www.youtube.com/watch?v=CNwvi8jbgcc&list=PLROIqh_5RZeCFvLRw6_L7IGXFU_GahWhL&index=9

juan-p-code

Que interesante es ver como se puede trabajar con HTML de distintas formas, esta pequeña explicación de como usar pug me motivo bastante a estudiar el curso con mucho detenimiento 😄

Beto Toro

Les recomiendo muchisimo pasar primero por el curso de Preprocesadores

Mario Alejandro Crespo Reyes

Esto es lo que me sale luego de darle al comando npm install express

iMac-de-Tribu:~ Tribu$ npm install express
npm WARN saveError ENOENT: no such file or directory, open '/Users/tribu/package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/tribu/package.json’
npm WARN tribu No description
npm WARN tribu No repository field.
npm WARN tribu No README data
npm WARN tribu No license field.

[email protected]
added 50 packages from 37 contributors and audited 126 packages in 1.375s
found 0 vulnerabilities

Kevin Parra Lopez

doctype html
-var title = 'Design System🤞';

html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

![](

Diego Alvaro Parra Abad

Soy Rulótico González y quizás me recuerden por cursos como HTML y CSS, Sistemas de Diseño y más Sistemas de Diseño. Será para la siguiente iteración.

Naldo Duran