Bootstrap, Less desde Sublime Text - Fedora 22

Tutoriales, consejos y artículos sobre Desarrollo WEB
Avatar de Usuario
seth
Moderador
Mensajes: 63
Registrado: 16 Oct 2013, 11:07

Bootstrap, Less desde Sublime Text - Fedora 22

Mensajepor seth » 26 Ago 2015, 20:33

Configurar Sublime Text para compilar archivos .less al vuelo haciendo clic en guardar, automáticamente Sublime Text generará el archivo .css.

Los archivos generados pueden ser minificados y se guardan en la misma carpeta que el archivo less o en cualquier otro sitio, predefinido en el archivo de configuración less2css.sublime-settings:
Preferences > Package Settings > Less2Css > Settings - Default

1º Instalar sublime text

2º Instalar Package Control para Sublime Text
Para ello en Sublime Text ir a View > Show console
Acceder a la página de instalación de Package Control, copiar el texto para la versión de sublime y pegar en la consola para proceder a la instalación:
https://packagecontrol.io/installation

3º Ir a Preferences > Package Control y escribir Install Package

4º Instalar los siguientes paquetes en orden:
- LESS
- LESS build
- SublimeOnSaveBuild
- less2css

5º Para que funcione correctamente la minificación de archivos se requiere:
less-plugin-clean-css

por lo tanto se tiene que instalar NPM (Node.js package management):

Código: Seleccionar todo

dnf install npm


Instalar el minificador de archivos css desde npm:

Código: Seleccionar todo

npm install -g less-plugin-clean-css
npm install less -g


Si se utiliza el código fuente de Bootstrap se puede configurar el archivo de configuración de Less2Css que se encuentra en Preferencias de Sublime Text > Package Settings > Less2Css > Settings - User de la siguiente forma para que compile siempre desde el archivo .less principal bootstrap.less:

Código: Seleccionar todo

{
  "autoCompile": true,     
  "lessBaseDir": "./",
  "main_file": "bootstrap.less",
  "minify": true,
  "outputDir": "auto",
  "outputFile": ""
}


Se pueden minificar los archivos con otros programas pero se debe configurar el parámetro minify en false si no instalamos por npm y el proceso se tendría que hacer de forma manual por comandos:

Código: Seleccionar todo

dnf install nodejs-clean-css
cleancss -o one-min.css one.css



Instalados los paquetes necesarios en Sublime Text, si guardamos un archivo .less obtendremos un error:
error: less2css error: `lessc` is not available


Se soluciona instalando por último el paquete nodejs-less:

Código: Seleccionar todo

dnf install nodejs-less

Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.Calificaciones: 0 | 0.00 de media.
0,0/ 60votos
  • Temas similares
    Respuestas
    Vistas
    Último mensaje

Volver a “Tutoriales WEB”