如何使用Assetic资产管理
编辑该页面警告:你浏览的文档欧宝官网下载appob娱乐下载Symfony 2.1,不再维护。
读这个页面的更新版本Symfob娱乐下载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标准分布: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
过滤器在使用失败@AcmeFooBundle
CSS样式表的语法。
cssrewrite过滤器
因为Assetic生成新的url为你的资产,任何相对路径里面将打破你的CSS文件。为了解决这个问题,确保使用cssrewrite
过滤器与你样式表
标签。这个解析你的CSS文件和纠正内部路径,以反映新的位置。
在前一节中您可以看到一个例子。
谨慎
当使用cssrewrite
过滤器,不要引用您的CSS文件使用@AcmeFooBundle
语法。请注意在上面的部分细节。
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资产管理。
- 嫩枝
- 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标准分布,这通常会在生活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
过滤器在使用失败@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和样式表吗。
请注意
ob娱乐下载Symfony还包含一个缓存的方法破坏,最后生成的URL Assetic包含一个查询参数,可以通过配置在每个增加部署。有关更多信息,请参见FrameworkBundle配置(“框架”)配置选项。
dev环境,Assetic生成CSS和JavaScript文件路径,物理上不存在在您的计算机上。但是他们仍然呈现因为内部Symfony控制器打开文件和服务内容(在运行任何过滤器)。ob娱乐下载
这种动态处理资产的服务是伟大的,因为它意味着你可以立即看到你改变任何资产的新状态文件。也很糟糕,因为它可以相当缓慢。如果您正在使用大量的过滤器,它可能是非常令人沮丧的。
幸运的是,Assetic资产提供了一种方法来把你真正的文件,而不是动态生成。
刺激环境
在刺激
环境,JS和CSS文件由一个单一的标签。换句话说,而不是看到每个JavaScript文件包括在你的源代码,你可能会看到这样的东西:
1
<脚本src=“app_dev.php / js / abcd123.js”>< /脚本>
此外,该文件不实际上存在,也不是由Symfony动态呈现的(资产文件ob娱乐下载dev
环境)。这是故意的——让Symfony在生产环境中动态生成这些文件ob娱乐下载太缓慢。
相反,每当你使用你的应用刺激
环境(因此,每次部署),你应该执行以下任务:
1
php应用程序/控制台assetic:美元抛售——env =刺激——没有调试
这将身体生成和编写每个文件,你需要(如。/ js / abcd123.js
)。如果你更新你的资产,你就需要再次运行此文件重新生成。
dev环境
默认情况下,每个资产路径中生成dev
由Symfony是处理动态的环境中。ob娱乐下载这没有缺点(你可以立即看到您的更改),除了资产可以加载明显放缓。如果你觉得你的资产是加载太慢,遵循本指南。
首先,告诉Symfonyob娱乐下载停止试图动态处理这些文件。做出以下改变config_dev.yml
文件:
- YAML
- XML
- PHP
1 2 3
# app / config / config_dev.ymlassetic:use_controller:假
1 2
< !——app / config / config_dev。xml - - ><assetic:配置use-controller=“假”/ >
1 2 3 4
/ / app / config / config_dev.php美元容器- >loadFromExtension (“assetic”,数组(“use_controller”= >假));
接下来,因为Symfonob娱乐下载y不再是这些资产都是自动生成的,您将需要手动倾倒。为此,运行以下:
1
美元的php应用程序/控制台assetic:转储
这身体上写的所有资产文件需要你dev
环境。最大的缺点是,你需要运行这个每次更新一个资产。幸运的是,通过——看
选项,该命令将自动生成资产因为他们改变:
1
php应用程序/控制台assetic:美元抛售,手表
自运行此命令dev
环境可能生成一堆文件,通常是一个好主意点生成资产文件一些孤立的目录(例如。/ js /编译
),为了保持组织:
- 嫩枝
- PHP
1 2 3
{%javascript@AcmeFooBundle /资源/公众/ js / * ' = ' js /编译/主要输出。js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}
1 2 3 4 5 6 7
< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’),数组(),数组(“输出”= >“js /编译/ main.js”))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >
刺激环境
在刺激
环境,JS和CSS文件由一个单一的标签。换句话说,而不是看到每个JavaScript文件包括在你的源代码,你可能会看到这样的东西:
1
<脚本src=“app_dev.php / js / abcd123.js”>< /脚本>
此外,该文件不实际上存在,也不是由Symfony动态呈现的(资产文件ob娱乐下载dev
环境)。这是故意的——让Symfony在生产环境中动态生成这些文件ob娱乐下载太缓慢。
相反,每当你使用你的应用刺激
环境(因此,每次部署),你应该执行以下任务:
1
php应用程序/控制台assetic:美元抛售——env =刺激——没有调试
这将身体生成和编写每个文件,你需要(如。/ js / abcd123.js
)。如果你更新你的资产,你就需要再次运行此文件重新生成。
dev环境
默认情况下,每个资产路径中生成dev
由Symfony是处理动态的环境中。ob娱乐下载这没有缺点(你可以立即看到您的更改),除了资产可以加载明显放缓。如果你觉得你的资产是加载太慢,遵循本指南。
首先,告诉Symfonyob娱乐下载停止试图动态处理这些文件。做出以下改变config_dev.yml
文件:
- YAML
- XML
- PHP
1 2 3
# app / config / config_dev.ymlassetic:use_controller:假
1 2
< !——app / config / config_dev。xml - - ><assetic:配置use-controller=“假”/ >
1 2 3 4
/ / app / config / config_dev.php美元容器- >loadFromExtension (“assetic”,数组(“use_controller”= >假));
接下来,因为Symfonob娱乐下载y不再是这些资产都是自动生成的,您将需要手动倾倒。为此,运行以下:
1
美元的php应用程序/控制台assetic:转储
这身体上写的所有资产文件需要你dev
环境。最大的缺点是,你需要运行这个每次更新一个资产。幸运的是,通过——看
选项,该命令将自动生成资产因为他们改变:
1
php应用程序/控制台assetic:美元抛售,手表
自运行此命令dev
环境可能生成一堆文件,通常是一个好主意点生成资产文件一些孤立的目录(例如。/ js /编译
),为了保持组织:
- 嫩枝
- PHP
1 2 3
{%javascript@AcmeFooBundle /资源/公众/ js / * ' = ' js /编译/主要输出。js ' %}<脚本src=”{{asset_url}}”>< /脚本>{%endjavascripts%}
1 2 3 4 5 6 7
< ? phpforeach(美元视图(“assetic”]- >javascript (数组(@AcmeFooBundle /资源/公共/ js / *’),数组(),数组(“输出”= >“js /编译/ main.js”))作为美元url):? ><脚本src=“< ?php echo $视图- >逃脱(url)美元? > ">< /脚本>< ? phpendforeach;? >