Para implementar templates con PUG, sólo bastará con instalar PUG con la instrucción npm i -D pug y definir el uso del view engine respectivo usando los middlewares de manera similar a como vimos antes con Handlebars.
PUG incluye instrucciones que facilitan el trabajo con las vistas:
extends: define un template base del que extiende el template actual.
include: define la inclusión o importación de otro template.
block: define un placeholder para el contenido de bloques en los que se insertarán partes de un template.
Para más información sobre el uso de PUG, Bulma y FontAwesome, recuerden consultar los enlaces adicionales de esta clase.
Prefiero HTML limpio que pug.
Me gusta que la etiqueta de cierre sea el limitador del scope de cada elemento.
me too
El problema con HTML puro es que al hacer proyectos grandes terminas repitiendo grandes cantidades de código.
Había leído sobre Bulma pero nunca lo había usado. Es agradable que en los tutoriales utilicen herramientas alternativas a las típicas y que probablemente la mayoría de nosotros ya conocemos (en este caso Bootstrap).
Estoy de acuerdo, siempre es bueno conocer otras alternativas.
Les comparto mi diseño hecho con Tailwindcss:
Me gustaría un curso de Pug en Platzi.
En el curso de preprocesadores lo puedes encontrar.
Pug es un preprocesador para HTML.
El curso también incluye Sass, Less y Stylus
<section class="hero is-dark is-bold"><div class="hero-body"><div class="container"><h1 class="title">OctolionShop</h1><h2 class='subtitle'>Find the best products a the best price</h2></div></div></section>
<footer class='footer'><div class='container'><div class='level'><div class='level-left'><div class='level-item'><img src="https://bulma.io/images/bulma-logo.png" width='112' height='28' alt=""></div></div><div class='level-right'><div class='level-item'><span class='icon is-large'><i class='fab fa-twitter fa-2x'></i></span><span class='icon is-large'><i class='fab fa-facebook fa-2x'></i></span><span class='icon is-large'><i class='fab fa-instagram fa-2x'></i></span><span class='icon is-large'><i class='fab fa-whatsapp fa-2x'></i></span></div></div></div><div class='divider has-text-grey-lighter' style='border-top:1px solid currentColor;padding-top:10px;'><div class='level'><div class='level-left'><div class='level-item has-text-grey'><small>Find the best products at the best price</small></div></div><div class='level-left'><div class='level-item has-text-grey'><small>Octolion2020|All rights reserved</small></div></div></div></div></div></footer>
Tal vez no esté todo lo mejor aplicado posible pero es lo que me funcionó
Error: Cannot find module 'boom'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\Milton\Desktop\express\ecommerce\index.js:4:14)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
[nodemon] app crashed - waiting for file changes before starting...
boom ahora esta '@hapi/boom"
Al inicio no le encontraba sentido a los motores de plantillas, pero cuando llegué por primera vez a los frameworks vi todo su potencial.
Pug es excelente, para mi es mas limpio. sin embargo cuando quieres dejar espacios en blanco al final o al inicio se pone rejego. Es importante analizar correctamente la documentación
Una preguntota ¿El uso de pug al tener menor cantidad de palabas se hace más rápida la transferencia de archivos o el archivo se transforma a un html de toda la vida y luego se transfiere?
¡Hola!, el archivo se transforma a un html de toda la vida y luego se transfiere. Recuerda que el navegador no entiende nada más que HTML puro y duro, eso significa que si tú tienes una aplicación hecha con PUG, React, Vue, Sass o cualquier otra de estas tecnologías raras que existen, eso el navegador no lo entiende, es por eso que muchas de estas tecnologías tienen consigo una especie de compilador que se encarga de traducir toooodo eso a los tipicos HTML, CSS y JavaScript de toda la vida :D
¿La carga que genera al servidor no es demasiada, al tener que crear el documento cada vez que se quiera consultar una algo en la app web?
wow esta clase estuvo genial, me va a servir mucho para un proyecto que tengo
El motor de plantilla de pug es muy sensillo y amigable. Me encanta!!
Pug no es lo mío! Handlebars me gusta mucho más.
Bulma excelente alternativa
Me gusta mucho Pug, lo veo como el Sass de HTML (usando los archivos con extensión .sass en lugar de .scss) tanto en Sass como en Pug se tiene que prestar atención a la identación, que creo que es uno de los principales problemas de los que empiezan a aprender Pug. Intenten crear un pequeño proyecto usando .sass y Pug para que vean que si usan ambos al mismo tiempo es una cosas muy sencilla! 😁
Pug al igual que Sass es un preprocesesador.
Sass para css
Pug para HTML