Less es un preprocesador de CSS ampliamente conocido, lo que significa que extiende el lenguaje CSS, agregando características que permiten variables, mixins, funciones y muchas otras técnicas que le permiten hacer CSS más mantenible, temático y extensible. Gracias a la implementación de preprocesadores CSS en NetBeans, podrá compilar MENOS archivos automáticamente sobre la marcha en su proyecto, por lo que no tendrá que ejecutar los comandos usted mismo cada vez que haga un pequeño cambio.
En este artículo le mostraremos cómo configurar NetBeans correctamente para compilar automáticamente MENOS archivos en CSS.
Requisitos
Necesitará Node.js instalado en su computadora y npm debe estar disponible en la ruta para poder instalar menos. En caso de que no tenga menos instalado y disponible en la ruta, puede instalarlo globalmente usando el siguiente comando en su terminal:
npm install -g lessSi ya tiene menos instalados, puede continuar con la configuración en NetBeans.
1. Acceso a la configuración
Como primer paso, proceda a abrir el cuadro de diálogo Propiedades de su proyecto. Este cuadro de diálogo le permite cambiar configuraciones específicas relacionadas con su proyecto y se almacenan en la carpeta nbproject de su proyecto. Para compilar archivos LESS en CSS automáticamente, NetBeans integra los llamados File Watchers que le permiten ejecutar alguna acción cuando realiza cambios en algunos archivos. Necesita configurar las opciones de preprocesadores CSS en su proyecto, así que abra el diálogo de propiedades haciendo clic derecho en su proyecto:
Una vez que haga clic en propiedades, aparecerá el cuadro de diálogo Propiedades del proyecto, aquí seleccione la pestaña Preprocesadores CSS y haga clic en Configurar ejecutables:
Como siguiente paso, haga clic en Configurar ejecutables y continúe con el siguiente paso.
2. Configure MENOS ruta ejecutable
Para ejecutar automáticamente los comandos de compilación, Netbeans necesita la ruta absoluta al compilador less, tal como se instala con Node.js, puede encontrar el archivo cmd de la ruta del compilador less en %APPDATA%/npm/lessc.cmd. Proporcione esta ruta en la entrada LESS Path:
Aplicar o guardar cambios y seguir el último paso.
3. Configure MENOS carpetas para compilar y generar la ruta
Como último paso, debe especificar dónde están los archivos MENOS que se compilarán y dónde deberían estar los archivos CSS generados. En este caso, la estructura de nuestro proyecto es la siguiente:
Así que registraría un único vigilante que convierte los archivos en /lessque /css y no se olvide de comprobar "compilar archivos MENOS en Guardar", ya que se activará cada vez que se realizan cambios en los archivos MENOS:
En la carpeta raíz de nuestros proyectos está la carpeta menos donde almacenaremos todos los archivos MENOS. Se compilarán automáticamente en archivos CSS cuando presione CTRL+ So guarde manualmente el archivo. Ahora puede modificar los archivos fuente de su proyecto y se integrarán automáticamente en CSS y estarán listos para la producción (tenga en cuenta que también deberá minimizar esos archivos para la producción).
Que te diviertas ❤️!
Conviertete en un programador más sociable