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. Відкриваємо 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>

 

Готово! Треба визнати, що в статті розглянуто лише необхідний мінімум. Тому рекомендую ознайомитися з повною документацією по цій темі - там ще досить багато корисного.

Успіхів!