合并CSS,JS文件
1.在引用css样式的时候如下:
{% stylesheets
'@WolehaoHomeBundle/Resources/public/flatUI/bootstrap/css/bootstrap.css'
'@WolehaoHomeBundle/Resources/public/flatUI/css/flat-ui.css'
'@WolehaoHomeBundle/Resources/public/less/common.less' filter='cssrewrite' output='css/compiled/main.css'%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
应用js文件的时候如下:
{% javascripts
'@WolehaoHomeBundle/Resources/public/flatUI/js/jquery-1.8.3.min.js'
'@WolehaoHomeBundle/Resources/public/flatUI/js/*' output='js/compiled/main.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
注意,要在twig里面使用@WolehaoHomeBundle必须在config.yml里面配置asstes的bundle如下:
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ WolehaoHomeBundle ]
2.在开发环境中无需做改变即可看到效果,如若在生产环境,需要手动的去生成相应的css和js文件
php app/console assetic:dump --env=prod --no-debug
在进行css和js压缩的时候,需要确保系统已经成功安装了node.js, ubuntu下node.js的安装参考以下链接
http://blog.csdn.net/w306621759/article/details/17738365
1. 执行如下命令安装uglify-js
$ npm install -g uglify-js
或者是下面的命令安装到项目中
$ cd /path/to/symfony $ mkdir app/Resources/node_modules $ npm install uglify-js --prefix app/Resources
2.安装uglifycss
$ npm install -g uglifycss
或者如下命令安装到项目中
$ cd /path/to/symfony $ mkdir app/Resources/node_modules $ npm install uglifycss --prefix app/Resources
3.配置config.yml的assetic
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ WolehaoHomeBundle ]
#java: /usr/bin/java
filters:
uglifyjs2:
bin: "%kernel.root_dir%/Resources/node_modules/.bin/uglifyjs"
uglifycss:
bin: "%kernel.root_dir%/Resources/node_modules/.bin/uglifycss"
4.修改引入css和js
{% stylesheets
'@WolehaoHomeBundle/Resources/public/flatUI/bootstrap/css/bootstrap.css'
'@WolehaoHomeBundle/Resources/public/flatUI/css/flat-ui.css'
'@WolehaoHomeBundle/Resources/public/less/common.less' filter='cssrewrite,?uglifycss' output='css/compiled/main.css'%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
注意加上?表示debug模式无效
{% javascripts
'@WolehaoHomeBundle/Resources/public/flatUI/js/jquery-1.8.3.min.js'
'@WolehaoHomeBundle/Resources/public/flatUI/js/*' filter='?uglifyjs2' output='js/compiled/main.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
注意加上?表示debug模式无效
5.执行清楚缓存命令
php app/console cache:clear --env=prod
6.在生产环境下所有的css和js就压缩合并为一个文件了。