结合，编译和最小化Web资产与PHP库

编辑本页

警告:您正在浏览的文档欧宝官网下载appob娱乐下载Symfony 2.3，现已不再维护。

读本页的更新版本用于Syob娱乐下载mfony 6.2(当前稳定版本)。

管理web资产，除非你熟悉基于javascript的前端工具。

即使从技术角度来看，这些基于javascript的解决方案是最合适的，但在某些情况下，使用纯PHP替代库也会很有用:

  • 如果您无法安装或使用npm以及其他JavaScript解决方案;
  • 如果您希望限制应用程序中使用的不同技术的数量;
  • 如果您想简化应用程序部署。

在本文中，您将学习如何组合并最小化CSS和JavaScript文件，以及如何使用astic的php库编译Sass文件。

1 2
$ composer require patchwork/jsqueeze

main.css而且main.js)．这个设置的推荐目录结构是这样的:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
web /资产/├──css│├──main.css│└──code-highlight.css├──js│├──bootstrap.js│├──jquery.js│└──main.js└──scss├──引导│├──_alerts。SCSS│├──…│├──_variables。SCSS│├─_wells。SCSS│├──mixins│├─_alerts。SCSS│├──…│├──_vendor-prefixes。SCSS├──bootstrap。SCSS├──font-awesome│├─_animated。SCSS│├──…│├──_variables。SCSS├──font-awesome.scss

scssphpAssetic过滤器:

  • YAML
  • XML
  • PHP
1 2 3 4 5 6
# app / config / config.ymlassetic:过滤器:scssphp:格式化程序:“Leafo \ ScssPhp \格式化程序\压缩”#……

的值格式化程序option是筛选器用于生成编译后的CSS文件的格式化程序的完全限定类名。无论原始文件是常规CSS文件还是SCSS文件，使用压缩格式器都将最小化生成的文件。

接下来，更新您的Twig模板以添加{%样式表%}由astic定义的标签:

12 3 4 5 6 7 8 9 10 11 12 13
{# app /资源/视图/ base.html。树枝#}<！文档类型超文本标记语言><超文本标记语言><头><！——……-->{%样式表Filter ="scssphp" output="css/app.css" "assets/scss/bootstrap. "scss”“资产/ scss / font-awesome。Scss "assets/css/*.css" %}<链接rel＝“样式表”href＝＂{{asset_url}}＂/>{%endstylesheets%}

这个简单的配置将SCSS文件编译、组合并缩小为一个常规的CSS文件web / css / app.css．这是唯一的CSS文件，将提供给您的访问者。

jsqueezeasic滤波器如下:

  • YAML
  • XML
  • PHP
1 2 3 4 5
# app / config / config.ymlassetic:过滤器:jsqueeze:～#……

接下来，更新Twig模板的代码以添加{% javascript %}由astic定义的标签:

12 3 4 5 6 7 8 9 10 11 12
<！——……-->{%javascript过滤器= "吗?jsqueeze＂output="js/app.js" "assets/js/jquery.js" "assets/js/bootstrap.js" "assets/js/main.js" %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}身体>超文本标记语言>

这个简单的配置组合了所有JavaScript文件，最小化了内容并将输出保存在web / js / app.js文件，也就是提供给访问者的文件。

领先的?角色jsqueeze过滤器名称告诉astic只应用过滤器时不在调试模式。在实践中，这意味着在开发和最小化文件时将看到未最小化的文件刺激环境。

此工作，包括代码示例，是根据创作共用BY-SA 3.0许可证。