Sebastian Durandeu Blog

  • Visitantes

LESS en Node.js y Express

Posted by sebastiandurandeu on October 14, 2013

Rima, no? Bueno, si quieren ir directo al código, vayán a ‘Lo Importante‘.

Como escribir en wordpress es gratis, quería tomarme la libertad de dar una opinión primero. Cuando lees la documentación de los módulos de Node.js, TODOS te la venden de que si querés hacer ‘cosa-nueva‘, tenés que hacer:

  1. npm install cosa-nueva
  2. var cosaNueva = require('cosa-nueva');
  3. app.use(cosaNueva({...}));
  4. Leesto, ya está!

Fácil, no? Bueno, MINGA! (para los amigos de Latam es una expresión de lunfardo Argentino que representa incredulidad). O sea tampoco es que sea mucho mas difícil, pero siempre aparece ‘ese detalle’ que te la complica. Por eso no se pierdan mis aclaraciones abajo 🙂

Lo Importante

Muy resumidamente LESS extiende la sintaxis de CSS para facilitar la organización y mantenimiento del código. Lo que sigue son los pasos para usar LESS en una app Node.js que usa Express, usando el módulo less-middleware.

1. Como siempre:

npm install less-middleware

2. En el server.js de la app:

var lessMiddleware = require('less-middleware');
...
var app = express(); // express app initialization
...
app.use(lessMiddleware({
    src : __dirname + "/static/less",
    dest : __dirname + "/static/css",
    prefix : "/css",
    force : true,
    compress : 'auto'
}));
app.use(express.static(__dirname + '/static')); // static-middleware de express
app.use(app.router); // router de express

3. La organización que propone el código de arriba es tener una carpeta ‘static’ en el root de la app con el siguiente contenido:

less-folder-structure

4. Si tengo un archivo ‘styles.less en la carpeta ‘less’, Los estilos los puedo incluir ahora desde HTML de la siguiente manera. Notesé que apuntamos al archivo con extensión CSS directamente.

<link rel='stylesheet' href='/css/styles.css' type='text/css' />

Aclaraciones

El código de arriba tiene varias lineas de más, expresamente, para aclarar algunas cosas:

  • express.static() tiene que estar SI o SI después de app.use(lessMiddleware(...)). Esto se debe a que less-middleware utiliza el express.static() middleware para servir los archivos compilados.
  • src es la ruta a donde less-middleware va ir a buscar los archivos LESS para compilarlos. No necesariamente tiene que estar dentro de la ruta de express.static() (o sea, ‘/static’).
  • dest es la ruta donde less-middleware va dejar los archivos CSS compilados. Tiene que estar dentro de la ruta de express.static() (e.g. si express.static() apunta a la carpeta ‘/static’, dest tiene que estar dentro de esta carpeta).
  • prefix Aún no entiendo bien para que sirve. Pero la regla práctica es que si src y dest son distintos, tiene que tener el valor de la porción distinta del path, en este caso ‘/css’. Esta mejor explicado en el post que menciono al final.
  • compress Setearlo en auto hace que si utilizamos las extensiones ‘.min.css’, o ‘-min.css’ al referenciar los archivos CSS, less-middleware va generar el archivo minificado.
  • force En true hace que se recompilen los archivos LESS en cada request. Útil durante desarrollo, desactivar para producción.
  • app.use(app.router). OJO QUE NO es lo mismo configurar el router de express, antes que después de de express.static(). Sobre todo si tienen configurada una ruta del tipo app.get('/*',...). Depende si está antes o después, less-middleware puede funcionar o no. Inclusive puede tener impacto el la performance. No me voy a meter en detalle porque un genio lo explica muy bien acá: http://stackoverflow.com/questions/12695591/node-js-express-js-how-does-app-router-work

El siguiente artículo explica bastante bien varias cosas de estas: http://blog.dylants.com/2013/03/16/less-middleware-using-less-with-node-js/

Feedback abajo 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: