cli3 css自动加前缀

cli3 css自动加前缀

There are many ways to compress CSS files or automatically generate browser-specific CSS3 prefixes, but usually extra tools are used which is very annoying. I’d like to show you how such tasks can be done using only PHP. In this article we’ll see how to:

有很多压缩CSS文件或自动生成特定于浏览器CSS3前缀的方法，但是通常使用额外的工具，这很烦人。 我想向您展示如何仅使用PHP即可完成此类任务。 在本文中，我们将看到如何：

Generate CSS3 properties with browser-specific prefixes so that we don’t have them all by hand

生成具有特定于浏览器前缀CSS3属性，以便我们不会手工拥有所有属性 Concatenate all the CSS files and strip out comments and unnecessary white space to reduce the number of server requests and decrease the page’s load time

连接所有CSS文件，并删除注释和不必要的空格，以减少服务器请求的数量并减少页面的加载时间 Perform the process on-the-fly when the web page is requested

请求网页时即时执行流程

Here’s an example that shows just how easy the end result will be to use.

这是一个显示最终结果使用起来多么容易的示例。

In the CSS, the browser specific prefix is replaced with an underscore like this:

在CSS中，特定于浏览器的前缀将替换为下划线，如下所示：

_border-radius: 10px;

The code will generate a complete list of properties like this:

该代码将生成如下完整的属性列表：

-o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

Then, in the HTML, a link is written like this to import the styles:

然后，在HTML中，这样编写一个链接以导入样式：

<link rel="stylesheet" href="css/css.php?f=css_file1|css_file2|css_file3">

With the single link element, three CSS files will be loaded as one. The css.php script will read in the files that are listed (css_file1.css, css_file2.css, and css_file3.css), combine them, and return them as a single file.

使用单个link元素，将三个CSS文件作为一个加载。 css.php脚本将读取列出的文件( css_file1.css ， css_file2.css和css_file3.css )，将它们组合在一起，并将它们作为一个文件返回。

It looks pretty easy to use, right? So with out further ado, let’s start writing some code!

它看起来很容易使用，对吧？ 因此，事不宜迟，让我们开始编写一些代码！

编写代码 (Writing the Code)

Go ahead and create the file css.php with the following code:

继续，使用以下代码创建文件css.php ：

<?php $files = explode("|", $_GET["f"]); $contents = ""; foreach ($files as $file) { $contents .= file_get_contents($file . ".css"); } preg_match_all('/_[a-zA-Z-]+:s.+;|[a-zA-Z-]+:s_[a-zA-Z].+;/', $contents, $matches, PREG_PATTERN_ORDER); $prefixes = array("-o-", "-moz-", "-webkit-", ""); foreach ($matches[0] as $property) { $result = ""; foreach ($prefixes as $prefix) { $result .= str_replace("_", $prefix, $property); } $contents = str_replace($property, $result, $contents); } $contents = preg_replace('/(/*).*?(*/)/s', '', $contents); $contents = preg_replace(array('/s+([^w'"]+)s+/', '/([^w'"])s+/'), '\1', $contents); header("Content-Type: text/css"); header("Expires: " . gmdate('D, d M Y H:i:s GMT', time() + 3600)); echo $contents;

The code first receives the list of CSS files to be processed as a string from the URL parameter (accessible in PHP as $_GET["f"]). Each file is separated with a pipe-character. The explode() function splits the string on the pipes returning an array of filenames.

该代码首先从URL参数(以PHP形式$_GET["f"]访问)中接收要作为字符串处理CSS文件列表。 每个文件都用管道字符分隔。 explode()函数在管道上分割字符串，并返回文件名数组。

The function file_get_contents() gets the contents of each file which is appended, one by one, to the variable $contents.

函数file_get_contents()获取每个文件的内容，该文件被一个一地附加到变量$contents 。

After the contents of the CSS files has been retrieved, the next step is to find any CSS properties that start with an underscore and replace them with the browser-specific prefixed properties. The function preg_match_all() finds all the parts in the text that match the regular expression and places the matches into $matches[0] as an array.

检索完CSS文件的内容之后，下一步是找到所有以下划线开头CSS属性，并将其替换为浏览器专有的前缀属性。 函数preg_match_all()查找文本中与正则表达式匹配的所有部分，并将匹配项作为数组放入$matches[0]中。

I won’t explain why $matches has the array index 0 because you can read a clear explanation about the function in the PHP Manual. Rather I’d like to focus on explaining the flow of our program.

