Sintaxis

Si quieres utilizar pug sin prepros y por terminal debes:

1. Instalarlo
   npm i pug-cli -g
2. Compilar
   pug -w --pretty landing.pug

Si quieren compilar los archivos Pug primero necesitan instalar NodeJS.
Luego desde la terminal instalar pug :

>>npm install pug-cli -g

y ya pueden compilar desde visual studio code

pug archivo.pug  
 compila una sola vez

pug -w archivo.pug
 compila cada vez que el archivo cambia, genera un HTML minificado

pug -w --pretty archivo.pug
 compila un HTML identado

pug directorio
 compila todos los archivos dentro de ese directorio

yo lo hice desde windows 10 😄

No me gustan los pre procesadores para HTML es más tardado para mi gusto. Prefiero para el CSS 😉.

Video de Tabs vs Spaces que comenta el profe:

Tabs vs Spaces

**Pug me parece una excelente herramienta para el desarrollo. **
Las ventajas que veo:

• Ver los cambios en tiempo real
• Escanear el código QR y verlo desde mi dispositivo móvil con cambios en tiempo real literalmente es “MAGIA”, lo veo bastante útil para metodología “Mobile First”
• Ahorramos tiempo y fácilmente tenemos una buena semántica en HTML

**Nota: La versión actual de PUG, no tiene ningún problema con diferenciar tab y espacios. Puedes usar ambos, sin ningún problema.
**

¿No es más tardado usar un preprocesador para html en lugar de los atajos de vscode con EMMET?

Con vscode, al empezar un documento con HTML 5 basta con usar html:5 y tabulador y crea toda la estructura básica y con atributos de cada meta y links.

Si se usa un preprocesador como PUG hay que hacerlo todo paso por paso

¿O me equivoco?

Gracias.

Wow, tenía miedo de entrar a los preprocesadores porque pensaba que podían ser muy difíciles o poco útiles (soy de los que prefiero hacer todo el código sin usar ningún tipo de ayuda), pero toda esa mentalidad se ha ido a la basura con estas clases.

Excelente clase, muchas gracias.

Si usan VisualStudio Code recomiendo tener instalado Live Server para ver los cambios automáticamente entre el .pug vs .html:

Debo ser al unico que le gusta este preprocesador solo porque le hace sentir como estar programando en python jajaa

Qué interesante, pero honestamente no me está agradando pug, quizás en clases futuras mi opinión cambie.

Pug trabaja por indentación; es Html con una sintaxis “sencilla”

• Sólo tienes que poner la etiqueta un espacio y su contenido.

• Los atributos se escriben entre paréntesis. Si quieres poner varios atributos tienen que ir separados con una (,).

