Aprende a configurar correctamente NetBeans para compilar tus archivos LESS en CSS automáticamente cuando realice cambios.

Cómo configurar NetBeans en Windows para compilar automáticamente archivos LESS en CSS

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 less

Si 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:

Netbeans Project Properties

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:

Netbeans Less Configure Automatically

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:

Less Configure Executable Path in Netbeans in Windows

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:

Netbeans LESS folder structure

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:

Compile less path in netbeans

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 CTRLSo 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 ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores