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 SymfonyBundleAsseticBundleAsseticBundle(),
        );

        // ...
    }
}

    最后，添加以下配置以在应用程序中启用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，它可以在服务之前压缩和处理图像（旋转，调整大小，水印等）。