rutas - ¿Cómo compilo un directorio lleno de menos archivos CSS para CSS?
porque no se ve mi imagen en html (14)
Tengo un directorio lleno de menos archivos CSS. ¿Cuál es la mejor forma de compilarlos para un CSS normal? (para el despliegue)
Me gustaría ejecutar un comando de la siguiente manera:
lessc -r less/ css/
donde lessc es menos compilador (instalado a través del administrador de paquetes de nodos)
¡Acabo de encontrar un módulo impresionante de npm para hacer eso! :)
Instalarlo:
$ npm install [-g] lessc-each
Ejecutarlo:
$ lessc-each ‹dir1› ‹dir2›
Donde <dir1> es el directorio de Menos archivos para compilar, y <dir2> es el directorio para los archivos de salida. Si <dir2> no existe, se creará automáticamente. Ambos directorios deben ser relativos a la ruta actual de la línea de comando.
Acabo de hacer el guión sobre el trabajo de @iloveitaly:
#!/bin/bash
# file name: lesscdir
if [[ -z $1 || -z $2 ]];then
echo ''both arguments are needed''
exit
fi
find $1 -name ''*.less'' -printf ''%P/n'' | while read name; do
FROM=$(echo $1''/''$name)
TO=$(echo $2''/''$name | sed "s|/.less|/.css|")
TO_DIRNAME=$(dirname $TO)
if [ ! -e $TO_DIRNAME ];then
mkdir -p $TO_DIRNAME
fi
echo ''Compiling'' $FROM ''->'' $TO
lessc $FROM $TO
done
y entonces:
$ chmod +x lesscdir
$ sudo ln -s $(readlink -f lesscdir) /usr/local/bin/
Aunque me gusta Python el mejor y resuelvo la mayoría de los problemas con él, todavía estoy muy contento de utilizar Bash en el entorno de Linux.
Aquí está la solución ideal.
Paso 1: cree un nuevo archivo .less que contenga una declaración @import para cada uno de sus archivos .less existentes.
find less_directory/ -name ''*.less'' -exec echo "@import /"{}/";" /; > combined.less
Paso 2: compila el archivo .less combinado.
lessc combined.less > compiled.css
Basado en la respuesta de Shakaran, pero en lugar de archivos .less.css, crea archivos .css (no use menos en el nombre del archivo, bueno solo en la extensión):
for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done
Este script bash funciona para mí:
find "$PWD" -name ''*.less'' | while read line; do
REPLACE=`echo $line | sed "s|/.less|/.css|"`
# echo "$line --> $REPLACE"
(lessc "$line" "$REPLACE" &)
done
He escrito un guión hackish que resuelve el problema:
#!/usr/bin/env python
#This is responsible for "compiling" less.css files to regular css files for production. It also minifies the css at the same time.
#Usage: give it a start directory as the first parameter and an end directory as the second parameter. It will recursivly run the appropriate command for all css files in the first subdirectory.
import os
import sys
import re
if len(sys.argv) < 3:
sys.exit(''ERROR: Too many paths!! No less css compiled'')
if len(sys.argv) > 3:
sys.exit(''ERROR: Not enough paths!! No less css compiled'')
start_dir=os.path.join(os.getcwd(),sys.argv[1])
end_dir=os.path.join(os.getcwd(),sys.argv[2])
pattern=r''/.css$''
pattern=re.compile(pattern)
files_compiled=0
def copy_files(start, end, add=''''):
global files_compiled
try:
os.mkdir(end)
except:
pass
for folder in get_immediate_subdirectories(start):
copy_files(os.path.join(start,folder), os.path.join(end+folder), add+folder+''/'')
for less in os.listdir(start):
if pattern.search(less):
os.system(''lessc -x %s > %s''%(start+less,end+less))
print add+less
files_compiled=files_compiled+1
def get_immediate_subdirectories(dir):
return [name for name in os.listdir(dir)
if os.path.isdir(os.path.join(dir, name))]
Idealmente hay una mejor solución.
Hice este script bash muy simple para compilar todos los archivos LESS en un directorio de CSS
#/bin/bash
echo "Compiling all LESS files to CSS"
for file in *.less
do
FROM=$file
TO=${file/.*/.css}
echo "$FROM --> $TO"
lessc $FROM $TO
done
La forma de hacer esto es lo que hace el bootstrap: tener un archivo que importe todos los demás y compilar eso.
@import "variables.less";
@import "mixins.less";
La forma en que compilé menos archivos en los archivos css correspondientes en el árbol de carpetas actual:
find ./ -name ''*.less'' -type f -exec lessc {} {}.css /; -exec rename -f ''s/.less.css/.css/'' {}.css /;
Por ejemplo, si tiene main.less en algún lugar del árbol de carpetas, obtendrá main.css en la misma carpeta.
Pero requiere que se instale el comando de rename . Para instalarlo con la ayuda de Homebrew:
brew install rename
Mientras navegaba por todas las demás respuestas, ninguna de ellas funcionó para mí. Encontré una buena solución para manejar mi situación en una combinación de respuestas.
Primero, compila todos los archivos menos en 1 archivo menos. Esto porque podría arrojar errores (como el de arranque uno).
cat less_directory/* > less_directory/combined.less
Ahora que tiene 1 archivo menos en la carpeta menos, puede compilar ese archivo CSS sin que cause problemas:
lessc less_directory/combined.less > css/style.css
Después de esto, no te olvides de tirar el combinado. Menos, de lo contrario esto arruinará la próxima compilación.
rm -f less_directory/combined.less
Puede automatizar este proceso convirtiéndolo en un script por lotes
Puede usar el siguiente bash one-liner para compilar y todos los archivos menos en un directorio y sus subdirectorios en un solo archivo css "combined.css":
$ find less_directory/ -name ''*.less'' -exec lessc {} /; > combined.css
O minificado para la producción:
$ find less_directory/ -name ''*.less'' -exec lessc -x {} /; > combined.css
Recientemente he tenido problemas con la ejecución de algo así como
lessc directory/*.less foo.css
En lugar de tomar los diferentes LESS y enviarlos a foo.css, modificaría el segundo archivo de la lista. Esto no está bien conmigo.
Para resolver este problema, hice un nuevo menos frontend llamado lessm .
Puede verificarlo en https://github.com/jive/lessm .
La forma en que lo usarías es
lessm foo.less foo2.less ../bar/bazz.less -o output.css
Si alguien está buscando compilar todo el archivo LESS en un árbol de carpetas en Windows. A continuación, mi solución usando un archivo por lotes en WIndows:
Archivo compile-less.bat:
@echo
cd "./pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd ..
Todo el archivo menos en las páginas de la carpeta y sus subcarpetas se compilarán.
Si desea compilar varios archivos menos en varios archivos css, pruebe este script de bash de una sola línea:
for file in *.less; do lessc -x --yui-compress -O2 --strict-imports $file `basename $file`.css ; done
Obtendrá una lista de archivos .less.css después de ejecutar el comando.
PD: Optimiza adicionalmente ( -O2 ) al máximo, comprime ( -x ) y minimiza con YUI Compressor (- yui-compress ) con una estricta evaluación de importación ( --strict-imports ).
EDITADO : Para las nuevas versiones de YUI Compressor omita -02 y - yui-compress en desuso, por lo tanto:
for file in *.less; do lessc -x --strict-imports $file `basename $file`.css ; done