EugeneMir.com
Блог программиста про IT и создании сайтов
Инструкция по установке и настройке Grunt в Magento 2
170Magento 2

Grunt - это современный исполнитель задач JavaScript, который существенно упрощает повторяющиеся задачи за счет автоматизации компиляции, минификации, линтинга, модульного тестирования и т. Д. Он может выполнять большинство вышеупомянутых рутинных процессов с нулевыми усилиями, вам нужно только настроить средство выполнения задач через Gruntfile.

1. Установите NodeJs на свой компьютер, пример того, как установить NodeJS, приведен ниже:

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

2. В корне Magento 2 нужно переименовать три файла и убрать FILES.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 и перезагрузки страниц в браузере.

Создадим таску в 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
Web-Inside24