如何使用Assetic进行资产管理

编辑本页

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

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

资产而且过滤器．资产为CSS、JavaScript和图像文件等文件。过滤器是可以在这些文件被提供给浏览器之前应用于它们的东西。这允许将存储在应用程序中的资产文件与实际呈现给用户的文件分开。

如果没有astic，你只需要直接提供存储在应用程序中的文件:

  • 嫩枝
  • PHP
1
<脚本src＝＂{{asset('js/script.js')}}＂类型＝“text / javascript”>脚本>

但与astic，你可以在服务它们之前任意操作这些资产(或从任何地方加载它们)。这意味着你可以:

  • 缩小并合并所有的CSS和JS文件
  • 通过某种编译器运行所有(或部分)CSS或JS文件，如LESS, SASS或CoffeeScript
  • 在图像上运行图像优化

CSS样式表，JavaScript文件而且图片．添加两者的原理基本相同，只是语法略有不同。

javascript标签在任何模板:

  • 嫩枝
  • PHP
1 2 3
{%javascript@AcmeFooBundle /资源/公共/ js / *’%}<脚本类型＝“text / javascript”src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

请注意

如果使用Symfony标准版中的默认块名，则ob娱乐下载javascript标签通常存在于javascript布洛克:

1 2 3 4 5 6 7
{#……#}{%块javascripts %}{%javascript@AcmeFooBundle /资源/公共/ js / *’%}<脚本类型＝“text / javascript”src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}{%endblock%}{#……#}

提示

你也可以包括CSS样式表:参见如何使用Assetic进行资产管理．

的所有文件资源/公共/ js /目录AcmeFooBundle将从不同的地点装载和供应。实际渲染的标签可能看起来就像这样:

1
<脚本src＝“app_dev.php / js / abcd123.js”>脚本>

这是一个关键点:一旦您让Assetic处理您的资产，文件将从不同的位置提供服务。这将导致通过相对路径引用图像的CSS文件出现问题。看到如何使用Assetic进行资产管理．

样式表标签:

  • 嫩枝
  • PHP
1 2 3
{%样式表'bundles/acme_foo/css/*' filter='cssrewrite' %}<链接rel＝“样式表”href＝＂{{asset_url}}＂/>{%endstylesheets%}

请注意

如果使用Symfony标准版中的默认块名，则ob娱乐下载样式表标签通常存在于样式表布洛克:

1 2 3 4 5 6 7
{#……#}{%块样式表%}{%样式表'bundles/acme_foo/css/*' filter='cssrewrite' %}<链接rel＝“样式表”href＝＂{{asset_url}}＂/>{%endstylesheets%}{%endblock%}{#……#}

但因为阿塞克改变了你的资产的路径，这个将方法中断使用相对路径的任何背景图像(或其他路径)，除非您使用cssrewrite过滤器。

请注意

注意，在包含JavaScript文件的原始示例中，您使用如下路径引用文件公共/ file.js @AcmeFooBundle /资源/但是在这个例子中，你引用的CSS文件使用了它们实际的，公共可访问的路径:包/ acme_foo / css．您可以使用其中任何一种，除非有已知的问题导致cssrewrite属性时，过滤器失败@AcmeFooBundleCSS样式表的语法。

图像标签。

  • 嫩枝
  • PHP
1 2 3
{%图像@AcmeFooBundle /资源/公共/图片/ example.jpg ' %}<imgsrc＝＂{{asset_url}}＂alt＝“例子”/>{%endimage%}

您还可以使用astic进行图像优化。更多资料请浏览如何使用分支函数进行图像优化．

cssrewrite过滤器

由于astic会为你的资产生成新的url, CSS文件中的任何相对路径都会被破坏。要修复此问题，请确保使用cssrewrite使用您的样式表标签。这将解析CSS文件并在内部纠正路径以反映新位置。

您可以在前一节中看到一个示例。

谨慎

当使用cssrewrite过滤器，不要引用CSS文件使用@AcmeFooBundle语法。有关详细信息，请参阅上面部分中的说明。

  • 嫩枝
  • PHP
1 2 3 4 5 6
{%javascript@AcmeBarBundle/Resources/public/js/form.js' '@AcmeBarBundle/Resources/public/js/calendar.js' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

在dev环境中，每个文件仍然是单独提供的，因此可以更容易地调试问题。然而，在刺激环境(或者更具体地说，当调试国旗是假)，这将被渲染为一个单一脚本标签，它包含所有JavaScript文件的内容。

提示

如果您是astic的新手，并尝试在刺激环境(通过使用app.php控制器)，你可能会看到你所有的CSS和JS崩溃。别担心!这是故意的。中使用Assetic的详细信息刺激环境,看到如何使用Assetic进行资产管理．

合并文件不仅适用于你的文件。你也可以使用astic将第三方资产(如jQuery)和你自己的资产合并到一个文件中:

  • 嫩枝
  • PHP
1 2 3 4 5
{%javascript@AcmeFooBundle/Resources/public/js/thirdparty/jquery.js' '@AcmeFooBundle/Resources/public/js/*' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

assetic部分。欲知详情，请浏览概要配置参考．

  • YAML
  • XML
  • PHP
1 2 3 4 5 6 7
# app / config / config.ymlassetic:资产:jquery_and_ui:输入:-@AcmeFooBundle /资源/公共/ js /第三方/ jquery.js '-@AcmeFooBundle /资源/公共/ js /第三方/ jquery.ui.js '

定义了命名资产之后，可以在模板中使用@named_asset符号:

  • 嫩枝
  • PHP
1 2 3 4 5
{%javascript'@ query_and_ui' '@AcmeFooBundle/Resources/public/js/*' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

  • YAML
  • XML
  • PHP
1 2 3 4 5
# app / config / config.ymlassetic:过滤器:uglifyjs2:本:/usr/local/bin/uglifyjs

现在，实际上使用一组JavaScript文件的过滤器，添加到你的模板:

  • 嫩枝
  • PHP
1 2 3
{%javascript'@AcmeFooBundle/Resources/public/js/*' filter='uglifyjs2' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

关于配置和使用astic过滤器的更详细指南以及astic调试模式的详细信息可以在如何缩小CSS/JS文件(使用UglifyJS和UglifyCSS)．

  • 嫩枝
  • PHP
1 2 3
{%javascript'@AcmeFooBundle/Resources/public/js/*' output='js/compiled/main.js' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

请注意

ob娱乐下载Symfony还包含一个用于缓存的方法破坏，其中由astic生成的最终URL包含一个查询参数，该参数可以通过在每次部署上的配置进行递增。有关更多信息，请参见FrameworkBundle配置(“框架”)配置选项。

dev在环境中，astic会生成到CSS和JavaScript文件的路径，这些文件在你的计算机上并不存在。但它们仍然呈现，因为内部Symfony控制器打开文件并返回内容(在运行任何过滤器之后)。ob娱乐下载

这种已处理资产的动态服务非常棒，因为这意味着您可以立即看到所更改的任何资产文件的新状态。这也很糟糕，因为它可能非常慢。如果你使用了很多滤镜，这可能会让人非常沮丧。

幸运的是，astic提供了一种将资产转储到真实文件的方法，而不是动态生成。

刺激环境

在刺激在环境中，你的JS和CSS文件都由一个单独的标签来表示。换句话说，你不会看到源代码中包含的每个JavaScript文件，你可能只会看到如下内容:

1
<脚本src＝“/ js / abcd123.js”>脚本>

而且，该文件确实如此不实际上存在，也不是由Symfony动态呈现的(因为资产文件在ob娱乐下载dev环境)。这是故意的——让Symfony在生产环境中动态生成这些文件ob娱乐下载太慢了。

相反，每次使用应用程序时刺激环境(因此，每次部署时)，您应该运行以下任务:

1
$ PHP app/console assetic:dump——env=prod——no-debug

这将物理地生成和写入您需要的每个文件(例如。/ js / abcd123.js)．如果您更新了任何资产，则需要再次运行该命令以重新生成文件。

dev环境

默认情况下，每个资产路径生成在dev环境由Symfony动态处理。ob娱乐下载这没有什么缺点(您可以立即看到您的更改)，除了资产的加载速度会明显变慢。如果您觉得您的资产加载太慢，请遵循以下指南。

首先，告诉Symfonyob娱乐下载停止尝试动态处理这些文件。在您的config_dev.yml文件:

  • YAML
  • XML
  • PHP
1 2 3
# app / config / config_dev.ymlassetic:use_controller:假

接下来，由于Symfonob娱乐下载y不再为您生成这些资产，您将需要手动转储它们。为此，运行以下命令:

1
$ PHP应用/控制台assetic:dump

这将物理地写入您所需的所有资产文件dev环境。最大的缺点是，每次更新资产时都需要运行此命令。幸运的是，通过了——看选项，该命令将自动重新生成资产随着它们的变化：

1
$ PHP应用/控制台assetic:dump——watch

中运行此命令后dev环境可能会生成一堆文件，这通常是一个好主意，将您生成的资产文件指向一些孤立的目录(例如。/ js /编译)，以保持条理:

  • 嫩枝
  • PHP
1 2 3
{%javascript'@AcmeFooBundle/Resources/public/js/*' output='js/compiled/main.js' %}<脚本src＝＂{{asset_url}}＂>脚本>{%endjavascripts%}

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