Как мне скомпилировать каталог, полный меньше файлов CSS для CSS?

Question

У меня есть каталог с меньшим количеством CSS-файлов. Каков наилучший способ скомпилировать их в нормальный CSS? (для развертывания)

Я хотел бы выполнить команду следующим образом:

lessc -r less/ css/

где lessc - компилятор less (устанавливается через менеджер пакетов узла)

Answer 1

Способ сделать это состоит в том, что делает bootstrap - есть файл, который импортирует все остальные и компилирует это.

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

Answer 2

Вы можете использовать следующую однострочную оболочку bash для компиляции всех файлов в каталоге и его подкаталогах в один файл css «комбинированный.css»:

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

или уменьшенный для производства:

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

Answer 3

Если вы хотите скомпилировать несколько файлов меньше в несколько файлов CSS попробуйте этот однострочный скрипт bash:

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

Вы получите список.файлы less.css после запуска команды.

PS: он дополнительно оптимизирует ( -O2 ) на максимуме, сжимает ( -x ) и минимизирует с помощью Компрессор YUI ( - yui-compress ) со строгой оценкой импорта ( - строгий импорт ).

EDITED :Для новых версий YUI Compressor пропустите -02 и --yui-compress устарело, поэтому:

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

Answer 4

Этот скрипт bash у меня работает:

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

    # echo "$line --> $REPLACE"
    (lessc "$line" "$REPLACE" &)
done

Answer 5

Я сделал этот ОЧЕНЬ простой bash-скрипт для компиляции всех файлов LESS в каталоге в 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

Answer 6

Я только что сделал скрипт поверх работы @ 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 и я решаю большинство проблем с ним, этовсе еще очень рад использовать bash в среде linux.

Answer 7

Я написал хакерский скрипт, который решает проблему:

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

В идеале есть лучшее решение.

Answer 8

Только что нашел замечательный модуль npm , чтобы сделать это! :)

Установите его:

$ npm install [-g] lessc-each

Запустите его:

$ lessc-each  ‹dir1›  ‹dir2›

Где ‹dir1› - это каталог файлов Less для компиляции, а ‹dir2› - это каталог для выходных файлов. Если ‹dir2› не существует, он будет создан автоматически. Оба каталога должны быть указаны относительно текущего пути командной строки.

Answer 9

На основе ответа shakaran, но вместо файлов .less.css он создает файлы .css (не используйте меньше в имени файла, а только в расширении, которое есть):

for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done

Answer 10

Недавно у меня возникли проблемы с запуском чего-то вроде

lessc directory/*.less foo.css

Вместо того, чтобы брать разные LESS и выводить их в foo.css, это изменило бы второй файл в списке.Со мной это не в порядке.

Чтобы решить эту проблему, я создал новый менее внешний интерфейс под названием lessm.

. Вы можете проверить это на https://github.com/jive/lessm.

То, как вы используете это

lessm foo.less foo2.less ../bar/bazz.less -o output.css