Symfony 4: Encore и компиляция ассетов

Symfony 4: Encore и компиляция ассетов

31.03.2019 09:12 | Symfony

Работа с ассетами в Symfony 4 довольно похожа на аналогичную процедуру в Laravel, что не очень то и удивительно, поскольку согласно документации "Encore is inspired by Webpacker and Mix". Что ж, давайте посмотрим что к чему.

ОС: Ubuntu 18.04, Framework: Symfony 4.2.5.

Предполагается, что на машине уже есть Node.js и Yarn. Также убедитесь, что приложение использует Symfony Flex. 

Сначала устанавливаем encore и js-зависимости:

composer require encore

yarn install

 

В результате выполнения этих команд будет:

  • установлен и активирован WebpackEncoreBundle,
  • добавлен каталог assets в корень проекта
  • создан файл webpack.config.js
  • добавлен node_modules/ в .gitignore

Далее с помощью yarn установим encore:

yarn add @symfony/webpack-encore --dev

 

После установки в папке assets появятся следующие файлы:

  • assets/js/app.js
  • assets/css/app.css

Однако, не особо хочется иметь дело с чистым сss - предлагаю использовать Sass. Поэтому переименуем вышеуказанный app.css в app.scss. И этот же файл будем подключать в app.js:

// assets/js/app.js

require('../css/app.scss');

 

После чего установим необходимые зависимости: 

yarn add sass-loader@^7.0.1 node-sass --dev

 

Сразу же подумаем и об autoprefixer-е. Выполним в консоли команду:

yarn add postcss-loader autoprefixer --dev

 

В файле webpack.config.js расскоментируем строку с Sass и, чтобы иметь возможность добавлять автопрефиксы, пропишем загрузчик PostCss (не советую удалять комментарии из оригинального файла, поскольку они довольно чётко описывают значение почти каждой инструкции):

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })

    .enableSassLoader()
    .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

 

Также необходимо добавить browserslist в package.json, поскольку autoprefixer должен понимать какие браузеры мы хотим поддерживать:

{
    ...

    "browserslist": [
        "> 0.5%",
        "last 2 versions",
        "Firefox ESR",
        "not dead"
    ]
}

 

Давайте подключим и css-фреймворк. Bootstrap порядком поднадоел, мой выбор (на данный момент) - materialize-css. Ставим:

yarn add materialize-css@next

 

Допишем импорт фреймворка в файле assets/css/app.scss:

@import '~materialize-css/sass/materialize';

 

И в assets/js/app.js:

require('materialize-css');
...
require('../css/app.scss');

 

Пора скомпилировать ассеты. В зависимости от целей запустите одну из трёх команд:

yarn encore dev

// или
yarn encore dev --watch

// или
yarn encore production

 

И последний шаг - подключим ассеты в шаблоне, для чего воспользуемся соответсвующими методами Encore. Открываем templates/base.html.twig и редактируем:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </body>
</html>

 

Готово! Надо признать, что в статье рассмотрен лишь необходимый минимум.  Настоятельно рекомендую ознакомиться с полной документацией по этой теме - там ещё довольно много полезного.

Успехов!