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

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

• 嫩枝
• PHP

1

<脚本src=”{{资产(js / script.js)}}”类型=“text / javascript”>< /脚本>

1

< script src =“< ?php echo $视图(“资产”)- > getUrl (js / script.js) ? > "类型=“text / javascript”> < /脚本>

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

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

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

javascript在任何模板标签。这将通常生活在javascript块,如果你使用默认阻止名字Symfony标准分布:ob娱乐下载

• 嫩枝
• PHP

1 2 3

{%javascript@AcmeFooBundle /资源/公共/ js / *’%}<脚本类型=“text / javascript”src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

1 2 3 4 5

< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’))作为美元url):? ><脚本类型=“text / javascript”src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >

提示

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

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

1

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

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

样式表标签。如果你使用默认阻止名字Symfony标准分布,这通常会在生活ob娱乐下载样式表布洛克:

• 嫩枝
• PHP

1 2 3

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

1 2 3 4 5 6

< ? phpforeach(美元视图(“assetic”]- >样式表(数组(“包/ acme_foo / css / *”),数组(“cssrewrite”))作为美元url):? ><链接rel=“样式表”href=“< ?php echo $视图- >逃脱(url)美元? > "/ >< ? phpendforeach;? >

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

请注意

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

图像标签。

• 嫩枝
• PHP

1 2 3

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

1 2 3 4 5

< ? phpforeach(美元视图(“assetic”]- >图像(数组(@AcmeFooBundle /资源/公共/图片/ example.jpg '))作为美元url):? ><imgsrc=“< ?php echo $视图- >逃脱(url)美元? > "alt=“例子”/ >< ? phpendforeach;? >

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

cssrewrite过滤器

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

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

谨慎

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

• 嫩枝
• PHP

1 2 3 4 5 6

{%javascript@AcmeFooBundle /资源/公众/ js / * ' ' @AcmeBarBundle /资源/公共/ js /形式。js ' @AcmeBarBundle /资源/公共/ js /日历。js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}

1 2 3 4 5 6 7 8 9

< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’,“@AcmeBarBundle /资源/公共/ js / form.js ',“@AcmeBarBundle /资源/公共/ js / calendar.js ',))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >

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

提示

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

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

• 嫩枝
• PHP

1 2 3 4 5

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

1 2 3 4 5 6 7 8

< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js /第三方/ jquery.js ',@AcmeFooBundle /资源/公共/ js / *’,))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >

• YAML
• XML
• PHP

1 2 3 4 5

# app / config / config.ymlassetic:过滤器:uglifyjs2:本:/usr/local/bin/uglifyjs

1 2 3 4 5 6

< !——app / config / config。xml - - ><assetic:配置><assetic:过滤器的名字=“uglifyjs2”本=“/ usr /地方/ bin / uglifyjs”/ >< /assetic:配置>

1 2 3 4 5 6 7 8

/ / app / config / config . php美元容器- >loadFromExtension (“assetic”,数组(“过滤器”= >数组(“uglifyjs2”= >数组(“本”= >“/ usr /地方/ bin / uglifyjs”))));