web-dev-qa-db-fra.com

Comment compiler un répertoire contenant moins de fichiers css en css?

J'ai un répertoire plein de fichiers moins css. Quel est le meilleur moyen de les compiler en css normal? (pour le déploiement)

Je voudrais exécuter une commande comme suit:

lessc -r less/ css/

où lessc est le moins compilateur (installé via le gestionnaire de paquets du noeud)

cssless
45
ocoutts

Pour ce faire, amorcez-vous avec un fichier qui importe tous les autres et le compile.

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

Vous pouvez utiliser le bash one-liner suivant pour compiler et ranger tous les fichiers d’un répertoire et de ses sous-répertoires dans un seul fichier css "combiné.css":

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

Ou minified pour la production:

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

Si vous voulez compiler plusieurs fichiers en moins en plusieurs fichiers CSS, essayez ce script bash à une ligne:

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

Vous obtiendrez une liste des fichiers .less.css après avoir exécuté la commande.

PS: Il optimise également (-O2) au maximum, comprime (-x) et diminue avec YUI Compressor (--yui-compress _ ) avec une évaluation d'importation stricte (--strict-imports).

ÉDITÉ: pour les nouvelles versions de YUI Compressor, ignorez -02 et --yui-compress, qui est obsolète.

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

Ce script bash fonctionne pour moi:

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

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

J'ai fait ce script bash très simple pour compiler tous les fichiers LESS dans un répertoire en 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
4
Sam Stern

Je viens de faire le script sur le travail 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

et alors:

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

Bien que j'aime le meilleur python et que je résous la plupart des problèmes, il est toujours très heureux d'utiliser bash dans un environnement linux.

3
Reorx

J'ai écrit un script hackish qui résout le problème: 

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

Idéalement, il existe une meilleure solution.

3
ocoutts

Récemment, j'ai eu des problèmes avec quelque chose comme:

lessc directory/*.less foo.css

Au lieu de prendre les différents LESS et de les afficher dans foo.css, cela modifierait le deuxième fichier de la liste. Ce n'est pas OK avec moi.

Pour résoudre ce problème, j'ai créé une nouvelle interface moins appelée lessm.

Vous pouvez le vérifier à l’adresse https://github.com/jive/lessm .

La façon dont vous l'utiliseriez est

lessm foo.less foo2.less ../bar/bazz.less -o output.css
1
Jessie A. Morris

Je viens de trouver un module génial npm pour le faire! :)

Installez-le:

$ npm install [-g] lessc-each

Exécuter:

$ lessc-each  ‹dir1›  ‹dir2›

Où ‹dir1› est le répertoire des fichiers moins à compiler et ‹dir2› est le répertoire des fichiers de sortie. Si ‹dir2› n'existe pas, il sera automatiquement créé. Les deux répertoires doivent être relatifs au chemin actuel de la ligne de commande.

1
Gustavo Cavalieri Fernandes

La réponse de shakaran est basée, mais au lieu de fichiers .less.css, il crée des fichiers .css (n'en utilisez pas moins dans le nom du fichier, mais uniquement dans l'extension correspondante):

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

En parcourant toutes les autres réponses, aucune d’entre elles n’a fonctionné pour moi. J'ai trouvé une bonne solution pour gérer ma situation en combinant plusieurs réponses.

Tout d’abord, vous compilez tous les fichiers de moins en un fichier de moins. Ceci parce qu’il pourrait jeter des erreurs (comme le bootstrap).

cat less_directory/* > less_directory/combined.less

Maintenant que vous avez 1 fichier de moins dans le dossier less, vous pouvez le compiler sans que cela cause de problèmes: 

lessc less_directory/combined.less > css/style.css

Après cela, n’oubliez pas de jeter le combiné. Sinon, sinon cela gâchera la prochaine compilation.

rm -f less_directory/combined.less

Vous pouvez automatiser ce processus en en faisant un script batch

0
Rene Pot

Si quelqu'un cherche à compiler tout le fichier LESS dans une arborescence de dossiers sous Windows. Dans la suite de ma solution en utilisant un fichier de commandes dans Windows:

Fichier compile-less.bat:

@echo
cd ".\pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd ..

Tous les fichiers de moins dans les pages du dossier et ses sous-dossiers seront compilés.

0
DAme

La façon dont j'ai compilé moins de fichiers dans les fichiers CSS correspondants dans l'arborescence de dossiers actuelle:

find ./ -name '*.less' -type f -exec lessc {} {}.css \; -exec rename -f 's/.less.css/.css/' {}.css \;

Par exemple, si vous avez main.less quelque part dans l’arborescence de dossiers, vous obtiendrez main.css dans le même dossier.

Mais il faut que la commande rename soit installée. Pour l'installer avec l'aide de Homebrew:

brew install rename
0
starikovs