README

http://www.tinyfier.com

Tinyfier 是一个用于压缩、预处理和优化HTML、JavaScript、CSS和图片的完整套件。

使用方法

即时优化（assets_loader）

使用 Tinyfier，您可以合并多个CSS或JavaScript文件，为CSS添加额外功能（使用LESS），删除不必要的空格和注释，并以gzip编码和最佳客户端缓存头提供服务。

要压缩和合并JavaScript和样式表文件，您只需替换原始URL即可

http://example.com/static/stylesheet.css

变为这个

http://example.com/static/tinyfier/tinyfier.php/stylesheet.css

您还可以将多个文件合并为一个较大的文件，减少HTTP请求次数，使您的应用程序运行更快！

http://example.com/static/tinyfier/tinyfier.php/main.css,user.css,print.css

此外，如果您想向CSS解析器传递额外的变量，可以通过将其添加到URL中来实现，例如

http://example.com/static/tinyfier/tinyfier.php/stylesheet.css,base_color=%23ff0000 http://example.com/static/tinyfier/tinyfier.php/stylesheet.css,height=450

JavaScript

Tinyfier 使用Google Closure服务来编译和最小化JavaScript，如果不可用，则依靠JSMinPlus进行该操作。

CSS

对于CSS文件，Tinyfier 使用 leafo 的 lessphp解析器 为CSS文件添加额外功能。这包括变量、混合、表达式、嵌套块等。您可以在 lessphp文档 中查看所有可用命令。此外，生成的CSS代码已优化、压缩，并添加了CSS3供应商前缀（如 -webkit 或 -moz），使用 css_optimizer。

此外，Tinyfier还添加了更多功能

精灵图

使用Tinyfier，创建CSS精灵图非常简单直观。您只需使用函数 sprite，其中第一个参数是图像路径（相对于文档），第二个是精灵的名称。例如

.login {
    background: sprite('images/user_go.png', 'user') no-repeat;
}

.logout {
    background: sprite('images/user_delete.png', 'user') no-repeat;
}

渐变生成器

Tinyfier包括生成CSS3兼容渐变的工具，并具有与旧浏览器的向后兼容性（通过生成等效图像）。

header {
    background: gradient('vertical', @header_start_color, @header_middle_color 50%, @header_end_color, 1px, 200px);
}

（记住，使用lessphp，您可以在代码的任何地方使用变量！）

图像嵌入

您还可以使用命令 inline 在文档中嵌入图像（使用 数据URI方案）。

#gplus {
   background: inline('images/social/gplus.png');
}

图像滤镜

Tinyfier 的另一个酷功能是能够处理图像滤镜。

#lion:hover {
   background: filter('images/lion.jpg', 'brightness', 50%);
}

内部，Tinyfier 使用PHP函数 imagefilter，因此您可以使用所有可用的过滤器（反转、灰度、亮度、模糊、像素化等）。

调整图像大小

如果您必须以不同的尺寸显示图像或精灵，这就像使用它一样简单

#lion:hover {
   background: resize('images/lion.jpg', 50%);
}

过滤器 resize 可以接受最多4个参数：图像URL、宽度（以px或%为单位）、高度，以及一个布尔值，用于启用或禁用纵横比（true / false）

更多

请查看测试文件以获取更多关于如何在项目中使用Tinyfier的示例。这真的非常简单！