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就會無效javascript

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

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

合併成一個文件,減小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 %}java

##指定url的生成,jquery

有的時候咱們但願指定生成靜態資源的url緩存

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

配置assets_version來清除緩存,這樣就會每次生成的時候url就會帶上 ?v2,每次更換靜態文件就能夠經過改動assets_version來達到清除緩存的做用app

# 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 來監視文件的改變
相關文章
相關標籤/搜索