Інструкція з встановлення та налаштування Grunt в Magento 2

Grunt – Одним словом: автоматизація. Чим менше роботи вам доводиться виконувати під час виконання повторюваних завдань, таких як мініфікація, компіляція, модульне тестування, лінтування тощо, тим легше стає ваша робота.

1. Встановіть NodeJs на свій комп’ютер, приклад того, як встановити NodeJS, наведено нижче:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

2. У корені Magento 2 потрібно перейменувати три файли прибравши .sample:

– grunt-config.json.sample;

– Gruntfile.js.sample;

– package.json.sample;

3. Необхідно встановити всі пакети npm, вони вже прописані package.json.

#Встановити всі npm пакети з package.json
npm i --save-dev

4. Якщо раніше у вашій ОС не використовувався grunt, то вам необхідно ще встановити:

#ставимо grunt глобально
sudo npm i grunt-cli -g

5. Налаштування Grunt

– Ідемо до папки dev/tools/grunt/configs/

– Створюємо файл local-themes.js (ця назва файлу прописана в grunt-config.json, можете змінити під себе)

– Вміст файлу має бути таким:

'use strict';
module.exports = {
    [THEME_ALIAS]: {
        area: 'frontend',
        name: '[VENDOR]/[THEME]',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }
};

VENDOR та THEME змінюємо на ваш шлях до теми після app/design/frontend/[VENDOR]/[THEME].

6. Потрібно видалити кеш Magento

php bin/magento cache:clean

Як скомпілювати LESS у Magento 2 за допомогою Grunt

У терміналі проекту необхідно виконати команди:

grunt clean:[THEME_ALIAS]
grunt exec:[THEME_ALIAS]
grunt less:[THEME_ALIAS]

Також можна спостерігати за зміною файлів:

grunt watch

Докладніше про команди Grunt

Зверніть увагу, що потрібно запускати всі команди з каталогу вашого проекту Magento2.

grunt clean – використовуйте цю команду для видалення статичних файлів, пов’язаних з темою, у наступних каталогах: pub/static та var.

grunt exec – використовуйте цю команду для повторної публікації символічних посилань на вихідні файли pub/static/frontend/

grunt less – використовуйте цю команду для компіляції CSS файлів за допомогою символічних посилань, опублікованих в pub/static/frontend/ . Якщо ви бажаєте використати символічні посилання, опубліковані для певної теми, використовуйте більш конкретний варіант команди: grunt less: [THEME_ALIAS].

grunt watch – використовуйте цю команду для відстеження змін у вихідних файлах, перекомпіляції файлів .css та перезавантаження сторінок у браузері.

Створимо Task в Grunt

У файлі Gruntfile.js можна реєструвати таски, щоб виконувати масив тасків однією командою. Він знаходиться в корені проекту.

grunt.registerTask('taskName', ['clean:THEME_ALIAS', 'exec:THEME_ALIAS', 'less:THEME_ALIAS']));
#Приклад:
grunt.registerTask('compile', ['clean:theme', 'exec:theme', 'less:theme']));

PS: Це треба додати після 108 рядка перед останньою фігурною дужкою, що закриває }; у файлі Gruntfile.js

Тепер генерувати стилі можна виконати одну команду.

grunt compile

PS: compile – замінюєте свою назву тяга

Версії пакетів на яких все працює:

nodejs:

npm: 6.14.9

grunt-cli: v1.3.2

grunt: v1.0.4

#Щоб перевірити, чи встановлено Node.js:
node -v
-------------------------------------------------- ------------
#Щоб підтвердити, що у вас встановлено npm:
npm -v
-------------------------------------------------- ------------
#Щоб перевірити версію grunt:
grunt --version

Встановлення Node.js v10.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Якщо ви бажаєте видалити Node.js та npm, ви можете використовувати команду нижче:

sudo apt remove nodejs npm