2012-05-31 2 views
4

Я использую Symfony2, с Assetic и Twig. У меня есть различные библиотеки интерфейса - Backbone, jQuery, jQuery UI и Bootstrap. Оба Bootstrap и jQuery UI включают CSS и JS-файлы.С Assetic/Twig/Symfony2, могу ли я определить библиотеки переднего плана?

Есть ли способ определить ресурсы, которые им необходимо включить (включая зависимости), а затем в Twig/Assetic включить все эти ресурсы в один тег? То, что я хотел бы посмотреть, чтобы не что-то вроде:

// config.yml <!-- DOES NOT WORK --> 
assetic: 
    resources: 
    jquery: 
     js: /filepath/to/jquery.js 
    jquery_ui: 
     dependencies: jquery 
     css: /filepath/to/jqueryui.css 
     js: /filepath/to/jqueryui.js 
    less: 
     js: /filepath/to/less.js 
    bootstrap: 
     dependencies: { less, jquery } 
     js: /filepath/to/bootstrap.js 
     css: /filepath/to/bootstrap.css 
    backbone: 
     dependencies: { jquery } 
     js: { /filepath/to/underscore.js, /filepath/to/backbone.js } 

// view.html.twig 
{% use jquery_ui %} 
{% use bootstrap %} 

// outputs all js and css for jQuery, jQueryUI, Less, Backbone, and Bootstrap 

Я нашел несколько взаимосвязанных вопросов:

, но ни, кажется, вовлекает Определяя ресурсов в config.yml. Вместо этого они определяют их в base.html.twig, но этого я и стараюсь избегать.

Я попытался с помощью use тег в Twig, определяя шаблон под названием «jquery_ui» и используя {% stylesheets %} и {% javascripts %} в этом блоке, а затем в base.html.twig положить {% use "jquery-ui.html" %}. Однако use не будет импортировать шаблон, потому что он имеет тело.

ответ

16

Несмотря на то, что существует определенная поддержка для определения интерфейсных библиотек, к сожалению, нет поддержки для разрешения зависимостей. Вы также должны определить свой CSS и JavaScript отдельно.

Что я делаю, создается отдельный файл в /app/config/ под названием assets.yml и включает его в основную конфигурацию, чтобы сохранить чистоту.

assetic: 
    assets: 
     jquery: 
      inputs: 
       - '%kernel.root_dir%/Resources/public/js/jquery.js' 
       - '%kernel.root_dir%/Resources/public/js/jquery-ui.js' 
     my_lib: 
      inputs: 
       - '%kernel.root_dir%/Resources/public/js/my-custom-lib.js' 
       - ... 

Обратите внимание, что '% kernel.root_dir%' решает в каталог app по умолчанию в Symfony2. Теперь вы можете использовать активы в своих шаблонах Twig.

{% block javascripts %} 
    {% javascripts '@jquery' '@my_lib' output="js/jquery.js" %} 
     <script type="text/javascript" src="{{ asset_url }}"></script> 
    {% endjavascripts %} 
{% endblock %} 

То же самое можно сделать для файлов CSS. В этом примере также показано, почему невозможно определить CSS и JavaScript в качестве одного актива.

+0

Я рекомендую использовать 'package.json' в корне проекта и вести заметки о том, как перестроить рабочее пространство в файлах в корне проекта. Иногда я также добавляю скрипты в каталог 'app /'. – renoirb

+0

Как я могу использовать package.json для этого? –

+0

Это выглядит блестящим. Однако у меня есть вопрос о том, что происходит, когда вы расширяете шаблон '{% block javascripts%}'. Предположительно вам нужно использовать '{{parent()}}' placeholder в дочернем элементе.Было бы лучше определить тег '{% javascripts%}' вне '{% block javascripts%}', чтобы избежать необходимости вводить его каждый раз? Может ли дочерний шаблон также включать тег '{% javascripts%}? Является ли Assetic еще достаточно умным, чтобы скомпилировать только один файл css/js? Или он скомпилирует его для «глобального» сайта, а другой для расширяющегося пакета? – cartbeforehorse

0

Возможно, вы захотите проверить Cartero, который позволяет вам определить «пакеты активов», включая зависимости, а затем включить эти пакеты на вашей странице.

https://github.com/rotundasoftware/cartero

Вы должны были бы написать Symfony2 крюк, но это не было бы слишком трудно.

1

Самое простое решение - разместить их в соответствующих каталогах в каталоге web /, так как это корень вашего сайта, который предназначен для всех ваших пакетов Symfony.