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