Automatizar Jade y Stylus con Sublime Text 3

Cuando usamos los preprocesadores Jade y Stylus, debemos compilar el código aparte para que genere el HTML o CSS resultante, podemos usar el parámetro watch, pero dejaríamos una consola esclava, y este comando lo deberíamos ejecutar cada vez que retomamos la programación con Jade o Stylus.
Existe una forma de que al salvar nuestro código en Jade o Stylus se compile automáticamente el código para que genere el código de salida automáticamente.
Lo primero que tenemos que hacer es verificar que tengamos instalado el nodejs (nodejs.org), verificar que tengamos instalado Stylus y Jade, respectivamente lo podemos verificar con los comandos jade --version y stylus --version a nivel de la consola, en caso que no lo tengamos instalado debemos ejecutar respectivamente los comandos npm install –gstylus y npm install –g jade en la consola como administrador en el caso de Windows; y con el prefijo sudo, en el caso de linux o mac, sudo npm install –gstylus y sudo npm install –g jade, hasta aquí tenemos lo que podemos llamar, los “prerrequisitos”.

Ahora si vamos con los pasos para automatizar Stylus y Jade.

1.- Instalar los paquetes de Stylus yJade

Preferences > Package Control: Install Package
(buscar e instalare los paquetes Jade y Stylus
y verificar en:
View > Syntax

2.- Crear un nuevo sistema de construcción (New Build System…)
en Tools / Buil System / New Buil System

Se abrirá una archivo json y se debe modificar con el siguiente valor:

{
  "cmd": ["cmd","/c","jade","-P","$file"],
  "selector": "source.jade"
}

Este archivo se debe guardar con el nombre Jade.sublime-build en la carpeta por defecto de Sublime Text del usuario.
(C:\Usuarios\[USERNAME]\AppData\Roaming\Sublime Text 3\Packages\User).

Para Stylus guardamos el archivo Stylus.sublime-build en la misma carpeta con el valor:

{
  "cmd": ["cmd","/c","stylus", "-c", "$file"],
  "file_regex" : ".",
  "selector": "source.stylus"
}

En este punto ya podemos generar nuestro código HTML o CSS presionando CTRL+B para iniciar el constructor (en Tools > Build), seleccionando previamente el sistema de construcción respectivo de Stylus o Jade, pero esto es engorroso y todavía no tenemos la simplicidad de que al salvar nuestro código en Jade o Stylus se genere automáticamente el código HTML o CSS respectivamente.

Para esto:

3.- Se debe instalar el paquete “SublimeOnSaveBuild”
… y configurarlo:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > Default

Copiamos el código a:
Preferences > Package Settings > SublimeOnSaveBuild > Settings > User

Y agregamos las extensiones “styl” y “jade” a “filename_filter”, asegurándonos de que “build_on_save” valga “1”.

{
    "filename_filter": "\\.(styl|jade|css|js|sass|less|scss)$",
    "build_on_save": 1
}

Se debe tener seleccionado el constructor respectivo, en este caso jade, en Tools > Build System > > Jade

Se crea el código en Jade.

Desde este momento, en lo que salvemos el código en Stylus o Jade se generará automáticamente el código HTML y/o CSS correspondiente.
En este caso se compila automáticamente el archivo jade y se genera el archivo HTML respectivo.

Vemos el contenido del archivo HTML.

Y lo ejecutamos en el navegador.

Eso es todo!!!