2012-02-23 8 views
14

Estoy buscando una guía simple para configurar la vista del servidor y compilar archivos .less en una carpeta usando less.js y node.js. Bryan escribió al respecto en this post.¿Cómo se usa less.js con node.js para ver archivos .less en una carpeta?

Desafortunadamente, las instrucciones para Server-side usage en lesscss.org son de poca utilidad para alguien que es nuevo en node.js.

He intentado el uso de la línea de comandos: $ lessc styles.less > styles.css.

También probé 'watchr' y 'watch-less' y todo funciona. Sin embargo, estoy buscando una solución pura node.js + less.js. Estoy seguro de que hay alguien que podrá explicar claramente cómo configurar node.js y less.js para ver archivos .less en una carpeta. Gracias.

+0

He usado un archivo [sin reloj] (https://github.com/Raynos/so642/blob/master/src/init/watch-less.js) en el pasado. Creo que es el nodo 0.4, así que el código necesita ser actualizado. – Raynos

Respuesta

4

He creado un proyecto de demostración para mostrar cómo funciona. Puede encontrarlo aquí https://github.com/corpix/watcherDemo

Después de la clonación, ingrese el directorio del proyecto y ejecute npm install para instalar menos módulo Node.js. Pruebe a ejecutar index.js y cambiar .less archivo en less_files/ directorio, archivo modificado se compilará y se coloca en css_files/

+0

Utiliza readSync ¬_¬ – Raynos

+0

Solo por comodidad;) – corpix

+2

[Versión asincrónica] (https://github.com/corpix/watcherDemo/tree/async) – corpix

1

escribí algo que podría ser lo que buscas. El script buscará los archivos .less en la carpeta del reloj y los compilará en la carpeta de salida. Todo lo que necesita hacer es especificar la carpeta que desea ver y la carpeta de salida.

nodo inferior-reloj-compiler.js FOLDER_TO_WATCH FOLDER_TO_OUTPUT

https://github.com/jonycheung/Dead-Simple-LESS-Watch-Compiler

Se salta viendo los archivos con nombres que comienzan con guión bajo o un punto.

Escribí esto para mi proceso de desarrollo, pero todavía debería funcionar en un servidor. Sin embargo, es posible que desee volver a considerar mirar constantemente una carpeta de cambios en un servidor en vivo. Es una operación costosa.

1

Usted puede utilizar el supervisor con el argumento -e para proporcionar extensiones de ver:

nohup supervisor -e 'js|ejs|less' $APP_DIR/app.js 1>$APP_DIR/log/app.log 2>&1 & 
echo $! > $APP_DIR/pid/app.pid; 

tomada del guión de nodo de inicio: https://github.com/chovy/node-startup

La versión más simple de este comando es:

supervisor -e 'js|ejs|less' app.js 
4

Honestamente, he visto muchos de los mismos hilos y respuestas.

Si eres como yo y no quieres más código de lo que ya tienes, simplemente descarga una aplicación LESS para Win/Mac/Nix y se compilará automáticamente cada vez que guardes tus archivos .less.

Honestamente creo que esto podría poner menos de una carga en el servidor porque solo tiene que cargar sus archivos compilados y minificados en este punto.

+1

"simplemente descargue una aplicación LESS" ... ¿qué ** es ** una aplicación LESS? ¿donde esta el enlace? – vsync

+0

Estoy de acuerdo en principio, pero esto no debería tener ningún voto hasta que se sugiera tal aplicación. ¡Busqué uno para esta pregunta! – gwg

1

Sé que esta es una publicación anterior, pero surgió varias veces cuando hace poco buscaba lo mismo.

He bifurcado y actualizado el código de jonycheung - y he enviado una solicitud de fusión.

Actualización: jonycheung ha aceptado la petición de fusión por lo que su código original se ha actualizado

Por el momento, el código se puede encontrar aquí:

https://github.com/mikestreety/Dead-Simple-LESS-Watch-Compiler

También he sido trabajar y desarrollar un script bash puro que usa lessc, pero no requiere un script de nodo para ejecutarse:

https://github.com/mikestreety/less-watch

+0

Hm .. necesito ver lo que escribiste allí;) De hecho, hice algo similar para un solo archivo con las opciones https://gist.github.com/pixelass/7964010 – pixelass

+0

Lo siento, es que necesitas tener un mira o necesito echarle un vistazo a lo que escribí? ¡Tu guión parece bastante fantástico! Es una pena que nos hayamos mudado a Sass;) – mikestreety

+0

Fue, que tengo que mirar lo que escribiste;) Hice mío un repositorio github: https://github.com/pixelass/lessc-bash – pixelass

1

Quizás no sea una respuesta directa. Pero aquí está mi comentario:

Normalmente necesitamos este reloj durante la fase de desarrollo, donde tenemos que cambiar el archivo menos y ver el resultado sin la necesidad de volver a ejecutar el comando lessc por cada cambio en menos archivo.

Hacemos esto por puro less.js en el en nuestro html. de la siguiente manera:

<link rel="stylesheet/less" href="/path/to/bootstrap.less"> 
<script src="/path/to/less.js"></script> 

Después de finalizar la tarea de desarrollo. Necesita ejecutar lessc solo una vez.

Durante el desarrollo, sus páginas pueden tardar un poco más en cargarse, pero si su sitio es una base ajax, y lo agrega a su página de plantilla, no será un gran problema.

Cuestiones relacionadas