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:
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.
Al abrir el archivo «hola.html» obtendrémos el siguiente resultado:
Tweet
Escrito por Alain para TECNato
Acerca del autor
Artículos destacados
Categorías
Miembros
TECNato
TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).
Hazte miembro
TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.
Soporte
Diseño Web:
Grupo Sistemas
CMS:
WordPress
18 comentarios
10 de agosto del 2013
Comprobado, buen aporte.
19 de agosto del 2013
¡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
13 de marzo del 2014
Esto es bastante interesante pero para ubuntu como seria?
14 de marzo del 2014
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
14 de marzo del 2014
Hola Christian, se supone que al ponerle -P le estas indicando que el coódigo resultante sea Pretty osea Bonito (con identación)
24 de junio del 2014
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
24 de junio del 2014
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»]
17 de agosto del 2014
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
18 de agosto del 2014
Luis para eso es el parámetro de salida «–out» ;)
18 de agosto del 2014
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.
18 de agosto del 2014
Corrección, hay que separar el directorio en otro parámetro:
[«cmd»,»/c»,»stylus», «-c», «$file», «–out»,»../css»]
18 de agosto del 2014
El nib es con -u:
[«cmd»,»/c»,»stylus»,»-c»,»-u»,»nib»,»$file»,»–out»,»../css»]
18 de agosto del 2014
Alain lo sigue creando en la misma ruta.
3 de octubre del 2014
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]
3 de octubre del 2014
Tienes que modificar los archivos stylus.bat y jade.bat que vienen dentro del paquete de acuerdo a donde los instalaste.
26 de mayo del 2015
[…] esta oportunidad mostraremos una alternativa a la Automatización de Stylus con Sublime Text mediante una funcionalidad en […]
11 de julio del 2015
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!
22 de diciembre del 2016
Hola Alain, oye, hago todo lo que dices y NO se genera el archivo HTML, ¿Qué puede estar pasando?