Os estaréis preguntando todos que es esto de Jade y para que sirve.
Lo primero que debemos saber es que Jade es un motor de plantillas HTML que nos permitirá, de una manera muy sencilla, montar nuestras páginas web permitiendo ampliar las funcionalidad HTML, que en muchas ocasiones se nos quedan cortas. Entre otros nos permitirá crear variables, funciones, mixins, bucles y muchas cosas más. Al final del todo, y tras compilar el código obtendremos simplmente un código HTML que podremos utilizar en nuestra web.
Jade tiene su propia sintaxis y puede que al principio os cueste un poco aprender como usarla pero una vez tengáis soltura, nada os podrá parar.
Instalando Jade
Yo os recomiendo que, ya que en post anteriores hemos estado viendo el gran potencial de Gulp en el artículo anterior, nos basemos en el modulo de Jade para gulp que existe en npm. Para ello vamos a instalar el módulo:
npm install --save-dev gulp-jade
Una vez instalado solo tenemos que incluir el módulo en nuestro gulpfile.js y crear una tarea para compilarlo.
var jade = require('gulp-jade');
var origen = 'jade/*.jade';
var dist = 'html/';
gulp.task('html', function() {
return gulp.src(origen)
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest(dist))
});
Esta tarea tomará todos los archivos con extensión .jade de la capeta jade, los compilará y el html resultante lo dejará en la carpeta html.
Con esto ya tendríamos funcionando nuestro jade para ser compilado y usado. Lo siguiente que toca es empezar a escribir código jade.
Jade básico
Es un poco complicado explicar de palabra como debemos usar jade asi que lo único que os diré es que debemos usar en todo momento las tabulaciones para separar cada linea de código. Y dicho esto vamos a ver un ejemplo de código que os va a resultar mucho más útil que todo lo que os pueda contar:
<div class="producto"> <a href="www.productos.com/pan-de-molde" title="ir a Pan de Molde"> Pan de molde</a> </div>
Si este código anterior lo queremos transformar en jade quedaría de la siguiente forma:
div a(href="www.productos.com/pan-de-molde",title="ir a Pan de Molde") Pan de molde
¿Sencillo verdad? A cada elemento html se le quitan los < y > y se elimina su cierre. Además, para indicar que un elemento esta dentro de otro se le tabula. Si los elementos llevan atributos se meten entre parentesis y se separan por comas. Si el elemento lleva texto se separa del mismo por un espacio.
Hay que tener mucho cuidado con las tabulaciones ya que si nos equivocamos es muy probable que al compilar os de algún error. Es bastante sensible. Además, podéis usar también espaciados en vez de tabulaciones aunque yo os recomiendo usar tabulaciones(no podéis usar ambas cosas).
Variables
¿Cómo definimos variables? Para usar variables debemos definirlas de la siguiente manera:
- var mivariable = 'hola mundo'
Y para usarla debemos hacerlo de la siguiente manera:
div(class="HolaMundo") #{mivariable}
Las variables pueden contener desde simples cadenas de texto, hasta JSONs, arrays, etc...
Si nuestra varibale contiene código HTML y queremos que al usarla ese HTML se reproduzca debemos hacerlo de la siguiente manera:
- var mivariable = 'hola <b>mundo</b>'
div(class="HolaMundo") !{mivariable}
Si no usasemos el !{} el contenido de la variable resultante sería 'hola <b>mundo</>'
Esta son las dos variantes de como mostrar datos en pantalla.
Bucles
Como ya os decía en el apartado anterior, las variables también pueden contener arrays. La forma de recorrerlos es la siguiente:
-var miarray = ['Andres','Paco','Andrea']
each item in miarray
div Mi nombre es #{item}
También podemos utilizar el indice de la iteración para lo que necesitemos:
-var miarray = ['Andres','Paco','Andrea']
each item,index in miarray
div Mi nombre es #{item} y mi indice #{index}
Por último, podemos recorrer también objetos json:
-var miJson = [{nombre:'Paco',apellido: 'González'},{nombre:'Andres',apellido: 'Suárez'},{nombre:'Andrea',apellido: 'Rodríguez'}]
each item in miJson
div Mi nombre es #{item.nombre} y mi apellido #{item.apellido}
Mixins
Los mixins son funciones que nos vana permitir reutilizar código y también hacer ciertas funcionalidades dinámicas sin necesidad de estar repitiendo continuamente lo mismo. vamos a ver un ejemplo.
Vamos a definir un mixin que va a recibir un listado de productosmuestraListado.jade
mixin muestraListado(content)
- var productos = content
div(class="listadoProductos")
ul
each item in productos
li #{item}
Condicionales
Como no, no podían faltar nuestro queridos condicionales if, if else, else. Para usarlos debemos hacer lo siguiente:
- var nombre = Adrian
if nombre
div Mi nombre es #{nombre}
También podemos usarlo de la siguiente manera
- var numero = 12 if(numero > 11) div Tu numero es mayor else if (numero == 11) div Tu numero es el 11 else div Tu numero es menor
Para poder usar el mixin debemos hacer lo siguiente:
include mixins/muestraListado - var listadoProductos = ['Naranjas','Pan','Arroz','Cereales'] +muestraListado(listadoProductos)
Debemos importar el mixin y una hecho ya podremos usarlo en nuestra página. Con esto se pueden generar piezas de código dinámicas que podemos utilizar para generar contenido como por ejemplo migas de pan, menús, o lo que se nos ocurra.
Includes
Otra opción que nos ofrece Jade es la posibilidad de incluir piezas de código previamente creadas directamente. Por ejemplo, podemos crear una cabecera genérica para nuestro portal e incluirla en cada una de las páginas de tal forma que si cambiamos la cabecera se va a cambiar en todas las páginas a la vez. Esto se hace de la siguiente manera:
include jade/header
Nuestra cabecera estará en una carpeta llamada jade y su nombre sería header.jade
De esta manera podemos importar todo el código que necesitemos.
Extends
Los extends son una de las joyas de la corona de Jade. Es un sistema por el cual podremos definir layouts que podremos rellenar con el contenido que nosotros queramos. Para hacerlo debemos primero crear nuestra layout layout.jade:
head title Mi página body header img(src="logo.png",alt="Mi Logo") div(id="content") block content footer Copyright 2017
Si nos fijamos, en el bloque content hemos definido un "block content". Quedaros con él en la mente porque a continuación vamos a ver porqué.
Ahora lo que vamos a hacer es crear una página a partir de la layout que hemos creado. Para ello creamos un nuevo jade:
extends layouts/layout.jade block content div Este es el contenido de mi pagina nueva
Si os fijáis, le hemos indicado que extienda de layout.jade y dentro de block content hemos añadido el código específico de nuestra página de tal modo que si por cualquier motivo nosotros debemos modificar algo de la layout, se hará el cambio automáticamente en todas las páginas que la usen sin necesidad de ir una por una cambiándolo.
Y ya para terminar ¡no os olvideis del DOCTYPE!
!!! 5
o también
doctype 5
Espero que os sirva de mucha ayuda.