如何使用Assetic实现资源管理?--------symfony3.4Documnet笔记

赵嘉悦

2023-12-01

Symfony——如何使用Assetic实现资源管理

1. 安装和启用

从Symfony 2.8开始，Assetic不再包含在Symfony Standard Edition中。在使用其任何功能之前，请在您的项目中安装执行此控制台命令的 AsseticBundle：

$ composer require symfony/assetic-bundle

然后，在Symfony应用程序的 AppKernel.php 文件中启用该bundle：

// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    // ...

    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
        );

        // ...
    }
}

最后，添加以下配置以在应用程序中启用Assetic支持：

# app/config/config.yml
assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~

# ...

2. Assetic简介

Assetic结合了两个主要思想：assets 和 filters 。assets 是CSS，JavaScript和图像文件等文件。filters 可以在将它们提供给浏览器之前应用于这些文件。如此实现了存储在应用程序中的资源文件与实际呈现给用户的文件之间的分离。

没有Assetic，您只能直接提供存储在应用程序中的文件：

<script src="{{ asset('js/script.js') }}"></script>

但是，通过Assetic，您可以在服务之前操纵这些资源（或从任何地方加载它们）。这意味着你可以：

压缩并整合所有的CSS和JS文件
通过某种编译器（如LESS，SASS或CoffeeScript）运行所有（或部分）CSS或JS文件
进行图像优化

3. 使用

比起直接提供文件，使用Assetic有许多好处，这些文件不需要必须存储在被使用的地方，而是可以从各种来源（例如从一个包中）中获取。

您可以使用Assetic使用CSS，JavaScript和图像。添加之后的逻辑处理基本上是一样的，但语法略有不同。

3.1 包含JS文件

{% javascripts '@AppBundle/Resources/public/js/*' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

如果您的应用程序模板使用Symfony标准版的默认块名称，那么javascripts标签最常见于javascripts块中：

{# ... #}
{% block javascripts %}
    {% javascripts '@AppBundle/Resources/public/js/*' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}
{# ... #}

在此示例中，AppBundle的 Resources/public/js/ 目录中的所有文件将从不同的位置加载和提供。实际渲染的标签可能简单如下：

<script src="/app_dev.php/js/abcd123.js"></script>

注意：一旦使用Assetic处理资源，文件将从不同的位置提供。这将导致通过CSS文件的相对路径引用图像的的问题。请参阅使用cssrewrite过滤器修复CSS路径。

3.2 包含css文件

要引入CSS样式表，您可以使用与上述相同的技术，但使用stylesheets标签除外：

{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

但是，由于Assetic更改了资源的路径，所以这将破坏使用相对路径（或其他路径）的背景图像，除非您使用cssrewrite filters。

注意，在包含JavaScript文件的示例中，您使用路径（如 @ AppBundle / Resources / public / file.js ）引用了这些文件，但是在本示例中，您使用其绝对的、可公开访问的路径引用了CSS文件： bundles/app/css 。除了已知的使用CSS样式表的 @AppBundle 语法导致导致cssrewrite filters失败的问题之外，您可以随意使用这两种语法。

3.3 包含image

要包含image，可以使用 image 标签：

{% image '@AppBundle/Resources/public/images/example.jpg' %}
    <img src="{{ asset_url }}" alt="Example" />
{% endimage %}

您也可以使用Assetic进行图像优化。更多信息请参考如何使用Assetic与Twig函数进行图像优化。

除了使用Assetic来包含图像，您可以考虑使用 LiipImagineBundle 公用bundle，它可以在服务之前压缩和处理图像（旋转，调整大小，水印等）。

3.4 使用cssrewrite调节器修复CSS路径 ¶

由于Assetic为你的资源生成了新的URLs，CSS文件中的任何相对路径都将失效。要修复此点，确保在 stylesheets 中使用了 cssrewrite 调节器。这会解析你的CSS文件并在内部修正路径，以反射到全新位置。

在前面小节中的你可以看到一个示例。当使用 cssrewrite filter时，不要通过 @AppBundle 语法引用你的CSS文件。参考上面小节的 “note” 区域内容。

合并资源 ¶

Assetic的一个功能，是把多个文件合并成一个。这可以减少HTTP请求次数，提高了前端性能。它还能让你更轻松地维护那些”被分割成可管理的若干部分”的文件。这可以提高可复用性，因为你可以轻松地把“特定项目”的文件分割之后“用在其他程序中”，但还是会以一个单一文件提供出来：

#Twig
{% javascripts
    '@AppBundle/Resources/public/js/*'
    '@AcmeBarBundle/Resources/public/js/form.js'
    '@AcmeBarBundle/Resources/public/js/calendar.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}