Symfony利用assetsBundle合并和压缩css,js文件

8 篇文章 0 订阅

合并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文件

在进行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就压缩合并为一个文件了。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值