51

より少ないcssファイルでいっぱいのディレクトリがあります。それらを通常のcssにコンパイルする最良の方法は何ですか? (展開用)

次のようにコマンドを実行したいと思います。

lessc -r less/ css/

ここで、lessc は less コンパイラ (ノード パッケージ マネージャー経由でインストール) です。

4

14 に答える 14

24

次の bash ワンライナーを使用して、ディレクトリとそのサブディレクトリ内のすべてのファイルを単一の css ファイル「combined.css」にコンパイルできます。

$ find less_directory/ -name '*.less' -exec lessc {} \; > combined.css

または本番用に縮小：

$ find less_directory/ -name '*.less' -exec lessc -x {} \; > combined.css
于 2011-12-29T21:24:04.080 に答える
14

複数の less ファイルを複数の css ファイルにコンパイルする場合は、次のワンライナー bash スクリプトを試してください。

for file in *.less; do lessc -x --yui-compress -O2 --strict-imports $file `basename $file`.css ; done

コマンドを実行すると、.less.css ファイルのリストが表示されます。

PS: さらに最適化 ( -O2 ) し、最大で圧縮 ( -x )し、厳密なインポート評価 ( --strict-imports ) でYUI コンプレッサー( --yui-compress ) で縮小します。

EDITED : 新しい YUI Compressor バージョンでは、スキップ -02 および --yui-compress 非推奨のため、次のようになります。

for file in *.less; do lessc -x --strict-imports $file `basename $file`.css ; done
于 2013-06-22T01:50:04.017 に答える
6

このbashスクリプトは私のために働きます：

find "$PWD" -name '*.less' | while read line; do
    REPLACE=`echo $line | sed "s|\.less|\.css|"`

    # echo "$line --> $REPLACE"
    (lessc "$line" "$REPLACE" &)
done
于 2011-06-30T16:28:55.817 に答える
5

ディレクトリ内のすべてのLESSファイルをCSSにコンパイルするために、この非常に単純なbashスクリプトを作成しました

#/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
于 2012-06-12T05:24:21.597 に答える
4

@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

その後：

$ chmod +x lesscdir
$ sudo ln -s $(readlink -f lesscdir) /usr/local/bin/

私は python が一番好きでほとんどの問題を解決してくれますが、それでも Linux 環境で bash を使うのはとても楽しいです。

于 2012-03-14T03:28:40.353 に答える
3

問題を解決するハックスクリプトを作成しました：

#!/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))]

理想的には、より良い解決策があります。

于 2011-04-17T16:31:40.300 に答える
2

Shakaran の回答に基づいていますが、.less.css ファイルの代わりに .css ファイルを作成します (ファイル名に less を使用しないでください。拡張子のみに使用してください)。

for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done
于 2014-12-15T12:13:21.700 に答える
1

最近、次のようなものを実行する際に問題が発生しました

lessc directory/*.less foo.css

異なる LESS を取得して foo.css に出力する代わりに、リストの 2 番目のファイルを変更します。これは私にはよくありません。

この問題を解決するために、私は という新しいレス フロントエンドを作成しましたlessm。

https://github.com/jive/lessmで確認できます。

あなたがそれを使用する方法は

lessm foo.less foo2.less ../bar/bazz.less -o output.css
于 2013-12-12T22:13:20.180 に答える
-1

これが理想的なソリューションです。

ステップ 1: 既存の .less ファイルごとに @import ステートメントを含む新しい .less ファイルを作成します。

find less_directory/ -name '*.less' -exec echo "@import \"{}\";" \; > combined.less

ステップ 2: 結合された .less ファイルをコンパイルします。

lessc combined.less > compiled.css
于 2016-06-15T20:38:03.720 に答える