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

最新推荐文章于 2021-03-19 07:28:08 发布

小兔and小乖

最新推荐文章于 2021-03-19 07:28:08 发布

阅读量3.3k

点赞数

分类专栏： Symfony php

本文链接：https://blog.csdn.net/wolehao/article/details/17737147

版权

php 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Symfony

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