我不会解释为什么$matches具有数组索引0，因为您可以在PHP手册中阅读有关该函数的清晰说明。 而是我想着重于解释我们程序的流程。

This image explains the pattern of the regular expression:

此图说明了正则表达式的模式：

The array $prefixes contains an array of browser-specific prefixes; you can add more prefixes, or even remove some, depending on your needs. Each property definition in $matches[0] will be transformed into a set of CSS3 properties with browser-specific prefixes. The code iterates each property and creates a result buffer, replaces the underscore in the property with the browser-specific prefix and pushes the result in the the buffer, and then replaces the original property in in the text with the contents of the buffer.

$prefixes数组包含一个特定于浏览器的前缀数组； 您可以根据需要添加更多前缀，甚至删除一些前缀。 $matches[0]每个属性定义将转换为一组具有浏览器特定前缀CSS3属性。 该代码迭代每个属性并创建一个结果缓冲区，用浏览器特定的前缀替换该属性中的下划线，并将结果压入缓冲区，然后用缓冲区的内容替换文本中的原始属性。

After expanding the browser-specific prefixes is done and they have been merged back into $contents, the script strips out any comments in the content to reduce its size. This image explains the relevant regular expression:

在完成特定于浏览器的前缀的扩展并将它们合并回$contents ，脚本将删除内容中的所有注释以减小其大小。 此图解释了相关的正则表达式：

Then another regular expression removes any unnecessary whitespace and new lines to further reduce the size of the content.

然后，另一个正则表达式将删除所有不必要的空格和新行，以进一步减小内容的大小。

Parts that match with regular expression will be replaced by characters inside the bracket, for example:

与正则表达式匹配的部分将被括号内的字符替换，例如：

Finally the CSS stored in $contents is ready to be sent. The first header() call informs the browser that the output should be treated as a CSS file. The second header() call tells the browser that this file expires in one hour, so the browser will cache it for an hour and use the cached copy instead of requesting it again from the server.

最终，存储在$contentsCSS已准备好发送。 第一个header()调用通知浏览器应将输出视为CSS文件。 第二个header()调用告诉浏览器此文件将在一小时后过期，因此浏览器将对其进行缓存一个小时并使用缓存的副本，而不是再次从服务器请求它。

使用脚本 (Using the Script)

I’d like to give you a simple usage example for script that we’ve just made. Put the css.php into your css directory, along with these three CSS files.

我想给您一个简单的用法示例，用于我们刚刚编写的脚本。 将css.php以及这三个CSS文件放入css目录中。

The first file is header.css:

第一个文件是header.css ：

#header { width: 800px; height: 100px; padding: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; background: _linear-gradient(#D30000, #3D0000); }

The second file is center.css:

第二个文件是center.css ：

#center { width: 800px; height: 400px; padding: 20px; margin: 20px 0px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; background: _linear-gradient(#8ED300, #213D00); }

The third file is footer.css:

第三个文件是footer.css ：

#footer { width: 800px; height: 100px; padding: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; background: _linear-gradient(#006ED3, #00203D); }

Look at how the CSS3 properties have been written; the ones that would have a browser-specific prefix are given only once and have an underscore in front of them.

查看如何编写CSS3属性； 具有浏览器特定前缀的索引仅给出一次，并在其前面带有下划线。

Next, create the file index.html that will use the styles.

接下来，创建将使用样式的文件index.html 。

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>example</title> <link rel="stylesheet" href="css/css.php?f=header|center|footer"> </head> <body> <div id="header">header</div> <div id="center">center</div> <div id="footer">footer</div> </body> </html>

Look at the href attribute in the link tag. Every CSS filename is separated by a pipe.

查看链接标记中的href属性。 每个CSS文件名都由管道分隔。

结论 (Conclusion)

In this article I showed you how to automate some common manipulations of CSS using PHP. The script relies heavily on regular expressions, a very powerful language that allows us to manipulate string however we see fit. Overall, the script is very simple but it offers many benefits. Try using it in your next project.

在本文中，我向您展示了如何使用PHP自动执行CSS的一些常见操作。 该脚本在很大程度上依赖于正则表达式，这是一种非常强大的语言，它使我们能够根据需要调整字符串。 总体而言，该脚本非常简单，但具有许多优点。 尝试在下一个项目中使用它。

Image via 1xpert / Shutterstock

图片来自1xpert / Shutterstock

翻译自: https://www.sitepoint.com/automatic-css3-prefixer-and-compressor/

cli3 css自动加前缀

相关资源：jdk-8u281-windows-x64.exe