使用 PHP 为 Bootstrap 3 编译更少的 CSS答案

【问题标题】：Compiling Less CSS for Bootstrap 3 with PHP使用 PHP 为 Bootstrap 3 编译更少的 CSS
【发布时间】：2014-01-21 15:46:54
【问题描述】：

我知道 PHP 中有两个 LessCSS 编译器：

两者都声称与 Bootstrap（版本 3）兼容。然而，鉴于这三个方面的陡峭学习曲线，我正在努力让一切顺利进行。总之，我只想做到以下几点：

在 PHP 中一起编译多个 .less 文件：

bootstrap.less
my.less

在leafo.net/lessphp 中编译单个文件很容易，我发现：

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

但是我不确定该库是否是为多个文件设计的。（如果是这样，如何/应该怎么做？）

我决定继续使用另一个库，该库明确演示了如何为引导程序编译：lessphp.gpeasy.com。然而他们的示例 sn-p 让我摸不着头脑（取自 here）：

<?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 );

在查看了他们的其他示例后，我意识到 $files 和 $to_cache 是一个错字：它们应该是同一个变量。但是在阅读了文档并查看了源代码之后，我放弃了尝试确定以下字符串是否准确地传达了它们的目的：

/var/www/mysite/bootstrap.less - 这是要编译的less文件吗？
/mysite/ - 这是干什么用的？
/var/www/writable_folder - 这是写 css 的地方吗？

请有人给我一个可以使用 PHP 将 bootstrap.less 和 my.less 编译成 css 文件的 sn-p 吗？

【问题讨论】：

我已经更新了lessphp.gpeasy.com/Bootstrap 上的示例，希望能让事情变得更清晰。感谢您找到那个错字！另外，你能把它标记为“less.php”吗？
ffs，他们有有这样的名字冲突吗？真气。
对不起，名称冲突。我从 github 上的其他用户那里继承了“less.php”名称/项目。
有人愿意发布一个发帖人要求的 sn-p 的真实示例吗？谢谢！

标签： php less twitter-bootstrap-3 lessphp less.php

【解决方案1】：

老实说，我仍然试图了解让服务器编译 LESS 文件的优势，而不是在开发期间编译它们，然后在部署应用程序时将 CSS 加载到服务器上。对于服务器来说，这似乎是额外的工作，没有任何优势。我使用了一个名为 Prepros 的工具——它相当于 Windows 的 Code Kit。很容易设置。我在 LESS 中进行更改并保存。 CSS 文件会自动重新编译并保存到我的开发机器上的应用程序文件夹中。当一切都如我所愿时，我会缩小文件并将它们移植到生产盒中。

【讨论】：

除非您需要动态 CSS，否则没有优势！在我看来，你的工作流程没有任何问题，但我认为你没有回答这个问题。
你是对的，这不是答案。动态 CSS，这就是将它放在服务器上的原因——允许用户为应用程序皮肤或类似的东西。谢谢你的问题，它让我思考。
对我来说这只是一个偏好问题，我在本地 WAMP 服务器上使用 PHP 脚本进行各种编译等，包括管理颠覆存储库。我认为它比拥有一组独立的工作流工具更便携，同时也利用了我对 PHP 的熟悉。也许 PHP less 编译器的创建者还有其他原因。
实际上这里的缓存将是服务器端的，所以缓存检查仍然会为您的用户带来开销。它不同于客户端编译。
对我来说，在开发过程中服务器编译代码而不是浏览器会是一个优势。当然开发后没有理论上的优势，这种情况下原始文件更好。

【解决方案2】：

AFAIK http://leafo.net/lessphp/ 与 Boostrap 3 > 3.0.0 不兼容，请参阅 https://github.com/leafo/lessphp/issues/503

http://lessphp.gpeasy.com/ 为我工作我已成功将它用于 JBST (https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/82) 我没有使用缓存功能。

