assets – актив, имущество. Я бы перевел это как ресурс

Accetic содержит в себе 2 основных идеи: assets и filters. Assets это файлы CSS, JavaScript и картинки. Filters это “вещь”, которая может быть применина к файлам, прежде чем передать их браузеру. Это позволяет разделить asset файлы хранящиеся в приложении и файлы переданные пользователю

Без Assetic, вы можете только передать файлы, хранящиеся в папке приложения

[su_tabs]
[su_tab title=”Twig”]

[/su_tab]
[su_tab title=”PHP”]

[/su_tab]
[/su_tabs]

Но с Assetic, вы можете манипулировать этими assets как вы хотите ( загружать их откуда угодно ) перед тем как передать их. Это значит, что вы можете

  • Минифицировать и собрать все ваши  CSS и JS файлы
  • Запустить все ( или только некоторые ) из ваших CSS или JS файлов через компиляторы, такие как LESS, Sass или CoffeeScript
  • Запустить оптимизатор изображений

[wc_divider margin_top=”” margin_bottom=””]

Assets

Использование Assetic предоставляет множество преимущест по сравнению с прямой передачей файлов. Файлы не должны быть сохранены там, откуда они передаются. Они могут собираться из различных источников таких как bundle.

Вы можете использовать Assetic для CSS, JS и изображений. Философия добавления любого из них одинакова, но имеет несколько различный синтаксис.

 Добавление JavaScript файлов

Для того чтобы добавить JavaScript файлы, используйте тэг javascript в любом template

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

Если вы используете default блок, тэг javascripts может лежать внутри блока  javascripts

[/su_spoiler]

[su_spoiler open=”yes” icon=”” class=”my-spoiler tip” title=””]

Вы также можете добавить CSS Stylesheets: смотри Inluding CSS Stylesheets

[/su_spoiler]

В этом примере, все файлы в Resources/public/js/ из папки AcmeFooBundle будут загружены и переданы из различных мест. Фактически передающий тэг выглядит так:

Ключевой момент: только вы позволяете Assetic обрабатывать ваши assets, файлы созранные из различных мест. Это будет причиной проблем с CSS файлами, которые ссылаются на изображения через относительный путь. Смотрии Fixing CSS Путей с cssrewrite Filter

[wc_divider margin_top=”” margin_bottom=””]

Добавление CSS Stulesheets

Чтобы вставить CSS Stylesheets, вы можете использовать похожий метод, описанный ваше, только замените тэг на stylesheets:

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

Опять же вы можете вставить это в блок stylesheets

[/su_spoiler]

Т.к. Assetic изменяет пути ваших assets, это поломает пути всех ваших изображений, которые используют относительные пути, пока вы не воспользуетесь cssrewrite filter

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

Заметьте что оригинальный пример включает в себя JavaScript файлы, вы упоминаете файл используя путь @AcmeFooBundle/Resources/public/file.js, но что если в примере, вы ссылаетесь на CSS файл используя их напрямую, используя путь: bundles/acme_foo/css. Вы можете использовать оба варианта, помня что cssrewrite filter не будет работать если использовать @AcmeFooBundle синтаксис для CSS Stylesheets

[/su_spoiler]

[wc_divider style=”image” margin_top=”20px” margin_bottom=””]

Добавление Изображений

Чтобы добавить изображение используйте тэг image

Вы также можете использовать Assetic для оптимизации изображения. Больше информации вы можете получить из Как Использовать Assetic для оптимизации изображения вместе с Twig фнкциями.

[wc_divider style=”image” margin_top=”” margin_bottom=””]

Fixing CSS Пути с cssrewrite filter

Assetic, генерируя новые URL для ваших assets, ломает все относительные пути CSS файлов. Чтобы починить это убедитесь что вы используете cssrewrite filter в вашем тэге stylesheets. Этот фильтр парсит ваш CSS файл и исправляет пути

Вы можете посмотерть предыдущий пример

[su_spoiler open=”yes” icon=”” class=”my-spoiler caution” title=””]

При успользовании cssrewrite filter, не ссылайтесь на ваши CSS файлы через @AcmeFooBundle.

[/su_spoiler]

[wc_divider style=”image” margin_top=”” margin_bottom=””]

Комбинирование Assets

Одной из фич Assetic являеться возможность комбинирования многих файлов в один. Это помогает уменьшить количество HTTP запросов. Это также позволяет вам поддерживать файлы более разделенными и управляемыми. Это помогает использовать файлы в нескольких приложениях, но передавая их как один файл:

