Introducción y primeros pasos con Pug

Pug (anteriormente conocido como Jade) es un motor de plantilla de Node.js. con el que seremos capaces de escribir código HTML de una sintaxis mucho más sencilla, clara y directa, tanto a la hora de escribir como de leer y modificar.

Para ello, necesitamos un compilador externo como pueda ser Prepros en Windows, o CodeKit en Mac. Aunque para esta ocasión, y sabiendo mi predilección por Atom y sus extensiones, no hará falta instalar ningún software extra más allá de nuestro editor de código.

Instalación

Muy simple. Instalaremos solo dos extensiones en Atom. La primera de ellas será Autocompiler-Pug-Jade, que nos permitirá compilar el código de Pug dentro de nuestro editor de código. Y la siguiente, Language-pug. Con esta, Atom reconocerá la sintaxis de Pug, y aplicará un código de colores a cada elemento, que nos facilitará la lectura del archivo.

Y ya está. Una vez tengamos esto instalado, ya podemos empezar a trabajar.

Primeros pasos

En primer lugar, crearemos nuestro archivo, al que le podremos la extensión .pug. En mi caso llamaré al archivo index.pug. Lo primero que debemos decirle al archivo es la localización donde queremos compilar nuestro archivo HMTL. Para ello, en la primera línea de nuestro archivo index.pug escribimos:

//output:index.html

Con esto, le estamos diciendo que compile el archivo index.html en la raíz de la carpeta de nuestro proyecto. El nombre el archivo HTML puede ser el que queramos, solo habrá que sustituir la palabra index por la que queramos.

Si somos más maniáticos del orden y queremos tener cada archivo en su sitio, y queremos mantener nuestro index.html en la carpeta raíz, pero el archivo index.pug en una carpeta diferente, deberemos escribir dentro de este último:

//output:../index.html

Si habeis sido observadores, habréis notado que en la barra inferior de Atom aparece en rojo un texto que nos dice Not compile. Esto es porque hasta que no guardamos nuestro archivo Pug, Atom no lo compilará y no creará el HTML. Si intentamos guardar ahora mismo, Atom seguirá sin compilar nada. No nos pongamos nerviosos. Esto ocurre porque aun no hay nada que compilar, solo hemos escrito la localización de donde queremos compilar, pero ese archivo no puede tener aun nada. Así que, !empecemos a escribir código!

Cuando estamos escribiendo con Pug, nos ahorramos muchos de los caracteres propios de HTML, como pueden ser los brackets, o los etiquetas de cierre. Así, de un golpe de vista, tendremos un código mucho más limpio y conciso, con el que nos resultará más sencillo trabajar y corregir errores. Pero el movimiento se demuestra andando, así que empecemos.

En primer lugar, hay que declarar en que tipo de documento estamos trabajando, por lo que escribimos en nuestro archivo index.pug:

doctype html

Si guardamos, veremos como las letras rojas de la barra inferior de Atom se convierten a un color verde mucho más amigable, y el texto cambiará a Compiled. Además, en el panel de navegación de Atom aparecerá el archivo index.html dentro de la carpeta de nuestro proyecto. Parece ser que todo va sobre ruedas, así que podemos sentirnos orgullosos por el trabajo realizado, pero esto no ha hecho nada mas que empezar.

Vamos a abrir el recién creado index.html, para ver con nuestro propios ojos que se ha compilado. Efectivamente, dentro del archivo aparece un espléndido:

<!DOCTYPE html>

La declaración del tipo de documento es la correcta. Pero puede surgir la pregunta, ¿de verdad merece la pena todo lo que hemos hecho, si solo hemos escrito tres caracteres menos? Acabamos de empezar, no tiremos la toalla aun. Vamos a hacer nuestro .

Como hemos dicho anteriormente, no necesitamos escribir brackets ni etiquetas de cierre. Vamos a ello:

html
  head
    title Introducción a Pug
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

Guardamos (para compilar), y nuestro archivo HTML se actualizará de forma automática. Veamos que hay nuevo dentro de él:

<html>
  <head>
    <title>Introducción a Pug</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
</html>

Si, parece que esta vez si que nos hemos ahorrado bastante. Como hemos visto, en jade no hay etiquetas de cierre, y el mismo reconoce el texto dentro de esta etiqueta si insertamos un espacio entre ambos. En Atom se ve de forma más clara, al tener cada elemento un color diferente.

Vamos a ver una etiqueta simple. Por ejemplo, un (siempre recurrente) Hola mundo!. Pera organizarnos, todo el texto estará dentro de un <div>, y cada palabra en un párrafo diferente. Fácil, ¿verdad?

div
  p Hola
  p mundo!

Y como siempre, veamos que aparece en nuestro HTML:

<div>
  <p>Hola</p>
  <p>mundo!</p>
</div>

Esto parece que marcha. Aquí el ahorro a la hora de escribir ha sido bastante en comparación con lo que deberíamos haber hecho si estuviésemos escribiendo en HTML.
Para acabar con esta introducción, vamos a tratar un elemento básico en HTML: clases e identificadores. Se pondrá un punto antes de la clase, y un asterisco antes del identificador. Igual que si estuviésemos trabajando en CSS. Eso si, hay que tener en cuenta de que no hay que poner espacio entre ellos, ya que si no se identificaran como un elemento dentro de las etiquetas, y no es lo que queremos. Hagamos un pequeño ejemplo.

.container
  .row.text#heading-a
    p.text-sm Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Que en nuestro archivo HTML sería:

<div class="container">
  <div id="heading-a" class="row text">
    <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. /p>
  </div>
</div>

Perfecto. Todo mucho más limpio y claro. Pero, ¿ no veis algo extraño en el código de Pug? Exacto, no hemos usado la etiqueta de inicio div. Al ser una etiqueta tan común, Pugla obvia y la introduce de forma automática al compilarla. Eso si, esto solo podemos usarlo cuando esta etiqueta lleve una clase o un identificador. Aunque la podemos poner si queremos, no es más que una opción para ahorrar algo de tiempo.

Y por ahora esto es todo en esta introducción a Pug. En el futuro esperamos escribir otro artículo profundizando algo más, además de dar algunos detalles con los que podremos optimizar aun más nuestra escritura compatibilizándolo con otras extensiones disponibles para Atom.

Comentarios (6)

    1. Muchas gracias, Sammael! Esperamos que te haya servido de ayuda.

      En unos días subiremos otro entrando en la sintaxis de Pug más profundamente, y veremos los atajos existentes si lo combinamos con Emmet.

  1. Un proyecto muy interesante para escribir código front-end por lo que veo, pero me queda una duda. Cómo se integra con NodeJS? Suponiendo que si es un un framework para plantillas de NodeJS, debe haber una forma de hacer llamados API al backend en NodeJS?

    1. Precisamente, es uno de los temas que vamos a tratar en la continuación del artículo. ¡Parece que me has leído las intenciones!

      Un saludo, y gracias por comentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *