TECNato – TIC's Perú

Automatizando Jade y Stylus

martes, 23 de julio del 2013 18 comentarios

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:

 

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:

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:

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


Escrito por para TECNato

18 comentarios

  • mcedwin
    10 de agosto del 2013

    Comprobado, buen aporte.

  • Hernan
    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

  • Cristian Garcia
    13 de marzo del 2014

    Esto es bastante interesante pero para ubuntu como seria?

  • Cristian Garcia
    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

  • Alain
    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)

  • Ernesto Tarrillo
    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

  • Alain
    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”]

  • Luis Gago
    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

  • Alain
    18 de agosto del 2014

    Luis para eso es el parámetro de salida “–out” ;)

  • Luis Gago
    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.

  • Alain
    18 de agosto del 2014

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

  • Alain
    18 de agosto del 2014

    El nib es con -u:
    [“cmd”,”/c”,”stylus”,”-c”,”-u”,”nib”,”$file”,”–out”,”../css”]

  • Luis Gago
    18 de agosto del 2014

    Alain lo sigue creando en la misma ruta.

  • Park
    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]

  • Alain
    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.

  • Autocompilando Stylus « TECNato – TIC's Perú
    26 de mayo del 2015

    […] esta oportunidad mostraremos una alternativa a la Automatización de Stylus con Sublime Text mediante una funcionalidad en […]

  • Totseo
    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!

  • Dav
    22 de diciembre del 2016

    Hola Alain, oye, hago todo lo que dices y NO se genera el archivo HTML, ¿Qué puede estar pasando?

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos 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 Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
Gestor de contenidos:
WordPress