В dev окружении, каждый файл все еще передаеться отдельно, что помогает вам дебажить проще. Однако на prod ( или если debug = false ), файлы будут передаваться как один.

[su_spoiler open=”yes” icon=”” class=”my-spoiler tip” title=””]

Если вы новичок и пытаетесь использовать ваше приложение в prod ( используя app.php контроллер ), вы вероятнее всего увидете что все ваши CSS и JS файлы поломаны. Don’t worry! Так и должно быть. Использование Assetic в prod смотрите Dumping Asset Files

[/su_spoiler]

Комбинирование файлов – это не единственная фича. Вы также можете использовать Assetic чтобы скомбинировать сторонний assets, такой как jQuery, с вашими файлами:

[wc_divider style=”image” margin_top=”” margin_bottom=””]

Использование Named Assets

Конфигурация AsseticBundle позволяет вам определить named assets. Вы можете определить входящие файлы, фильтры и выходящий файлы в вашей конфигурации assetic. Читай больше в assetic config reference

После того как вы определили named assets, вы можете ссылаться на него в шаблонах как @named_asset:

[wc_divider style=”image” margin_top=”” margin_bottom=””]

Filters

Вы можете воспользоваться filter прежде чем передать файлы. Есть filters, которые упаковывают выходной файл. Другие могут компилировать JavaScript из CoffeScript или использовать предпрочессор SASS для CSS. И еще много других фильтров…

Многие фильтры не работают на пряму, но используют сторонние библиотеки, делающие тяжелую работу. Это значит что вам нужно будет часто ставить сторонние библиотеки для использования фильтров. Огромное преимущество использования Assetic это то что он вызывает все эти библиотеки за вас.

Чтобы использовать фильтры вы сначала должны указать из в конфиге Assetic. Добавление фильтров не означает что они используються – это означают, что они могут использоваться.

Например используем UglifyJS для минифицирования JavaScript файлов:

Теперь, чтобы использовать этот filter на группе файлов:

Чтобы разобраться в конфигурировании Assetic filters и узнать про Ugli смотри How To Minify CSS/JS Files (using UglifyJS and UglifyCSS)

[wc_divider margin_top=”” margin_bottom=””]

Контроллирование URL

Если вы хотите вручную указывать в какой файл собирать Assetic, то можете использовать

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

Symfony так же содежрит методы для кэширования, где URL, генерируемые Assetic содержат параметр, который увеличиваеться после каждого развертывания. Читай конфигурация assets_version

[/su_spoiler]

[wc_divider margin_top=”” margin_bottom=””]

Dumping Asset Files

В dev, Assetic генерирует пути CSS и JavaScipt файлов, которые физически не существуют на компьютере. Но они показываются тем не менее, потому что контроллер Symfony открывает файлы и сервисы, возвращая контент ( после запуска любого фильтра ).

Это круто, т.к. вы можете сразу видеть все изменения. Минус в том что это медленнее. Если вы используете много фильтров, скорость вас растроит 🙂

К счастью, Assetic предоставляет способ dump ваши файлы, вместо того чтобы генерировать их динамически

Dumping Asset Files in the prod environment

В prod, ваши CSS и JS файлы представляются в виде одного тэга. Другими словами, вместо того чтобы каждый JS файл включать в ваши источники, вы вероятнее всего увидите что-то вроде:

Более того, этого файла на самом деле нету, и это не динамическое отображение посредством Symfony ( как asset в dev ).

Чтобы физически сгенерировать файлы

Это сгенерирует файл /js/abcd123.js Если вы обновите любой ваш assets, вы должны выполнить эту команду еще раз, чтобы файл перегенерировался

Dumping Asset Files in the dev environment

По умолчанию, каждый asset путь в dev генерируется динамически. Это не минус ( т.к. вы можете видеть все ваши изменения сразу ), но все ваши assets грузятся заметно медленее. Если для вас это слишком долго, то это можно исправить так.

Перво-наперво, скажите Symfony что вы не хотите чтобы она генерировала файлы динамически.

Теперь, Symfony больше не генерирует ваши assets, вы должны генерить из вручную:

Это физически записет все ваши asset в dev. Большой минус, то что вы должны запускать эту команду, каждый раз когда изменяеться какой либо файл. К счастью, можно передать опцию –watch, которая будет следить изменились ли файлы и перегенерировать файлы автоматически:

С того момента как вы запустили эту команду в dev может сгенерировать кучу файлов, хорошей практикой является указать генературу директорию в которую складывать файлы: