symfony 利用assetsBundle管理和压缩js,css

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

转载于:https://my.oschina.net/u/3163071/blog/816523