symfony2 中assetic 的使用

包含javascript文件

    {% javascripts '@AppBundle/Resources/public/js/*' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

最终解析成可能是这个样<script src="/app_dev.php/js/abcd123.js"></script>

包含css文件

{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

引用css和js有一点去别,引用路径不一样,因为css中可能有像background-image url等样有路径的用法,就需要使用cssrewrite;
当使用@AppBundle…这样的路径的时候,cssrewrite就会无效

包含图片

{% image '@AppBundle/Resources/public/images/example.jpg' %}
    <img src="{{ asset_url }}" alt="Example" />
{% endimage %}

合并文件

{% javascripts
    '@AppBundle/Resources/public/js/*'
    '@AcmeBarBundle/Resources/public/js/form.js'
    '@AcmeBarBundle/Resources/public/js/calendar.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

合并成一个文件,减少http请求提高前端性能,通过切割分离成可管理的部分,在dev环境下且debug配置为true时,还是多个文件,便于调试,在prod或者debug为false环境下会合并成一个文件

通过配置,使用别名来引用

# app/config/config.yml
assetic:
    assets:
        jquery_and_ui:
            inputs:
                - '@AppBundle/Resources/public/js/thirdparty/jquery.js'
                - '@AppBundle/Resources/public/js/thirdparty/jquery.ui.js'
#在twig中使用别名
{% javascripts
    '@jquery_and_ui'
    '@AppBundle/Resources/public/js/*' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

指定url的生成,

有的时候我们希望指定生成静态资源的url

{% javascripts '@AppBundle/Resources/public/js/*'  output='js/compiled/main.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

配置assets_version来清除缓存,这样就会每次生成的时候url就会带上 ?v2,每次更换静态文件就可以通过改动assets_version来达到清除缓存的作用

# app/config/config.yml
framework:
    # ...
    templating: { engines: ['twig'], assets_version: v2 }

assetic:dump命令的运用

上面生成的url 指定的文件实际是不存在的,dev环境下会动态生成,所以非常的慢,真正生产环境下,需要先执行命令来生成好静态文件 php app/console assetic:dump --env=prod --no-debug

在dev环境下生成静态文件;dev默认是动态生成文件的,需要配置(config_dev.yml)

assetic:
    use_controller: false #关闭自动生成
php app/console assetic:dump#通过命令生成静态文件,这样做的坏处就是当你有静态文件改变时,就没法更新了;还好还有        另外一个命令 php app/console assetic:watch 来监视文件的改变

你可能感兴趣的:(symfony2 中assetic 的使用)