如何使用Assetic资产管理

编辑该页面

警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 3.0,不再维护。

读这个页面的更新版本Symfob娱乐下载ony 6.3(当前的稳定版本)。

1
美元需要symfony / assetob娱乐下载ic-bundle作曲家

然后,使包的AppKernel.phpSymfony应用程序的文ob娱乐下载件:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
/ / app / AppKernel.php/ /……类AppKernel扩展内核{/ /……公共函数registerBundles(){美元包=数组(/ /……新ob娱乐下载Symfony \包\ AsseticBundle \ AsseticBundle ());/ /……}}

最后,添加以下最小配置在应用程序中启用Assetic支持:

1 2 3 4 5 6 7 8
# app / config / config.ymlassetic:调试:“% kernel.debug %”use_controller:“% kernel.debug %”过滤器:cssrewrite:~#……

资产和过滤器。资产文件如CSS、JavaScript和图像文件。过滤器是可以应用到这些文件之前提供给浏览器。这允许分离资产文件存储在应用程序和文件实际上呈现给用户。

没有Assetic,你只是提供文件存储在应用程序直接:

1
<脚本src=”{{资产(js / script.js)}}”>< /脚本>

但与Assetic,你可以操纵这些资产无论你希望从任何地方(或负载)之前为他们服务。这意味着您可以:

  • 贬低和结合你所有的CSS和javascript文件
  • 运行所有(或一些)的CSS或者JS文件通过某种形式的编译器,如少,SASS或CoffeeScript
  • 上运行图像优化你的图片

CSS样式表,JavaScript文件和图片。增加背后的哲学基本上是相同的,但在一个稍微不同的语法。

javascript标记在任何模板:

1 2 3
{%javascript@AppBundle /资源/公共/ js / *’%}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

请注意

如果您的应用程序使用默认模板块的名字Symfony标准版的ob娱乐下载javascript标签通常生活在javascript布洛克:

