compilar plantillas Jade

En este post voy a explicar como compilar las plantillas jade para generar las páginas html. Si aún no tienes instalado jade, te puedes pasar por el artículo en el que explico su instalación y  funciones básicas.

Una vez tienes creados los ficheros con la extensión .jade, abrimos una consola o terminal:

  • Abrir la consola en windows:
    • Escribe cmd sobre el cuadro de búsqueda de programas y ejecuta cmd.exe .
    • Pulsa la tecla windows+r, escribe cmd en el cuadro de diálogo y pulsa intro.
  • Abrir terminal en MacOS: Te diriges a Aplicaciones > utilidades > terminal.
  • Consola en sistemas linux: Si usas linux como SO, no creo que sea necesario explicártelo, pero suele estar en rutas similares a Menús -> Accesorios -> Terminal.

Una vez abierta la terminal, navegamos hasta la ruta donde se encuentra nuestro directorio de plantillas jade. Yo por lo general, siempre creo una carpeta dedicada a estas plantillas, ya que a la hora de compilar puedes elegir el directorio donde quieres que se generen.

Una vez situados en la ruta, compilar una plantilla es tan sencillo como ejecutar el siguiente comando:

jade [opciones] [directorio|archivo ...]

 

Jade tiene varias opciones a la hora de compilar:

-h, --help             Muestra todos las opciones de las que dispone con algunos ejemplos
-V, --version          Muestra la información de la versión de Jade instalada
-O, --obj <path|str>   Pasarle un fichero Json o un json en línea
-o, --out <dir>        Elegir el destino o ruta donde quieres que se genere el archivo html
-P, --pretty           Genera un archivo html bien indentado (tabulado).
-w, --watch            Una de las mejores opciones. Revisa constantemente los cambios que generes en el .jade y lo compila automáticamente.
-E, --extension <ext>  Especificar la extensión de salida que quieres que tenga el archivo generado
--doctype <str>        Especificar el doctype del fichero, siempre y cuando no se haya especificado en la plantilla

 

 Compilación básica

Para compilar una plantilla jade es:

jade index.jade

Si todo ha salido bien, en la consola nos pondrá un texto que dice  ‘rendered index.html’. 

Si no te indica el texto anterior, es que tienes mal algo en la plantilla. En el código de error te suele dar bastantes pistas de lo que está ocurriendo.

Comando -O / –obj

Con esta opción, puedes pasarle un el nombre de un archivo .json, del cual podrá extraer datos que uses en tu plantilla .jade o bien pasarle el contenido en línea a la hora de compilarlo.

{"persona":{
  "nombre": "Alejandro",
  "apellido": "Molero",
  "hijos": [
    {"nombre": "Lucia", "edad": "15"},
    {"nombre": "Rubén", "edad": "11"},
    {"nombre": "Laura", "edad": "9"}
  ]
}}
doctype html
html(lang='es')
  head
    meta(charset='UTF-8')
    title Trabajando con el comando -O
  body
    h1 Hola #{persona.nombre} #{persona.apellido}
    p tienes #{persona.hijos.length} hijos
    p tu primer hijo es #{persona.hijos[0].nombre} y tiene #{persona.hijos[0].edad} años
jade index.jade -O file.json

Eso generará el archivo index.html reemplazando las variables #{persona.nombre} por el nombre dentro del fichero Json, #{persona.apellido} pro el apellido y así sucesivamente, incluso trabajando con fucniones de javascript como length.

Para pasar los datos en la misma linea de comandos es muy similar, pero en vez pasarle el nombre del fichero json, lo pasas como parámetro:

jade --obj '{ "nombre": 'alex' }' index.jade

Mi recomendación es que este método lo uses siempre y cuando sean casos puntuales y de pocos datos, ya que es más engorroso.

Comando -o / –out

Con este parámetro especificaremos la ruta donde queremos que se generen los ficheros html.

// al directorio anterior
jade -o /plantillas

// a un subdirectorio
jade -o ../

 

Comando -P / –pretty

Es un comando bastante recomendable si quieres hacer las plantillas legibles y bien tabuladas. Si omites este comando, te generará todo el código html en una sola línea.

<!-- Sin el parámetro -P -->
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body></body></html>

<!-- con el parámetro -P -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    
</body>
</html>

 

Comando -w / –watch

Una vez ejecutes la línea el comando, jade revisará que has hecho cambios en la plantilla .jade y lo compilará automáticamente. Este tipo de comando es  muy recomendable, sobre todo en preprocesadores como SASS.

 

Comando -E / –extension

Con este comando podrás determinar la extensión que quieres que tenga el fichero generado:

//fichero index.htm
jade index.tpl -E htm

//fichero index.html
jade index.tpl -E html

Usar varios parámetros a la vez

A la hora de ejecutar en la consola el comando, se pueden usar varios separados por comas:

jade index.tpl -w -P
jade --obj '{ "nombre": 'alejandro' }' index.jade -P -w

Recordad que estos comandos son sensibles a las mayúsculas y minúsculas, por lo que debéis aseguraros de que ponéis el parámetro correctamente.

Hay algunos de los comandos que no he explicado, ya que son mas extensos o complicados. Podéis echarle un ojo a su página de comandos o en la página de su API.

Deja un comentario