wake-up-neo.com

Wie kompiliere ich ein Verzeichnis mit weniger CSS-Dateien in CSS?

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)

45
ocoutts

Dies geschieht mithilfe von bootstrap - eine Datei, die alle anderen importiert und kompiliert.

@import "variables.less"; 
@import "mixins.less";
73
Damian

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
23
Dan Noble

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
11
shakaran

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
6
iloveitaly

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
4
Sam Stern

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.

3
Reorx

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.

3
ocoutts

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
1

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

0
Rene Pot

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.

0
DAme

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
0
starikovs