1.8 Применение Assetic для CSS и JS

Для подключения Assetic к бандлу, необходимо изменить файл App/config/config.yml:

assetic:
    bundles: [BloggerBlogBundle]

Можно удалить строку bundles и подключить Assetic ко всем бандлам.

{% stylesheets
    '@BloggerBlogBundle/Resources/public/css/style.css'
    '@BloggerBlogBundle/Resources/public/css/blog.css'
    debug=false
    output='css/blogger.css'
    filter='?yui_css'
%}
    <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

Параметры:

  • debug - установка режима отладки
  • output - указания выводимого имени файла
  • filter - подключение фильтров (знак вопроса перед yui_css принуждает работать компрессию в DEV).

Для работы фильтра минимизации CSS, используя YUI компрессор надо обновить app/config/config.yml:

assetic:
    filters:
    yui_css:
    jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar

Фильтры в библиотеке ядра:

  • CssMinFilter - минимизирование CSS
  • JpegoptimFilter - оптимизация JPEG файлов
  • Yui\CssCompressorFilter - сжатие CSS с использованием YUI компрессора
  • Yui\JsCompressorFilter - сжатие JavaScript с использованием YUI компрессора
  • CoffeeScriptFilter - компиляция CoffeeScript для JavaScript

Полный список фильтров Assetic - https://github.com/kriswallsmith/assetic/blob/master/README.md.

{% javascripts
    'https://code.jquery.com/jquery-1.11.1.min.js'
    '@AcmeBlogBundle/Resources/public/js/scripts.js'
    output='js/scripts.js'
    filter='yui_js'
%}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}