Automatizando Jade y Stylus

Es momento de pasar el diseño de nuestro website a código fuente, a este paso se le llama maquetar y para lo cual normalmente se tiene que escribir infinidad de etiquetas HTML con los infaltables símbolos de menor (<) y mayor (>), de la misma forma para los estilos tenemos que escribir infinidad de puntos y comas (;) y llaves ({}).

Sin embargo existen alternativas para evitar el trabajo anterior, en este artículo hablamos de Jade y Stylus, el primero es un motor de plantillas que genera código HTML y el segundo un pre procesador de CSS, los cuales agilizan el trabajo de maquetación sin necesidad de escribir etiquetas, puntos y comas y llaves, más bien, es necesario llevar un código ordenado.

Realizaremos un ejemplo donde generaremos código HTML y CSS al mismo tiempo de guardar los archivos en Jade y/o Stylus. Para esto necesitamos tener instalado Jade, Stylus y el editor Sublime Text.

Primero debemos instalar nodejs, para ello lo instalamos desde nodejs.org

Luego instalamos stylus y jade desde la línea de comandos de windows:

npm –g install stylus
npm –g install jade

 

En Sublime Text debemos instalar los paquetes correspondientes para tener los código Jade y Stylus resaltados.

Para empezar debemos crear un nevo sistema de construcción para Jade de la siguiente forma:

figura-1

Se abrirá un archivo JSON modificamos el archivo como sigue:

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

Lo guardamos con el nombre «Jade.sublime-build» en la ubicación que se abre por defecto (C:\Users\[USERNAME]\AppData\Roaming\Sublime Text 2\Packages\User).

Para Stylus buscamos el archivo correspondiente (Stylus.sublime-build) en la carpeta de paquetes de Sublime Text y dentro de la carpeta Stylus. Lo editamos como sigue:

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

Hasta aquí podemos generar el código HTML y/o CSS presionando CTRL + B. Sin embargo si queremos generar el código al momento de guardar debemos instalar el paquete SublimeOnSaveBuild; una vez instalado lo configuramos seleccionando:

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».

Con esto al momento de guardar archivos Jade y/o Stylus se generará automáticamente el código HTML y/o CSS correspondiente.

figura-2

figura-3

figura-4

figura-5

Al abrir el archivo «hola.html» obtendrémos el siguiente resultado:

figura-6

Autor: Alain

Especialista en desarrollo de aplicaciones web

18 opiniones en “Automatizando Jade y Stylus”

  1. ¡Alain, muchas Gracias!

    Seguí el procedimiento y funcionó. Agradezco de forma especial el código
    del Stylus.sublime-build, el cual soluciono el problema de resaltado de color que era lo que estaba buscando

  2. Amigo ya consegui hacerlo en ubuntu, pero ahora el problema es que el codigo que me genera Jade en Html sale todo en linea osea no tiene indentacion espero su ayuda Gracias

  3. Hola Christian, se supone que al ponerle -P le estas indicando que el coódigo resultante sea Pretty osea Bonito (con identación)

  4. Hola! muchas gracias por el dato, me sirvió de mucho la ayuda!

    Quería sabe si hay algún modo de que cuando se compile, lo haga con destino en otra carpeta, por un tema de orden, ejemplo, quisiera compilar el archivo.jade, y que el resultado esté dentro de la carpeta html. ¿Es posible eso?

    -jade
    –archivo.jade

    -html
    –archivo.html

  5. Ernesto si es posible, simplemente agrega el parámetro de salida a los archivos .sublime-build, ejm: «cmd»: [«cmd»,»/c»,»jade»,»-P»,»$file»,»–out ../html»]

  6. y si quiero cambiar la ruta de stylus en ves que guarde en la raíz del proyecto y me lo guarde en una carpeta por ejem: /css

    Cual seria la instrucción que debo usar

  7. He probado con el «out» así

    «cmd»: [«cmd»,»/c»,»stylus», «-c», «$file», «–out ../css»],

    pero nada.

    Ahora si quisiera usar nib como seria la instrucción?

    «cmd»: [«cmd»,»/c»,»stylus», «-c nib», «$file»],

    o

    «cmd»: [«cmd»,»/c»,»stylus», «-c», «nib», «$file»],

    Ninguna de las 2 me funciono.
    Ayuda por favor.

  8. Corrección, hay que separar el directorio en otro parámetro:
    [«cmd»,»/c»,»stylus», «-c», «$file», «–out»,»../css»]

  9. HOLA QUE TAL CUANDO LE DOY EN GUARDAR ME SALE ESTO PORQUE ? ALGUNA AYUDAR PORFA. GRACIAS.

    node.js:208
    throw e; // process.nextTick error, or ‘error’ event on first tick
    ^
    Error: Cannot find module ‘E:\NodeJS-Jade-Stylus\node_modules\stylus\bin\stylus’
    at Function._resolveFilename (module.js:327:11)
    at Function._load (module.js:272:25)
    at Array. (module.js:463:10)
    at EventEmitter._tickCallback (node.js:200:26)
    [Finished in 0.1s with exit code 1]

  10. Excelente!! Cómo se nota los que saben del tema, estaba ya un poco cansado del CMD y esto funciona de maravilla, tengo que decir que estuve unos minútos tratando de ubicar la ruta correcta, y que tuve que averigüar lo de separar la sentencia final del directorio, saludos!

Deja un comentario

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