如果没有缓存，您可以为包含的每个文件调用$parser->parseFile()，它将编译为一个文件。 array(/var/www/mysite/bootstrap.less' => '/mysite/');。对多个文件使用数组数组：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 似乎一次只能处理一个文件。~~

更新正如@user697576 所评论Less_Cache::Get() 接受单个文件或列表（文件数组）。单个文件将是数组，如array(/var/www/mysite/bootstrap.less' => '/mysite/');

来自文档：

使用 Less_Cache 类来保存和重用编译的结果更少的文件。这个方法我们检查每个less文件的修改时间（包括导入的文件）并在发现更改时重新生成。

我突出显示包括导入的文件，因为这似乎可以解决您的问题。使用 LESS 合并您的文件：

styles.less:

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

并且只编译styles.less。

/var/www/mysite/bootstrap.less - 这是要编译的less文件吗？

是的，为什么不呢？确保在 bootstrap.less 中导入的文件与 bootstrap.less 在同一目录中可用，或者使用$parser->SetImportDirs() 设置正确的路径。

/mysite/ - 这是干什么用的？？

它设置了正确的路径。如果您的 LESS 文件包含例如 url(image.png)，它会输出 url( /mysite/image.png)。注意 Bootstrap 使用 ../ 作为 glyphicons 的路径，这不会被纠正，甚至更糟的是变成 /mysite/../。您必须在 LESS 中设置此路径：@icon-font-path: "/mysite/fonts/";

/var/www/writable_folder - 这是写 css 的地方吗？

在$compiled = file_get_contents( '/var/www/writable_folder/'.$css_file_name ); $compiled 包含（已编译的）CSS 之后，您必须将其写入文件。或者使用： $css_file_name = Less_Cache::Get( $to_cache );在您的 HTML 中：

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

更新请注意，自 Bootstrap 3.2.0 以来。 Bootstrap 中属性的前缀是由构建过程中的 autoprefixer 完成的。前面的意思是 Bootstrap Less 代码包含属性声明，它只使用 W3C 语法，而跨浏览器支持需要前缀。用 less.php 编译你的源代码不会运行 autoprefixer。另见：https://github.com/oyejorge/less.php/issues/158

【讨论】：

"Less_Cache::Get 似乎一次只对一个文件有效。"它实际上适用于多个文件
回复：Yes, why not? ... 因为我发现的 Less_Cache 源代码中有两行：foreach($less_files as $file_path => $uri_or_less ){ 和 $parser->ParseFile( $file_path, $uri_or_less );（第 112 和 120 行）。似乎 key 和 value 都是较少的来源，而不是较少的来源和 css 目的地 - 让我很困惑
您的输入应该是一个数组（单个文件）或数组的数组。与parseFile() 相同。

【解决方案3】：

使用http://leafo.net/lessphp的另一种解决方案：

1：获取 .less 文件的 css 代码：

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

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

2：编译使用：

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

干杯

【讨论】：

我正在开发 Wordpress 的定制器。我正在使用这样但它不起作用：$theme_options = array( 'color_primary' => get_theme_mod( 'color_primary' ), 'color_secondary' => get_theme_mod( 'color_secondary' ), 'color_success' => get_theme_mod( 'color_success' ), 'color_alert' => get_theme_mod( 'color_alert' ) ) $theme_options_data = ' '; foreach ( $theme_options AS $key => $val ) { $theme_options_data .= "@{$key}: {$val};\n"; } $theme_options_data .= file_get_contents( $fileout ); $css = $compiler->compile( $theme_options_data );

【解决方案4】：

基于 PHP 的 LESS 编译器的唯一维护和当前最新的 repo 似乎是来自 Wikimedia 的。

github.com/wikimedia/less.php

不明白为什么它的星星这么少。通过将源代码添加到项目的供应商目录并要求供应商/lessphp/lessc.inc.php，我已经从leafo 的lessphp 切换到它。其他一切似乎都与leafo 的库一样工作。

【讨论】：