Compiler moins de CSS pour Bootstrap 3 avec PHP

il y a deux compilateurs LessCSS en PHP dont je suis au courant:

les deux prétendent être compatibles avec Bootstrap (version 3). Cependant, je me bats pour obtenir quelque chose allant compte tenu de la courbe d'apprentissage raide de ces trois facettes. En bref, je veux juste atteindre les objectifs suivants:

Compiler plusieurs .moins de fichiers ensemble en PHP:

  1. bootstrap.moins
  2. mon Dieu.moins

Compilation d'un seul fichier en leafo.net/lessphp a été facile, j'ai trouvé:

require_once 'lessc.inc.php'; 
$less = new lessc;
$less->checkedCompile("my.less", "mainless.css");

cependant, je ne suis pas sûr que la bibliothèque soit conçue pour plusieurs fichiers. (Dans l'affirmative, comment pourrait-on/devrait-on procéder?)

j'ai décidé de passer à une autre bibliothèque qui explicitement démontré comment compiler pour bootstrap: lessphp.gpeasy.com. Toutefois, leur exemple snippet m'a laissé me gratter la tête (tiré de ici):

<?php
require 'less.php/LessCache.php';
$files = array( '/var/www/mysite/bootstrap.less' => '/mysite/' );
Less_Cache::$cache_dir = '/var/www/writable_folder';
$css_file_name = Less_Cache::Get( $to_cache );
$compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name );

Après avoir regardé leurs autres exemples, j'ai réalisé que $files et $to_cache étaient une typographie: ils sont censés être la même variable. Mais après avoir lu la documentation et avoir regardé les sources, j'ai renoncé à essayer de déterminer si les chaînes suivantes transmettaient correctement leur but:

  1. /var/www/mysite/bootstrap.less - Est-ce le moins fichier à compiler?
  2. /mysite/ - qu'est-ce que cela??
  3. /var/www/writable_folder - Est-ce là le css est écrit?

s'il vous Plaît quelqu'un pourrait me donner un morceau de code qui serait compiler bootstrap.less et my.less dans le(S) fichier (s) css utiliser PHP?

10
demandé sur Brian 2014-01-04 01:07:45

3 réponses

AFAIK http://leafo.net/lessphp/ n'est pas compatible avec Boostrap 3 > 3.0.0, voir https://github.com/leafo/lessphp/issues/503

http://lessphp.gpeasy.com/ fonctionne pour moi, je l'ai utilisé avec succès pour JBST (https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/82) je n'ai pas utilisé la fonction cache.

Sans cache, vous pouvez appeler $parser->parseFile() pour chaque fichier que vous incluez, il compilez dans un fichier. array(/var/www/mysite/bootstrap.less' => '/mysite/');. Utilisez un tableau de tableaux pour plusieurs fichiers:array(array(/var/www/mysite/bootstrap.less' => '/mysite/'), array(/var/www/mysite/.less' => '/mysite/'));

<?php
$parser = new Less_Parser();
$parser->parseFile( '/var/www/mysite/bootstrap.less', 'http://example.com/mysite/' );
$parser->parseFile( '/var/www/mysite/mainless.css', 'http://example.com/mysite/' );
$css = $parser->getCss();

Less_Cache::Get semble fonctionner que pour un seul fichier à la fois.

mise à jour comme l'a commenté @user697576 Less_Cache::Get() accepte un seul fichier ou une liste (un tableau de fichiers). Un seul fichier sera un tableau comme array(/var/www/mysite/bootstrap.less' => '/mysite/');

Dans la doc:

utilisez la classe Less_Cache pour sauvegarder et réutiliser les résultats de compilés peu fichier. Cette méthode nous vérifions l'heure de modification de chaque fichier moins ( y compris les fichiers importés) et se régénèrent lorsque des changements sont trouvés.

j'en évidence y compris les fichiers importés cause ce qui semble résoudre votre problème. Fusionner vos fichiers avec MOINS:

les styles.moins:

@import "my.less"; 
@import "mainless.css";

et compiler styles.moins seulement.

/var/www/monsite/bootstrap.moins Est-ce le moins du fichier compilé?

Oui, pourquoi pas? Assurez-vous que les fichiers importés dans bootstrap.moins sont disponibles dans le même répertoire que le fichier d'amorçage.moins, ou utiliser $parser->SetImportDirs() pour définir le bon chemin.

/monsite/ qu'est - ce??

il définit le bon chemin. Si vous avez MOINS de fichiers contiennent, par exemple,url(image.png) les sorties url( /mysite/image.png). Remarque utilisation de Bootstrap ../ pour le chemin de la glyphicons, ce ne sera pas corrigé, ou pire, devenir /monsite/../. Vous faudra définir ce chemin en MOINS: @icon-font-path: "/mysite/fonts/";

/ var/www / writable_folder - est-ce là que le css est écrit?

Nope après $compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name );$compiled contient le CSS (compilé) que vous devez écrire dans un fichier. Ou utiliser: $css_file_name = Less_Cache:: Get ($to_cache ); dans votre HTML:

    <link rel="stylesheet" type="text/css" href="/writable_folder/<?php echo $css_file_name;?>"> 

mise à jour Notez que depuis Bootstrap 3.2.0. le préfixe des propriétés dans Bootstrap est fait par l'autoprefixer dans le processus de construction. Ce qui précède signifie que le code Bootstrap moins le code contient une déclaration de propriété qui n'utilise que la syntaxe W3C alors que le préfixe est requis pour la prise en charge croisée du navigateur. Compiler votre source avec moins.php n'exécute pas le correcteur automatique. Voir aussi: https://github.com/oyejorge/less.php/issues/158

9
répondu Bass Jobsen 2014-09-10 10:40:36

honnêtement, je suis toujours en train d'essayer de comprendre l'avantage d'avoir le serveur compiler les moins de fichiers, plutôt que de les compiler pendant le développement et puis juste charger le CSS sur le serveur lors du déploiement de l'application. Il semble juste comme travail supplémentaire pour le serveur sans avantage. J'utilise un outil appelé Prepros -- L'équivalent Windows de Code Kit. Il est facile à mettre en place. Je fais mes changements en moins et économise. Les fichiers CSS sont recompilés automatiquement et enregistrés dans le dossier de l'application sur ma machine de développement. Quand tout est comme je le veux, je minifie les fichiers et je les transfère à la boîte de production.

1
répondu SeanOlson 2014-01-03 22:41:26

une autre solution utilisant http://leafo.net/lessphp:

1: obtenir le code css pour votre .moins de fichiers:

$baseCSS = file_get_contents("style.less");

$baseCSS .= file_get_contents("default.less");//append the second file to the variable

2: compiler en utilisant:

$finalCSSCode = $less->compile($baseCSS);

cheers

1
répondu Gabriel 2015-06-05 09:05:57