如何使用Assetic进行文件管理
安装和配置Assetic
从symfony2.8开始,Assetic就不再被包括在symfony标准版。使用任何Assetic的特性之前需要安装AsseticBundel,在命令行执行下面命令:
$ composer require symfony/assetic-bundle
注:composer下载使用相关在composer中文网有详细介绍,命令的执行需要在项目的根目录下执行
然后,在AppKernel.php文件里面引入AsseticBundle
// app/AppKernel.php // ...
class AppKernel extends Kernel
{
// ... public function registerBundles()
{
$bundles = array(
// ...
new Symfony\Bundle\AsseticBundle\AsseticBundle(),
); // ...
}
}
最后,在config.yml 添加最简单的配置
# app/config/config.yml
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~ # ...
Assetic介绍
Assetic有两个主要概念:静态文件和过滤。静态文件包括CSS,Javascript和图片文件。过滤是在这些文件被渲染到浏览器之前可以应用的。这就可以使这些静态文件在展示给用户和存储在应用上可以有差别。
没有用Assetic的时候,你只是直接应用这些存储在应用的文件:
<script src="{{ asset('js/script.js') }}"></script>
有了Assetic,你可以在文件被渲染之前任意操作或加载这些文件,这意味着你可以:
- 压缩或合并你的CSS/Javascript文件
- 运行某些CSS/Js编译工具,如LESS、SASS、CoffeeScript等
- 对你的图片进行优化
使用Assetic会比直接使用文件有很多优势,文件不需要被存储在应用服务器上,可以被多种源渲染,比如bundle。
你可以使用Assetic来处理CSS,JS,image文件,添加文件的原理基本一样,只是语法有些不同。
加载Javascript文件
在你的模板里使用javascripts标签来加载JavaScript文件:
{% javascripts '@AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
如果你的模板使用Symfony标准版默认的block名称的话,javascripts标签一般是存在在javascripts block里面:
{# ... #}
{% block javascripts %}
{% javascripts '@AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{# ... #}
上面这个例子中,AppBundle下Resourses/public/js目录下的所有js文件都会被加载进来被用在不同的地方。而实际被渲染之后的标签会像下面这样:
<script src="/app_dev.php/js/abcd123.js"></script>
这里有一点需要注意:使用Assets管理静态文件的话,如果文件来源位置不同,CSS文件会产生一个问题,就是当CSS用相对路径来加载资源的时候。解决办法看下面的用cssrewrite
修复css相对路径问题。
加载CSS样式文件
当你要加载CSS文件时,可以和上面一样,只不过把javascripts标签替换为stylesheets标签:
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
如果你的模板使用Symfony标准版默认的block名称的话,stylesheets 标签一般是存在在stylesheets block里面:
{# ... #}
{% block stylesheets %}
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{# ... #}
由于Assets改变了你文件的路径,这个会破坏文件里面以相对路径加载进来的资源,除非使用cssrewrite过滤器。
注意:在上面加载JS文件的例子中,使用的路径像@AppBundle/Resources/public/file.js,但是在加载css的路径中使用的是实际公共资源路径bundles/app/css
,两种方法你都可以使用,除非当使用@AppBundle
语法加载css文件造成cssrewrite 过滤器失败。
加载Image
加载Image使用image标签
{% image '@AppBundle/Resources/public/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example" />
{% endimage %}
你同样可以使用Assetic对图片进行处理,更多信息请参考后面章节(还未翻译)
如果不是用Asset加载图片,你可能会考虑LiipImagineBundle,该bundle同样可以在图片被渲染到客户端前对图片进行压缩或优化。
用cssrewrite
修复css相对路径问题
由于Assetic会为你的文件重新生成一个路径,所以你css里面的相对路径会被破坏。使用cssrewrite
可以修复这个问题,它会重新解析你的css文件,让内部的路径指向新的位置。
可以参考前面的例子
注意:使用cssrewrite过滤器的时候不能使用@AppBundle语法。
合并Assets
Assetic的其中一个特性是可以合并多个文件到一个,这样可以帮助减少Http请求,有利于前端展现。通过把它们分解成可管理的部分来使得文件更容易保存。轻松拆解项目特定文件可以帮助你在其它项目里面重用文件,且它们任然是作为一个独立的文件应用。
{% javascripts
'@AppBundle/Resources/public/js/*'
'@AcmeBarBundle/Resources/public/js/form.js'
'@AcmeBarBundle/Resources/public/js/calendar.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
在开发环境下,每个文件都是独立运行的,因此你可以很容易的进行调试,当在非开发环境下,它们是作为一个单独的script标签,包含所有的javascript文件。
如果你刚开始在prod环境下使用Assetic,你会看到你所有的css,js文件都被打乱了,别紧张,这就是目的,想要查看在生产环境下使用Assetic的更多细节查看下面的释放静态文件。
合并文件不仅只支持你自己的文件,还可以合并第三方文件,比如jQuery。Assetic会把它与你的文件合并到一个文件里面。
{% javascripts
'@AppBundle/Resources/public/js/thirdparty/jquery.js'
'@AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
使用命名的Assets
AsseticBundle的配置指令允许你定义命名的文件设置。你可以在配置文件的assetic部分定义加载文件、过滤器、输出文件。
了解更多请参考Assetic配置参考
assetic:
assets:
jquery_and_ui:
inputs:
- '@AppBundle/Resources/public/js/thirdparty/jquery.js'
- '@AppBundle/Resources/public/js/thirdparty/jquery.ui.js'
给assets命名之后,你就可以在你的模板文件里面引用它
{% javascripts
'@jquery_and_ui'
'@AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
过滤器
当你使用Assetic的时候,你可以在文件被渲染之前使用过滤器。这些过滤器包括压缩asset文件、编译CoffeeScript为javascript文件、解析sass为css。Assetic还有很多有用的过滤器。
许多过滤器不能被直接使用,它们依赖第三方库。这就意味着你经常需要安装第三方库来使用某些过滤器。使用Assetic调用这些库有个巨大的优势就是不需要工作的时候手动运行他们。在你开发和部署阶段Assetic会帮你处理好这些。
要使用要给过滤器,你必须在Assetic配置那里指定它。在这里添加过滤器并不代表它已经被使用,只是意为着它可以被使用。
例如你要使用UglifyJS JavaScript minifier,配置文件应该如下定义:
# app/config/config.yml
assetic:
filters:
uglifyjs2:
bin: /usr/local/bin/uglifyjs
真正使用它时,你需要在模板里面调用如下:
{% javascripts '@AppBundle/Resources/public/js/*' filter='uglifyjs2' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
更多关于使用Assetic过滤器的配置和使用、调试的指导参考后面章节(未翻译)
控制使用的url
假如你愿意,你可以控制assetic产生的url,这项工作在模板里面完成,路径是相对于根目录
{% javascripts '@AppBundle/Resources/public/js/*' output='js/compiled/main.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
symfony也包含一种方法,这种方法让最终生成的URL包含一些参数,这些参数可以在部署配置文件里面添加。
释放Asset文件
在开发环境下,Assetic生成的css、Javascript文件不是真实存在在你的电脑上的,单它们能被同样渲染,因为symfony内部控制器会打开这些文件并返回内容(在执行完一些过滤后)。
这种动态处理asset文件的方法很棒,因为它可以让你立马看到文件的改变。同事它也会造成加载缓慢的缺点,如果你加载很多过滤器的话,它会变得很慢。
幸运的是,Assetic提供了一种方法可以让它们释放成真实的文件,而不是动态生成。
生产环境下释放Asset文件
在生产环境下,你的css,javascript文件各自表现为一个单独的标签。换句话说,你不会在你的源码里面看到包含各种css,js而会像这样
<script src="/js/abcd123.js"></script>
此外,那个文件还不是真是存在的,也不是symfony动态渲染的(asset文件都在开发环境里)。这是故意的-让symfony在生产环境下动态生成这些文件太慢了。
这样,每次你在生产环境下使用应用的时候,你需要执行下面的命令:
$ php bin/console assetic:dump --env=prod --no-debug
这回物理生成你需要的文件,你更新任何的asset文件都需要重新执行一次这个命令。
开发环境下释放Asset文件
默认的,开发环境下每个asset路径的生成都是由Symfony动态生成的。除了加载明显变慢之外,这没有任何坏处。如果你觉得太慢了的话,可以这样做:
首先,告诉symfony停止动态生成这些文件,在config_dev.yml文件里面添加如下配置
# app/config/config_dev.yml
assetic:
use_controller: false
然后,因为symfony不再为你生成这些文件,你需要手动释放它,执行下面这个命令
$ php bin/console assetic:dump
在开发环境下真是生成这些文件有一个很大的麻烦就是每次跟新asset文件都需要重新执行这个命令。幸运的是,执行assetic:watch
命令会让Symfony自动重新生成文件当asset文件被改变时。
由于在开发环境下执行这个命令会产生一些文件,好的做法是让它们都产生在一个独立的文件夹(比如/js/compiled),这样不会破坏文件的组织结构
{% javascripts '@AppBundle/Resources/public/js/*' output='js/compiled/main.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
如何使用Assetic进行文件管理的更多相关文章
- Linux安装LAMP开发环境及配置文件管理
Linux主要分为两大系发行版,分别是RedHat和Debian,lamp环境的安装和配置也会有所不同,所以分别以CentOS 7.1和Ubuntu 14.04做为主机(L) Linux下安装软件,最 ...
- java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis
A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技术:313596790freemaker模版技术 ,0个代码不用写 ...
- BPM体系文件管理解决方案分享
一.方案概述 企业管理在很大程度上是通过文件化的形式表现出来,体系文件管理是管理体系存在的基础和证据,是规范企业管理活动和全体人员行为,达到管理目标的管理依据.对与公司质量.环境.职业健康安全等体系有 ...
- 简单的学习心得:网易云课堂Android开发第五章SharedPreferences与文件管理
一.SharedPreferences (1)SharedPreferences能够用来保存一些属于基本数据类型的数据. (2)保存数据,删除数据都是由SharedPreferences的内部接口Ed ...
- 归档NSKeyedArchiver解归档NSKeyedUnarchiver与文件管理类NSFileManager (文件操作)
========================== 文件操作 ========================== 一.归档NSKeyedArchiver 1.第一种方式:存储一种数据. // 归档 ...
- BZOJ 3289: Mato的文件管理[莫队算法 树状数组]
3289: Mato的文件管理 Time Limit: 40 Sec Memory Limit: 128 MBSubmit: 2399 Solved: 988[Submit][Status][Di ...
- linux 基础命令与文件管理
Linux终端介绍 Shell提示符 Bash Shell基本语法 基本命令的使用:ls.pwd.cd 查看系统和BIOS硬件时间 Linux如何获得帮助 Linux关机命令:shutdow.in ...
- 文件管理[Linux]
文件系统 rootfs: 根文件系统 /boot 系统启动相关的文件,如内核.initrd.以及grub(bootloader) /dev 设备文件 块设备 随机访问 字符设备 线性访问 设备号 主设 ...
- iOS路径沙盒文件管理(转载)
iOS路径沙盒文件管理,看到博主总结的很好,转载过来,原文:http://www.aichengxu.com/view/35264 一.iOS中的沙盒机制 iOS应用程序只能对自己创建的文件系统读取文 ...
随机推荐
- ECshop使用财付通接口支付时出现“[3006]您的请求无效,请重新再试
ECshop使用财付通接口支付时出现“[3006]您的请求无效,请重新再试.”解决方案\includes\modules\payment\tenpay.php 行 104原来的为 $bill_no = ...
- C语言--位运算符
一.位运算符 1.按位与:& 1> 功能 * 只有对应的两个二进制位为1时,结果位才为1,否则为0 * 举例:10用二进制表示为1010, 7用二进制表示为0111.对两个数值进行&a ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- linux里忘记root密码解决办法
1:打开虚拟机,点‘启动’按钮, 2:出现上面这个界面时,键盘输入’i’,出现grub界面: 3:键盘输入e,出现如下界面: 4:选择第二行(kernel……) 5:键盘输入e,出现如下界面: 6:在 ...
- Linux驱动开发相关
一般用printk 查看/etc/sysconf文件,看看内核调试信息放到了哪里 打印的消息一般放在/var/log/messages文件里面. 如果你是在X Windows下的XTerm中insmo ...
- 关于java.sql.SQLRecoverableException: Closed Connection异常的解决方案(转)
在项目中碰到了一个应用异常,从表象来看应用僵死.查看Weblogic状态为Running,内存无溢出,但是出现多次线程堵塞.查看Weblogic日志,发现程序出现多次Time Out. 我们知道,We ...
- visual studio 中GIT的用法
http://msdn.microsoft.com/zh-cn/library/vstudio/hh850445 Git 使用最新版:Git-1.8.4-preview20130916http: ...
- (DP)Best Time to Buy and Sell Stock
题目: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...
- mysql 中 LIMIT的简单用法
mysql--语法: SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset --举例: select * from table l ...
- Compiled Language vs Scripting Language
Referrence: Blog Compiled Languages Example: C, C++, Java Source code needs to be compiled into bits ...