A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Sintaxis

10/42
Recursos

Aportes 116

Preguntas 30

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥淢AGIA鈥, lo veo bastante 煤til para metodolog铆a 鈥淢obile 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 鈥渟encilla鈥

  • 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 鈥渟udo鈥, 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 鈥渉ead鈥 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 鈥淟ive 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鈥檛 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:

鈥渃ompile-watch-html鈥: 鈥減ug -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=鈥漵tylesheet鈥, href=鈥漜ss/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 鈥減ug鈥 y extensi贸n 鈥渉tml鈥

  • 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=鈥淯TF-8鈥>
<link rel=鈥渟tylesheet鈥 href=鈥渃ss/ejercicio-pug.css鈥>
</head>
<body>
<header>
<h1>Platzi Games</h1><a class=鈥渂oton鈥>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

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

Usar 鈥渢abs鈥 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 鈥淯FT-8鈥, los invito a corregir a 鈥淯TF-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鈥nternamente 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