• Para incluir una clase, la etiqueta va seguida de un (.) y el nombre de la clase; y si queremos agregar un id en lugar de punto se pone un (#).

• Para anidar, tenemos que empezar en una nueva linea y dar un espacio con el tabulador.

• Anidación en una linea
  div: p: span Hola!

Aun no entiendo que está solucionado PUG, pues siento que usarlo es doble trabajo. todo eso sale en VSC con emmet y ya es el documento html.
Alguna otra opinión?

Sinceramente, ya probe el pug sin prepos y se me hace super rapido y eficiente, la verdad me gusto mucho, prefiero usar la terminal que prepos para pug sinceramente

Para instalar en terminal Ubuntu necesitas instalar node js y su manejador de packetes npm

Recuerda haber actualizado antes de instalar estos packetes

sudo apt-get update
sudo apt-get upgrade

Y para instalar nodejs y npm

sudo apt install nodejs
sudo apt install npm

Y luego instala el pug

npm i pug-cli -g

SI no te deja instalarlo asi normal, dale permisos root escibiendole primero “sudo”, asi:

sudo npm i pug-cli -g

Y listo, los comandos para complar son estos:

pug archivo.pug  

*compila una sola vez

pug -w archivo.pug

*compila cada vez que el archivo cambia, genera un HTML minificado

pug -w --pretty archivo.pug

*compila un HTML identado

pug directorio

*compila todos los archivos dentro de ese directorio

Debes elegir entre utilizar TAB o 2 espacios, si usas ambos no funcionará.

Nunca está demás conocer cosas nuevas aun así cuando creas que no las vas a utilizar.

Aqui les dejo el video de tab vs space silicon valley
https://www.youtube.com/watch?v=SsoOG6ZeyUI

¿y tú eres una persona de tab o de 2space?
yo amo usar tab ❤️

Pro-tip

Solo coloca doc y un enter para que pug te complete la estructura básica de un archivo html
.
Esta estructura es la de la foto de abajo

Protip:
Si quieres ahorrar aun mas codigo y tipear menos, emmet es compatible para extender la sintaxis de pug
les dejo el codigo del final abreviado, para usarlo

• Copien y peguen

• Borren una letra y vuelvanla a escribir

• Aprenten tab

• escriban la ruta del archivo de estilos

html>head>meta:utf+link:css^body>header>h1{PlatziGames}+a.boton{Registro}```

comandos para compilar de pug a html con node:

• pug nombreArchivo.pug --pretty
• pug nombreArchivo.pug -w --pretty
• pug nombreArchivo.pug -o rutaSalida/archivoSalida.html -w --pretty

emmet simplifica todo, te ayuda a autocompletar 😄

Team Tabs 😃

Sintaxis de pug

1- Nos olvidamos de las signos de <> / y solamente ponemos el nombre de la etiqueta que deseamos usar una sola vez y al lado de ellas su contenido.

h1 Titulo

2- Si queremos que una etiqueta sea hija de otra simplemente usamos espacios (debajo de la etiqueta padre) o el tabulador, sin embargo tiene que ser solo uno de los dos durante todo el proyecto de otra forma nos dará error.

section 
	h1 titulo
	p contenido
	div 
		img
section 
	h2

3- Si queremos usar atributos dentro de las etiquetas o elementos simple usamos parentesis y dentro el atributo (o los atributos) como en html. Si los atributos que queremos añadir son clases o ids no necistamos parentesis simplemente podemos poner .punto para clases y #numeral para ids.

div.MyBlock
	p#Myp

Una forma muy clara de explicar del teacher.
Entendible todo. 😃

Este es el video de Space over Tabs

Silicon Valley Scene

Memorable capítulo de Silicon Valley: Tabs vs Espacios.

Esta extension de VSCode trabaja igual que prepros, solo la instalas y enciendes
por defecto para compilar los archivos se va a crear una carpeta llamada dist, pero eso se puede cambiar en las propiedades de la extension

Si instalas Pug usando el temrinal en la carpeta de trabajo:

npm install pug

Puedes usar el Live Server de visual Studio Code en el archivo .html donde se compila el código.

Si quieres usar terminal y al tratar de instalar pug te sale el siguiente error:
$ error: eacces
Este video me ayudo para arreglar el error
https://www.youtube.com/watch?v=bxvybxYFq2o
Luego podras realizar el comando:

1. $ npm install pug-cli -g
2. $ pug help
3. pug landing.pug -w
   Espero les sirva

No sé realmente me tardo igual que hacerlo sin preprocesador de HTML, ya que en vscode tengo las extensiones de autocompletado
Solo escribo “head” y se autocompleta <head></head> y me deja justo en el espacio para escribir el texto.
Alguien más le pasa igual?

yo estoy usando el tab y el espacio para identar y no me genera errores 😅

Al utilizar “Live Sass”, necesito todavía usar PrePros…?

hola!

Estoy usando VSC y Pug sobre Ubuntu, todo corre de maravilla.

Y aparte de todo puedo usar Emmen con Pug lo que facilita aún más la vida.

Se me hace super raro prepros, no me esta gustando para nada:s

me gusta esto 😄

7:07 a mi si me compilo

ok ahora que veo lo facil y marvilloso de usar pseudocodigo me pregunto porque demonios no hicieron la sintaxis HTML asi desde el principio.

No era muy fan de pug hace 5 minutos pero ahora que lo uso si es mas limpio mi maquetación

A mí sí me funcionó con tab y espacios jaja quizá es porque tengo instalado Prettier… que indenta mi código automáticamente cuando guardo.

Muy genial, preprocesadores como Pug o Stylus están modificando el HTML y CSS a algo muy similar a Python (Sintaxis sencilla y rápida)

Me cuesta trabajo acostumbrame a pug porque no veo los tags de cierre, pero bueno vamos siempre hay que aprender cosas nuevas. 😵

Pues a mí me funciona indistintamente de usar Tab o espacios. ¿Lo han actualizado o algo?

In my case i didn’t install the prepos app. I feel more comfortable using it from command line. So first I initialized the project as a npm project:

npm init

Then install pug as a global dependency:

npm i pug-cli -g

And then I created a src folder and I moved the source code in there and finally add the following script in your package.json:

“compile-watch-html”: “pug -w --pretty ./src”,

You can execute like this:

npm run compile-watch-html

I hope you find this helpful.

Happy coding!

team tabs B)

Otro aporte que me parece importante es:

¿Cómo manejar atributos en pug?

las etiquetas que contengan atributos se usan asi;

link(rel=”stylesheet”, href=”css/ejercicio-pug.css”)

El atributo se ingresa dentro de los paréntesis, tal cual como se escribe en html.

No hay que dejar espacios entre la etiqueta y los paréntesis que contienen los atributos, como tambíen es importante usar comillas estándar que no tengan estilos porque enviará error a prepos.

¿Cómo crear clases en pug?
nombre de la etiqueta y punto seguido.

p.clase
a.clase

Notas de la clase

Trabajando con Prepos y archivos pug para a través de ellos escribir código html.

La Primera diferencia a destacar es la importancia de no usar < > simbolos de apertura ni de cierre en las etiquetas.

para llamar un <h1> 
basta con solamente escribir h1

Para generar elementos padres se utiliza la indentación:

con 2 espacios con barra espaciadora o
con 1 espacio tabular.

div
  span boton

Es importante saber o indentas con espacio de barra espaciadora, o usas espacio tabular.

(sin embargo a día de hoy 22/2/22 se resolvió ese conflicto y se pueden usar los dos. Pero lo recomendable por buenas prácticas es usar tabs. o espacios, pero uno solo.)

A día de hoy 22/2/22 Prepos permite usar espacios de barra espaciadora y espacios tabulares. Lo acabo de comprobar.

Hermosa la referencia a silicon valley lol la vi hace años y igual me acordaba

Pug es el hijo de python y html, se tenia que decir y se dijo

Acá les dejo por si les interesa un Pug Cheat Sheet

Pug Cheat Sheet

Considero que es mejor utilizar HTML sin preprocesador…
Quita demasiado tiempo usar pug

Recomiendo que instalen la extensión de pug en VSCODE les permitirá utilizar todos los atajos de emmet.

En lo personal me ha gustado PUG o almenos lo visto hasta ahora. Será cuestión de seguir con el curso haber que tanto se complica esto. Lo que me gusta gustado es haber hecho los estilos desde 0 y no tener el css ya hecho. Pero sigamos 😄

😮 ESTO ES MAGICO 😮 AWWW

team Tab 😎

Yo soy del #teamTab y tu??

Este es el error que me da:

![](

10. Pug: Sintaxis

Les comparto el código pug de la clase:

doctype html
html
    head
        meta(charset="UTF-8")
        link(rel="stylesheet", href="../css/ejercicio-pug.css")
    body
        header
            h1 PlatziGames
            a.boton Registro

Me parece interesante la sintaxis de Pug, pero a la vez siento que voy mucho mas lento que escribiendo HTML puro.

Probé lo del espaciado o tabulador en mi vs code y prepros me compilo perfectamente usando las dos maneras. 🤔 Aunque yo en particular uso 4 espacios, no se si eso tenga algo que ver.

Aparentemente, en la actualidad, Prepos ya no genera errores si utilizas TAB o dos puntos, ambas me las tomó correctas. 😁

Principales diferencias entre el archivo extensión “pug” y extensión “html”

• El archivo pug usa indentacion para identificar que etiquetas están dentro de otras, no como en el archivo html donde se utilizan etiquetas.
• En el archivo de pug puedes elegir entre tab o spaces, pero no ambos al mismo tiempo. Algunas personas prefieren el tab porque no tienes que apretar la barra espaciadora muchas veces.
• Para agregar propiedades en el archivo pug, se hace con paréntesis, de la siguiente manera: meta(charset="UTF-8")
• Para agregar clase, se hace con punto, de la siguiente manera: div.container Contenido del div
• En general la sintaxis es mucho mas sencilla, es como en Python

Se siente pro usar Pug jaja

yo prefiero edteam 6.23

Notas de la clase

Estaba probando lo que dijo que el profe, sobre los espacios y el tabulador, y creo que actualmente pug ya soporta usar ambas a la vez.

(Cabe aclarar que no debería de usarse ambas, para llevar un mayor orden sobre el código)

Vista en PUG

doctype html
html
  head
    meta(charset="UTF-8")
    link(rel="stylesheet", href="css/ejercicio-pug.css")
  body
    header
      h1 Platzi Games
      a.boton Registro```

Vista en **HTML**

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<link rel=“stylesheet” href=“css/ejercicio-pug.css”>
</head>
<body>
<header>
<h1>Platzi Games</h1><a class=“boton”>Registro</a>
</header>
</body>
</html>```

Si necesitan más info: https://github.com/pugjs/pug-cli

Para la previsualización los en Prepros, es Ctrl+L

Sintaxis

Debemos crear un archivo llamado landig.pug, que tendra nuestro codigo html

doctype html
html
  head
    meta(charset="UTF-8")
    link(rel="stylesheet", href='css/ejercicio_pug.css')
  body
    header
      h1 PlatziGames
      a.boton Registro

Este codigo se complica a traves de prepos y lo convierte en landing.html

https://pugjs.org/api/getting-started.html

yo uso tabs se me hace mas facil pero alla cada quien

Usar “tabs” que sean reemplazados por espacios como lo configura vscode por defecto, es lo mejor?

Qué raro, usé dos espacios junto a tabs y también me compiló

Vamos bien! 😄

La estructura con HTML5 por defecto con (! + TAB)

Trabajando desde la consola!

Muy buen contenido para simplificar mucho el código html

La sintaxis de pug me encanta, algo que noté en el minuto 10:20 es que le profesor escribe el atributo “UFT-8”, los invito a corregir a “UTF-8”

Unicode Transformation Format)

meta(charset="UTF-8")

Alguien me puede explicar como puedo compilar desde VSCode ?

consulta como pasamos nuestro proyecto en html a pug, descompilamos con prepros?

Me siento medio raro utilizando Pug…internamente extraño HTML normal.

Estoy seguro de que una vez lo dominas te ahorra mucho tiempo.

Yo siempre había usado handlebars para este tipo de cosas, pero pug es mucho más sencillo y cómodo.

Genial, Gran clase

Yo estoy usando dedora y ni pude utilizar Prepos.
Encontre los comando para instalar PUG y realizar el mismo proceso que el Profe, les comparto los comandos

Primero se instala con NPM
Segundo revisar si se instalo
Tercero se corre plug
-w watch
-o output
./ la dirección
-P pretty

npm i -g pug-cli
pug --version
pug -w . -o ./ -P

Después de eso basta con realizar lo mismo que en la clase y cada que se guarda se realiza la actualización del codigo html

Puedo hacer que al copilar en vez de crear un archivo html, cree un php?

a mi solo me funciona el arcghivo .pug y .html dentro de la carpeta css, por que se da eso??. Estoy haciendo algo mal??

#tab

genial!

El curso promete mucho

Gran clase, por cierto Team Tap 😄

El video que te recomiendo después de esta clase.
Tab vs Space HBO: Sillicon Valley
https://www.youtube.com/watch?v=V7PLxL8jIl8

easy!!

Genial !!

¡Wow, me encanta! ¡Se ahorra mucha energía mental!

Para aquellos que tengan windows y la consola nos les deja ejecutar los scripts de pug.

Tienen desabilitar las restriciones de de ejecucion de script en la maquina.

1.Abrir el shell de windows como administradores
2.Ejecutar los siguientes comandos siguiente comando

~

3.(Opcional para visualizar los permiso)

Get-ExecutionPolicy -list

4.Introducir este comando y acpetar los cambios

Set-ExecutionPolicy -Scope CurrentUser unrestricted

Dependienco del idioma enq ue tengan el pc

si o yes 

Excelente, me encanta seguir aprendiendo más 😄

Muy bueno el video de Tab vs Spaces (llevado al limite) ahaha

Es de pago el prepos?

la extensión de vs code: compile hero pro
permite compilar automáticamente un archivo después de guardarlo
soporta pug
y tamién soporta: Sass/Less/Scss/Typescript/Javascript/Jade