如何使用Assetic资产管理
编辑该页面警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 2.1,不再维护。
读这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.2(当前的稳定版本)。
资产和过滤器。资产文件如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标准分布:欧宝娱乐app下载地址
- 嫩枝
- 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标准分布,这通常会在生活欧宝娱乐app下载地址样式表
布洛克:
- 嫩枝
- 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
过滤器在使用失败@AcmeFooBundle
CSS样式表的语法。
cssrewrite过滤器
因为Assetic生成新的url为你的资产,任何相对路径里面将打破你的CSS文件。为了解决这个问题,确保使用cssrewrite
过滤器与你样式表
标签。这个解析你的CSS文件和纠正内部路径,以反映新的位置。
在前一节中您可以看到一个例子。
谨慎
当使用cssrewrite
过滤器,不要引用您的CSS文件使用@AcmeFooBundle
语法。请注意在上面的部分细节。
javascript在任何模板标签。这将通常生活在javascript
块,如果你使用默认阻止名字Symfony标准分布:欧宝娱乐app下载地址
- 嫩枝
- 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资产管理。
- 嫩枝
- 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”>< /脚本>
样式表标签。如果你使用默认阻止名字Symfony标准分布,这通常会在生活欧宝娱乐app下载地址样式表
布洛克:
- 嫩枝
- 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
过滤器在使用失败@AcmeFooBundle
CSS样式表的语法。
- 嫩枝
- 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;? >
请注意
注意,在最初的例子,包括JavaScript文件中,你提到的文件使用的路径公共/ file.js @AcmeFooBundle /资源/
,但在本例中,您使用实际指的是CSS文件,公共路径:包/ acme_foo / css
。您可以使用,除了有一个已知的问题导致cssrewrite
过滤器在使用失败@AcmeFooBundle
CSS样式表的语法。
cssrewrite过滤器
因为Assetic生成新的url为你的资产,任何相对路径里面将打破你的CSS文件。为了解决这个问题,确保使用cssrewrite
过滤器与你样式表
标签。这个解析你的CSS文件和纠正内部路径,以反映新的位置。
在前一节中您可以看到一个例子。
谨慎
当使用cssrewrite
过滤器,不要引用您的CSS文件使用@AcmeFooBundle
语法。请注意在上面的部分细节。
在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;? >
现在,实际上使用过滤器在一组JavaScript文件,将它添加到你的模板:
- 嫩枝
- PHP
1 2 3
{%javascript@AcmeFooBundle /资源/公共/ js / *’过滤器= ' yui_js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}
1 2 3 4 5 6
< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’),数组(“yui_js”))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >
更详细的指导关于配置和使用Assetic Assetic过滤器以及细节的调试模式中可以找到如何贬低和YUI Compressor的javascript和样式表吗。
请注意
欧宝娱乐app下载地址Symfony还包含一个缓存的方法破坏,最后生成的URL Assetic包含一个查询参数,可以通过配置在每个增加部署。有关更多信息,请参见FrameworkBundle配置(“框架”)配置选项。