1 2 3 4 5 6 7
{#……#}{%块javascripts %}{%javascript@AppBundle /资源/公共/ js / *’%}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}{%endblock%}{#……#}

提示

您还可以包括CSS样式表:明白了如何使用Assetic资产管理。

在这个例子中,所有文件资源/公共/ js /目录AppBundle将加载并从一个不同的位置。实际呈现标记可能只是看起来像:

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

这是一个关键点:一旦你让Assetic处理资产,将文件从一个不同的位置。这将造成问题的CSS文件参考图片的相对路径。看到如何使用Assetic资产管理。

样式表标签:

1 2 3
{%样式表“包/ app / css / *”过滤器= ' cssrewrite ' %}<链接rel=“样式表”href=”{{asset_url}}”/ >{%endstylesheets%}

请注意

如果您的应用程序使用默认模板块的名字Symfony标准版的ob娱乐下载样式表标签通常生活在样式表布洛克:

1 2 3 4 5 6 7
{#……#}{%块样式表%}{%样式表“包/ app / css / *”过滤器= ' cssrewrite ' %}<链接rel=“样式表”href=”{{asset_url}}”/ >{%endstylesheets%}{%endblock%}{#……#}

但是因为Assetic变化路径你的资产,这一点将违反任何背景图像(或其他路径),使用相对路径,除非你使用cssrewrite过滤器。

请注意

注意,在最初的例子,包括JavaScript文件中,你提到的文件使用的路径公共/ file.js @AppBundle /资源/,但在本例中,您使用实际指的是CSS文件,公共路径:包/ app / css。您可以使用,除了有一个已知的问题导致cssrewrite过滤器在使用失败@AppBundleCSS样式表的语法。

图像标签。

1 2 3
{%图像@AppBundle /资源/公共/图片/ example.jpg ' %}<imgsrc=”{{asset_url}}”alt=“例子”/ >{%endimage%}

您还可以使用Assetic图像优化。更多的信息在如何使用Assetic图像优化与树枝功能吗。

提示

而不是使用Assetic包括图片,你可能会考虑使用LiipImagineBundle欧宝体育平台怎么样社区包,它允许压缩和操纵图像(旋转、调整、水印等)之前,为他们服务。

cssrewrite过滤器

因为Assetic生成新的url为你的资产,任何相对路径里面将打破你的CSS文件。为了解决这个问题,确保使用cssrewrite过滤器与你样式表标签。这个解析你的CSS文件和纠正内部路径,以反映新的位置。

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

谨慎

当使用cssrewrite过滤器,不要引用您的CSS文件使用@AppBundle语法。请注意在上面的部分细节。

1 2 3 4 5 6
{%javascript@AppBundle /资源/公众/ js / * ' ' @AcmeBarBundle /资源/公共/ js /形式。js ' @AcmeBarBundle /资源/公共/ js /日历。js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

在dev环境中,每个文件仍然是单独服务,这样你就可以更容易调试问题。然而,在刺激环境(或者更确切地说,当调试国旗是假),这将是作为一个单独的呈现脚本标签,它包含所有的JavaScript文件的内容。

提示

如果你刚开始Assetic并尝试使用您的应用程序刺激环境(通过使用app.php控制器),你可能会发现你所有的CSS和javascript。别担心!这是故意的。使用Assetic细节刺激环境,看到如何使用Assetic资产管理。

并结合文件并不只适用于你的文件。您还可以使用Assetic结合第三方的资产,如jQuery,用你自己的成一个单一的文件:

1 2 3 4 5
{%javascript@AppBundle /资源/公共/ js /第三方/ jquery.js '@AppBundle /资源/公共/ js / *’%}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

assetic部分。阅读更多的assetic配置参考。

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

您已经定义了名为资产之后,您可以在您的模板中引用它们@named_asset符号:

1 2 3 4 5
{%javascript‘@jquery_and_ui‘@AppBundle /资源/公共/ js / *’%}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

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

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

1 2 3
{%javascript@AppBundle /资源/公共/ js / *’过滤器= ' uglifyjs2 ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

更详细的指导关于配置和使用Assetic Assetic过滤器以及细节的调试模式中可以找到如何贬低CSS / JS文件(使用UglifyJS和UglifyCSS)。

1 2 3
{%javascript@AppBundle /资源/公众/ js / * ' = ' js /编译/主要输出。js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

请注意

ob娱乐下载Symfony还包含一个缓存的方法破坏,最后生成的URL Assetic包含一个查询参数,可以通过配置在每个增加部署。有关更多信息,请参见FrameworkBundle配置(“框架”)配置选项。

dev环境,Assetic生成CSS和JavaScript文件路径,物理上不存在在您的计算机上。但是他们仍然呈现因为内部Symfony控制器打开文件和服务内容(在运行任何过滤器)。ob娱乐下载

这种动态处理资产的服务是伟大的,因为它意味着你可以立即看到你改变任何资产的新状态文件。也很糟糕,因为它可以相当缓慢。如果您正在使用大量的过滤器,它可能是非常令人沮丧的。

幸运的是,Assetic资产提供了一种方法来把你真正的文件,而不是动态生成。

刺激环境

在刺激环境,JS和CSS文件由一个单一的标签。换句话说,而不是看到每个JavaScript文件包括在你的源代码,你可能会看到这样的东西:

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

此外,该文件不实际上存在,也不是由Symfony动态呈现的(资产文件ob娱乐下载dev环境)。这是故意的——让Symfony在生产环境中动态生成这些文件ob娱乐下载太缓慢。

相反,每次您使用您的应用程序中刺激环境(因此,每次部署),你应该运行以下命令:

1
php bin /控制台assetic:美元抛售——env =刺激——没有调试

这将身体生成和编写每个文件,你需要(如。/ js / abcd123.js)。如果你更新你的资产,你就需要再次运行此文件重新生成。

dev环境

默认情况下,每个资产路径中生成dev由Symfony是处理动态的环境中。ob娱乐下载这没有缺点(你可以立即看到您的更改),除了资产可以加载明显放缓。如果你觉得你的资产是加载太慢,遵循本指南。

首先,告诉Symfonyob娱乐下载停止试图动态处理这些文件。做出以下改变config_dev.yml文件:

1 2 3
# app / config / config_dev.ymlassetic:use_controller:假

接下来,因为Symfonob娱乐下载y不再是这些资产都是自动生成的,您将需要手动倾倒。为此,运行以下命令:

1
php bin /控制台assetic:美元转储

这身体上写的所有资产文件需要你dev环境。最大的缺点是,你需要运行这个每次更新一个资产。幸运的是,通过使用assetic:看命令,资产将被自动重新生成因为他们改变:

1
php bin /控制台assetic:美元的手表

的assetic:看命令是在AsseticBundle 2.4中引入的。在之前的版本中,您必须使用——看选择的assetic:转储命令相同的行为。

自运行此命令dev环境可能生成一堆文件,通常是一个好主意点生成的资产文件一些孤立的目录(例如/ js /编译),为了保持组织:

1 2 3
{%javascript@AppBundle /资源/公众/ js / * ' = ' js /编译/主要输出。js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}