Веб-ресурсы

Веб-ресурсы

Веб-ресурсы это вещи вроде файлов CSS, JavaScript и изображений, которые делают так,чтобы фронт-энд вашего сайта отлично выглядел и работал. Разработчики Symfony тридиционно хранили ресурсы в каталоге Resources/public/ каждого пакета.

Best Practice

Храните ваши ресурсы в каталоге web/.

Распорашивание ваших веб-ресурсов по десяткам разных пакетов усложняет работу с ними. Жизни ваших дизайнеров будут значительно проще, если все ресурсы приложения будут в одном месте.

Шаблоны также получают преимущества от централизации ваших ресурсов, так как ссылки становятся намного короче:

1
2
3
4
5
6
7
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />

{# ... #}

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>

Note

Помните, что web/ - это публичный каталог, и что всё, что хранится в нём, будет доступно публике, включая первоначальные файлы ресурсов (например, файлы Sass, LESS и CoffeeScript).

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

Caution

Starting from Symfony 2.8, Assetic is no longer included by default in the Symfony Standard Edition. Refer to this article to learn how to install and enable Assetic in your Symfony application.

Сегодня вы наверное не можете просто создать файлы CSS и JavaScript и включить их в ваш шаблон. Вместо этого, вам скорее всего захочется объединить и уменьшить их, чтобы улучшить производительность клиентской стороны. Вы можете также захотеть использовать LESS или Sass (например), что означает, что вам нужен какой-то способ обрабатывать их в CSS-файлы.

Существует множество инструментов для решения этих проблем, включая инструменты чистого фронт-энда (не PHP) вроде GruntJS.

Best Practice

Используйте Assetic для компиляции, комбинации и минимизации веб-ресурсов, кроме случаев, когда вам комфортно с инструментами вроде GruntJS.

Assetic - это менеджер ресурсов, способный компилировать ресурсы, разработанные множеством различных фронт-энд технологий вроде LESS, Sass и CoffeeScript. Объединение всех ваших ресурсов с Assetic зависит от окружения всех этих ресурсов единственным тегом Twig:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{% stylesheets
    'css/bootstrap.min.css'
    'css/main.css'
    filter='cssrewrite' output='css/compiled/app.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{# ... #}

{% javascripts
    'js/jquery.min.js'
    'js/bootstrap.min.js'
    output='js/compiled/app.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

Приложения, основанные на фронт-энде

С недавних пор фронт-энд технологии вроде AngularJS стали достаточно популярными для разработки фронт-энд веб-приложений, которые разговаривают с API.

Если вы разрабатываете приложение вроде этого, то вам стоит использовать инструменты, рекомендованные технологией, вроде Bower и GruntJS. Вам стоит разрабатывать ваше фронт-энд приложение отдельно от вашего Symfony бэк-энда (даже разделить хранилища, если вы хотите).

Узнать больше об Assetic

Assetic может также минимизировать ресурсы CSS и JavaScript, используя UglifyCSS/UglifyJS, чтобы ускорить ваши веб-сайты. Вы даже можете сжать изображения с помощью Assetic, чтобы уменьшить их размер перед их отправкой пользователю. См. `официальную документацию Assetic`_, чтобы узнать больше обо всех доступных функциях.

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.