Agregando vistas con Pug

Clase 10 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Recordando que estamos construyendo una single web application, necesitamos de un motor de templates ( en este caso usaremos Jade / pug ) que justamente nos ayuda a crear diferentes fragmentos de HTML correspondientes a cierta funcionalidad. Dicha funcionalidad o vista va a ser llamada o requerida desde JavaScript (al igual que sus estilos). No te preocupes, poco a poco, agregaremos más funcionalidades y te permitirá entender mejor el uso de templates.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-7.zip?raw=true

Jose Yasbet Alvarez Godinez

student•

Para los que no tienen intslado jade en SUBLIME TEXT o no se ve con colorsito el .scss les voy a explicar como hacerlo para windows Ctrl + Shift + p, ahi va aparecer una barra en la parte superior aproximadamente a la mitad ahi escribiremos install Package, aparecen opciones abajo ahi vamos a seleccionarla, despues de eso despareceá y aparecerá otra donde buscaremos por ejemplo jade o Sass, seleccionaremos la primera opcion o la opcion que mas nos convezca :D espero sirva de ayuda Saludos

Giancarlo Vera Burgos

student•

Excelente, gracias!

Esteban Jossue Galdamez Perez

student•

gracias

Mauro Segovia

student•

Jade es un “template engine”(motor de plantillas) de alto performance, enfocado en permitir escribir código HTML de forma rápida. Podríamos decir que se trata de un pre-procesador de código html; similar a stylus, sass o less con respecto a css.
El objetivo no es hacer el html y luego el Jade, Sacha explica una introducción a Jade el cual puede tomar como ejemplo para utilizarlo como preprocesador como les comentaba anteriormente.
Mas info en http://learnjade.com/

Luigi Pizarro Caceda

student•

Si quierer tener instalado Jade como sintaxis, tienen que instalar el plugin Jade para Sublime.

Cmd+Shift+P, escriben "Package Control: Install Package" y presionan enter. en la nueva lista escriben "Jade" y cuando lo encuentren le dan enter para instalar.

martin Berkhoff J.

student•

Hola, gracias por el aporte. Tengo una consulta colega, cuando quieres identar el jade que te da la página HTMLtojade existe algún plugin que te ordene el código para que quede bien.

Juan Sebastian Criollo Forero

student•

Excelente amigo muchas gracias!!

John Mejia

student•

En mi concepto no le encuentro utilidad usar Jade, que opiniones tienen ustedes referente a esta librería y por que usarla ?

Juan Martin Donivan Bautista Reyna

student•

Yo tampoco le encuentro utilidad es trabajar dos veces...

martin Berkhoff J.

student•

la idea es aprender JADE para codear el HTML en jade y así trabajar más rápido, me imagino que hay un preprocesador para transformar el .jade a html

Juan Manuel López García

student•

Para instalar la sintaxis de JADE en ATOM:
Packages > Settings View > Install Packages/Themes or Atom > Preferences > +Install.

Buscar: atom-jade

Juan Castro

teacher•

No sabia que a Jade ahora le dicen Pug... Interezante

Luigi Pizarro Caceda

student•

Problemas de marca https://github.com/pugjs/pug/issues/2184

Luigi Pizarro Caceda

student•

Problemas de marca https://github.com/pugjs/pug/issues/2184

Gabriel augusto Rotger

student•

Para aquellos que tengan problemas con GULP por estar desactualizado el video de la clase debido a que es del año 2016 y actualmente estamos en 2020, GULP se actualizo y ahora no es posible realizar los ejercicios de la misma manera. bueno aquí les dejo la forma en que yo pude realizarlo

var gulp = require('gulp');
var sass = require('gulp-sass');


gulp.task('styles', function () {
    return gulp.src('index.scss')
        .pipe(sass.sync({outputStyle:'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('public'));
})

// gulp.task('styles', function() {
//     gulp
//         .src('index.scss')
//         .pipe(sass())
//         .pipe(gulp.dest('public'));
// })

gulp.task('default', gulp.series('styles'))

Espero les sirva y aconsejo de la misma forma que a mi me aconsejaron a leer la documentación.

saludos

Yonathan Gutierrez

student•

excelente clase, muchas gracias, ojala y saquen mas material con trucos así, en lo personal si me gusto el tema de jade y mas si se trata de integrarlo a la funcionalidad y cumpla una tarea en limpio...

Sacha Lifszyc

teacher•

muchas gracias, me alegra que te haya gustado!

Alberto Barrera Esquivel

student•

Para los que usan Atom instalen el lenguaje de pug.
https://atom.io/packages/language-pug

Pavel Tonatiuh Ocotitla Beltrán

student•

Hola, tengo un error y no entiendo cual es el problema si alguien me puede iluminar
un poco se los agradecería.

Cuando corro server.js en la terminal me sale que ya esta corriendo en el puerto 3000,
pero a la hora de meterme me sale este error.

Error: Z:\Programacion\Platzi\JS\views\index.pug:22:100  
   20|             | © 2016 Platzigram  
   21|       script(src='https://code.jquery.com/jquery-2.2.3.min.js', integrity='sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=', crossorigin='anonymous')  
 > 22|       script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js')  
-----------------------------------------------------------------------------------------------------------^  
  
The end of the string reached with no closing bracket ) found.  
   at makeError (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\node_modules\pug-error\index.js:32:13)  
   at Lexer.error (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:52:15)  
   at Lexer.bracketExpression (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:222:14)  
   at Lexer.attrs (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:970:24)  
   at Lexer.callLexerFunction (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:1276:23)  
   at Lexer.advance (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:1313:15)  
   at Lexer.callLexerFunction (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:1276:23)  
   at Lexer.getTokens (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:1332:12)  
   at Object.lex (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-lexer\index.js:12:42)  
   at Function.loadString [as string] (Z:\Programacion\Platzi\JS\node_modules\pug\node_modules\pug-load\index.js:39:24)

Eugenio Contreras Sánchez

student•

Revisa tu archivo Gulpfile.js
Lo más probable es que falte o exista alguna "," demás entre alguna dependencia.

Raúl Segura Nabarret

student•

Les dejo este link por si les da flojera transcribir todo su .html a .pug

http://html2jade.org/

Raúl Segura Nabarret

student•

Bueno, el profesor en el minuto 8:14 también utiliza el mismo servicio, no lo había notado

Álvaro René Sánchez Serrano

student•

gulp-sass genera un archivo <.css> apartir de un <.scss> = > es un dev dependency.

pug genera un archivo <.html> apartir de un <.pug> => es un dependency normal .

¿Por qué no puede pug tambien ser un dev dependency ?

Rafa Miranda

teacher•

Pug no entra como un devDependecy porque es una dependencia que no ocupas sólo para desarrollo, es una herramienta con la que vas a construir código de vistas, a diferencia de gulp que lo ocupamos para el manejo de task mientras desarrollamos.

Chris Espina

student•

Pug es necesario para que el servidor renderice el html, creo que voy pillándolo. Gulp sass es para hacer automatización de tareas, es decir que te quita a ti de hacer el trabajo repetitivo, mientras que pug es para que el servidor pueda mostrar el html.

Juan Sáez García

student•

¿Si no me gusta usar Jade, puedo hacer el curso sin el?

Diego Forero

Team Platzi•

Si no hay ningún problema, puedes usar html normal.

Juan Sáez García

student•

entonces dejo el código de “server.js” como estaba?

Gabriel Murillo Medina

student•

dios mio este curso es muy dificil de seguir nada funciona...

Reinaldo Mendoza

student•

Y eso que no ha empezado con js

Francisco Murillo

student•

una pregunta, las instalaciones que se hacen en la consola, se hace en cada proyecto?

Reinaldo Mendoza

student•

si, a menos que le pases -g o --global que la instala de forma global

Reinaldo Mendoza

student•

Nunca me gusto la syntax de html, esta es una muy buena alternativa

Julian

student•

me pueden ayudar por favor, en la consolame sle perfecto el mensaje, pero por web url localhost:3000 ; me sale :
Error: Cannot find module 'pug'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at new View (C:\Users\Steven_lopez\Desktop\Platzigram\node_modules\express\lib\view.js:78:30)
at EventEmitter.render (C:\Users\Steven_lopez\Desktop\Platzigram\node_modules\express\lib\application.js:569:12)
at ServerResponse.render (C:\Users\Steven_lopez\Desktop\Platzigram\node_modules\express\lib\response.js:961:7)
at C:\Users\Steven_lopez\Desktop\Platzigram\server.js:8:6
at Layer.handle [as handle_request] (C:\Users\Steven_lopez\Desktop\Platzigram\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Steven_lopez\Desktop\Platzigram\node_modules\express\lib\router\route.js:131:13)

Oscar Vargas Molina

student•

Hola Julian, cae acuerdo al error que envías, creo que se debe a que no tienes instalado PUG, te recomiendo revisar en la carpeta node_modules que tengas la carpeta puf, de no ser así recuerda que el comando de instalación es:

npm i --save pug

Espero esto te pueda ayudar.

Oscar Vargas Molina

student•

npm i --save pug

Espero esto te pueda ayudar.

Juan Martin Donivan Bautista Reyna

student•

Porque pug???? :S

Jaider Garcia

student•

Yo encontre esta respuesta hace mucho rato cuando en mi proyecto me salia el aviso de que actualizara de jade a pug. Ver: https://github.com/pugjs/pug/issues/2184

David Flores Medrano

student•

porque es un preprocesador que te ayuda a evitar errores de escritura en el código y a la vez que te permite agregar ciertas funcionalidades para mayor rapidez.

DASAC

student•

por favor alguien me puede ayuder al ejecutar el servidor me aparece un texto que dice index
no se en que e fallado, como soy nuevo en esto
espero su apoyo

Miguel Rivas

student•

podrias pasar algun pantallazo del error ?

Yonathan Gutierrez

student•

en el archivo .pug debiste haber dejado algún espacio o se te quedo algo de la identación de html, revisa que seguro eso es...

David Camacho

student•

Tengo una duda.. Aún no entiendo en que momento o con que comando, le indicamos que nuestro archivo index.pug ubicado en views lo procese y lo pase como index.html a la carpeta public

David Camacho

student•

Entiendo que por defecto con el res.render('index'); el lo va a buscar en la carpeta /views con el nombre de index.pug pero lo que aun no me queda claro, es en que parte del codigo le indicamos que luego de procesarse su destino esa /public? A diferencia de los JS que en el archivo gulpfile.js se le indica un.pipe(gulp.dest('public'));

Sacha Lifszyc

teacher•

no, nunca movemos ese archivo a /public sino que lo procesa cada vez que llega un request y es lo que entrega siempre como response, pero nunca lo movemos al directorio /public, a diferencia del resto de los archivos que sí son accesibles, por ejemplo el app.css o el app.js que sí son referenciados en la respuesta del servidor cuando agregamos el script (app.js) o el link (app.css)