Ich habe ein Verzeichnis mit weniger CSS-Dateien. Was ist der beste Weg, um sie zu normalen CSS zu kompilieren? (für die Bereitstellung)
Ich möchte einen Befehl wie folgt ausführen:
lessc -r less/ css/
wobei lessc der kleinere Compiler ist (installiert über Knotenpaket-Manager)
Dies geschieht mithilfe von bootstrap - eine Datei, die alle anderen importiert und kompiliert.
@import "variables.less";
@import "mixins.less";
Sie können den folgenden Bash-One-Liner verwenden, um alle untergeordneten Dateien in einem Verzeichnis und seinen Unterverzeichnissen in einer einzigen CSS-Datei "Combined.css" zu kompilieren:
$ find less_directory/ -name '*.less' -exec lessc {} \; > combined.css
Oder für die Produktion abgebaut:
$ find less_directory/ -name '*.less' -exec lessc -x {} \; > combined.css
Wenn Sie multiple less-Dateien in multiple css-Dateien kompilieren möchten, versuchen Sie dieses einzeilige Bash-Skript:
for file in *.less; do lessc -x --yui-compress -O2 --strict-imports $file `basename $file`.css ; done
Sie erhalten eine Liste der .less.css-Dateien, nachdem Sie den Befehl ausgeführt haben.
PS: Es optimiert zusätzlich (-O2) maximal, komprimiert (-x) und verkleinert mit YUI Compressor (--yui-compress ) mit strikter Importbewertung (--strict-Importe).
EDITIERT: Bei neuen YUI Compressor-Versionen überspringen Sie -02 und --yui-compress nicht mehr.
for file in *.less; do lessc -x --strict-imports $file `basename $file`.css ; done
Dieses Bash-Skript funktioniert für mich:
find "$PWD" -name '*.less' | while read line; do
REPLACE=`echo $line | sed "s|\.less|\.css|"`
# echo "$line --> $REPLACE"
(lessc "$line" "$REPLACE" &)
done
Ich habe dieses SEHR einfache Bash-Skript erstellt, um alle LESS-Dateien in einem Verzeichnis nach CSS zu kompilieren
#/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
Ich habe das Skript zu @ iloveitaly's Arbeit gemacht:
#!/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
und dann:
$ chmod +x lesscdir
$ Sudo ln -s $(readlink -f lesscdir) /usr/local/bin/
Obwohl ich Python am besten mag und die meisten Probleme damit löse, ist es trotzdem sehr glücklich, bash in Linux-Umgebungen zu verwenden.
Ich habe ein Hackieskript geschrieben, das das Problem löst:
#!/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))]
Im Idealfall gibt es eine bessere Lösung.
In letzter Zeit habe ich Probleme mit dem Laufen gehabt
lessc directory/*.less foo.css
Anstatt die verschiedenen LESS-Dateien zu übernehmen und in foo.css auszugeben, wird die zweite Datei in der Liste geändert. Das ist nicht in Ordnung mit mir.
Um dieses Problem zu lösen, habe ich ein neues Frontend namens lessm
erstellt.
Sie können es unter https://github.com/jive/lessm ausprobieren.
Die Art, wie Sie es verwenden würden, ist
lessm foo.less foo2.less ../bar/bazz.less -o output.css
Ich habe gerade ein tolles npm-Modul gefunden , das zu tun! :)
Es installieren:
$ npm install [-g] lessc-each
Starte es:
$ lessc-each ‹dir1› ‹dir2›
Dabei ist ‹dir1› das Verzeichnis der zu kompilierenden Less-Dateien und ‹dir2› das Verzeichnis für Ausgabedateien. Wenn ‹dir2› nicht vorhanden ist, wird es automatisch erstellt. Beide Verzeichnisse müssen relativ zum aktuellen Pfad der Befehlszeile sein.
Basierend auf der Antwort von shakaran, aber anstelle von .less.css-Dateien werden .css-Dateien erstellt (verwenden Sie nicht weniger im Dateinamen, sondern nur in der Erweiterung):
for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done
Beim Durchsuchen aller anderen Antworten hat keine von ihnen für mich funktioniert. Ich habe eine gute Lösung gefunden, um mit meiner Situation in einer Kombination von Antworten umzugehen.
Zuerst kompilieren Sie alle weniger Dateien in 1 Datei weniger. Dies liegt daran, dass Fehler auftreten können (wie beim Bootstrap).
cat less_directory/* > less_directory/combined.less
Jetzt, da Sie 1 Datei weniger im less-Ordner haben, können Sie die css kompilieren, ohne dass es zu Problemen kommt:
lessc less_directory/combined.less > css/style.css
Vergessen Sie anschließend nicht, die kombinierte. Wegzuwerfen, da sonst die nächste Kompilierung durcheinander gerät.
rm -f less_directory/combined.less
Sie können diesen Prozess automatisieren, indem Sie ihn zu einem Batch-Skript machen
Wenn jemand die LESS-Datei in einer Ordnerstruktur in Windows kompilieren möchte. Im Folgenden meine Lösung mit einer Batchdatei in Windows:
Datei compile-less.bat:
@echo
cd ".\pages"
for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css"
cd ..
Alle weniger Dateien in den Ordnerseiten und ihren Unterordnern werden kompiliert.
So kompilierte ich weniger Dateien zu den entsprechenden CSS-Dateien im aktuellen Ordnerbaum:
find ./ -name '*.less' -type f -exec lessc {} {}.css \; -exec rename -f 's/.less.css/.css/' {}.css \;
Wenn Sie beispielsweise main.less
irgendwo in der Ordnerstruktur haben, wird main.css
im selben Ordner angezeigt.
Allerdings muss der Befehl rename
installiert sein. So installieren Sie es mit Hilfe von Homebrew:
brew install rename