Magento2: Инструкция по установке и настройке Grunt
9

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

1. В корне magento2 нужно переименовать три файла и убрать FILES.sample:

- grunt-config.json.sample;

- Gruntfile.js.sample;

- package.json.sample;

2. Необходимо установить все npm пакеты, они уже прописаны package.json.

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

3. Если раннее в вашей ОС не использовался grunt, то вам необходимо ещё установить:

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

4. Настройки 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].

Как скомпилировать 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 - заменяете на своё название таска