Html y Css con Jade y Sylus en Debian

hola, luego de ver mejorando.la/conferencia quede impactado con lo que mostro @neojp y me dispuse a preparar mi sistema para empezar a probar jade y stylus me fui corriendo a los sitios oficiales de cada uno y descarge los archivos y no entendi ni papa, je je... (nada de nada con el ingles...)

Bueno lo cierto es que primero debia instalar node.js por que jade y stylus son modulos que trabajan en el.

Como actualmente uso debian en su version testing (masoquista ) me fui a los repositorios a traves del sitio web de debian a ver si estaban los paquetes disponibles y si pero estan en la version sid (inestable), Les voy explicar lo que hize por si alguien no lo a hecho y no sabe como:

Primero cambie los repositorios usando vi (usen el editor de su preferencia) con privilegios de root, agregue los de la version inestable actualize y listo...

Código :

vi /etc/apt/sources.list

luego comente los repositorios testing (signo del numeral # al principio de cada linea) y agrege los inestables:

deb http://ftp.de.debian.org/debian/ sid main contrib non-free
deb-src http://ftp.de.debian.org/debian/ sid main contrib non-free

Despues de esto actualize:

Código :

apt-get update

Cuando finalizo todo procedi con la instalacion de nodejs y npm (node package manager, hay si el nombre lo dice todo)

Código :

apt-get install node npm

Cuando finalizo instale con npm jade y stylus

Código :

npm install stylus jade

Y con esto ya estuvo todo listo para empezar a hacer mis pruebas.

No hace falta que explique como se usa cada uno por que en el video de mejorando.la/conferencia ya se dan unos buenos ejemplos, de todos modos para ahondar mas en el tema dirijanse al sitio web de cada uno.

http://learnboost.github.com/stylus/
http://jade-lang.com/

Para compilar el codigo html con jade escribimos en consola:

Código :

jade < miarchivo.jade > miarchivo.html

(En los sitios oficiales no vi esto, y del video de mejorando.la no lo recuerdo... lo encontre en la ayuda del programa)

y para stylus es de forma silmilar:

Código :

stylus <miarchivo.stylus > miarchivo.css 

Y bueno, los archivos para jade tienen extension .jade y para stylus es .stylus

Espero que les sirva de algo, empiezen a usar jade y stylus, por que creo que mejora mucho la productividad, y en personal ya existia una carga negativa psicologica cuando pensaba en escribir codigo html precisamente por todos esos <> que debia teclear...

Nota: No tenia claro donde postear esto, asi que si lo deciden cambiar de lugar lo entendere.

necesito ayuda!!! el dijo que también se podía usarse con php

Hola, acabo de instalar node, jade y stylus tal cual lo publico.
Pero ahora que intento compilar un .jade, bash me dice que no reconoce al comando jade.
Los mismo pasa con stylus

alexzer0 escribió:

puedes revisar este enlace:
https://github.com/everzet/jade.php

jorgecopia escribió:

Hola apenas estoy iniciandome en nodejs + jade + stylus, espero te sirva lo que he investigado.

Existen dos opciones de instalar un modulo:

1.-Local: Solo esta disponible para ejecurtarlo con tu aplicacion app.js que es donde compilas tu aplicacion.

Código :

$ npm install modulo

2.-Global: Esto hace disponible el modulo a nivel de linea de comandos.

Código :

$ npm install -g modulo

Cabe mencionar que si lo instalas "global", solo funciona en linea de comandos y marca error en la aplicacion app.js. Y si lo instalas "local" solo funciona con app.js. En mi caso para hacer pruebas yo lo instale de las dos formas y no tiene conflictos. Lo puedo usar por linea de comandos y tambien en la aplicacion.

Nota: Esto es segun mi poca experiencia. Si en algo estoy mal. se agradecen las correcciones.

hanuka escribió:

De hecho, instalarlo en modo global deberia funcionar en el app.js, lo mas probable es que los modulos globales no esten en tu lista de herencia para incluir archivos usando require, me ha pasado antes.

require.paths es un array con la lista de directorios donde buscara los modulos, si no encuentra stylus en el 1er directorio, buscara en el siguiente, hasta el final. Si no lo encuentra en ninguno de los directorios, te botará un error.

Si el directorio donde instalas los modulos de forma global no está dentro de require.paths, puedes usar unshift o append para agregarlo.

http://stackoverflow.com/questions/5390886/nodejs-require-paths-resolve-problem
http://jherdman.github.com/2010-04-05/understanding-nodejs-require.html

ahora yo tengo un problema...
el codigo que genera jade es todo en una linea...
¿el codigo es asi?

NEO_JP tu que opciones en jade usas para compilar el codigo

Hola, de hecho es normal y "bueno" que el codigo generado este en una linea, asi el contenido pesa menos y el navegador demora menos en descargarlo.

Si necesitas hacer depuracion del codigo para saber cómo está estructurado, puedes usar firebug para firefox, o las herramientas de depuración de webkit o IE. Todos se activan presionando F12.

Pero no hace que el codigo sea mas dificil de leer para una persona que no tenga el archivo.jade, no existe una opcion para que el codigo se genere indentado?.

Gracias, y disculpa la insistedera...

orvix_0286 escribió:

Para nada, de hecho estoy de acuerdo contigo en que deberia haber una forma de exportar el codigo indentado, lastimosamente no existe.

Yo te recomendaria exportarlo, usar la version no indentada en el servidor para que lo vean los usuarios (ya que es lo ideal), y siempre realizar los cambios en el archivo jade.

De ser necesaria una version indentada por cualquier motivo, ya sea integrar el html en un CMS, o entregar el proyecto a un contratista, etc. Yo sugeriria usar alguna herramienta que "embellece" el codigo, puedes encontrar muchos en la web, entre ellos, tidy y html beautifier, solo ten cuidado que te generen espacios y tabs extra que pueden generar problemas cuando trabajas con etiquetas <img> o textos que no requieren separacion al abrir y cerrar la etiqueta <pre> y algun otro escenario.

Suerte.

Ok, muchas gracias.

hola tengo el siguiente problema.


node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: require.paths is removed. Use node_modules folders, or the NODE_PATH environment variable instead.
at Function.<anonymous> (module.js:376:11)
at Object.<anonymous> (/usr/local/bin/[email protected]:4:21)
at Module._compile (module.js:432:26)
at Object..js (module.js:450:10)
at Module.load (module.js:351:31)
at Function._load (module.js:310:12)
at Array.0 (module.js:470:10)
at EventEmitter._tickCallback (node.js:192:40)

creo que el comentario que ya tenias arriba corresponde a este error pero me sale cuando intento usar el siguiente comando

$ jade -v

espero me puedan ayudar

Te falta la variable de windows NODE_PATH.

traete un post a la vida.

NEO_JP escribió:

no pero estoy trabajando sobre ubuntu

Hola, gracias por el artículo. Me surge una duda, tengo todo corriendo correctamente pero cuando compilo mi .jade, es decir, cuando hago lo siguiente:

jade index.jade index.html

Me compilar el .html correctamente pero con un detalle, todo me sale en una sola linea, la verdad que yo no deseo esto, hay alguna manera o algún comando auxiliar que diga que no quiero un archivo minimizado, sino uno con saltos de lineas y correctamente tabulado.

Espero puedas responder, gracias.

jhoedram escribió:

Ya se como hacerlo, tecleamos el comando.

jade -P index.jade index.html