Utilizando Grunt para desenvolver no Magento 2

Enquanto muitos estão utilizando para o desenvolvimento frontend o Gulp, o Grunt ainda é uma ótima ferramenta e opção para usar com o Magento 2.

Não vamos nos prender a isso e nos concentrar em como podemos usá-lo para melhorar nossa produtividade.

O que é Grunt?

O Grunt é uma aplicação de linha de comando que tem como objetivo automatizar tarefas, principalmente tarefas em aplicações JavaScript. Essas tarefas são como as descritas acima.

Instale o Grunt com:

mv Gruntfile.js.sample Gruntfile.js
mv package.json.sample package.json
npm install -g grunt-cli
npm install

Configurando

Você vai querer configurar o Grunt adicionando seu tema a [magento-root] /dev/tools/grunt/configs/themes.js, use um tema existente no arquivo como seu modelo.

Usando o Grunt no Magento 2

Uma vez que você tenha a configuração do grunhido, existem alguns comandos que você pode usar para acelerar o seu fluxo de trabalho.

# compile less for your theme
grunt less:<theme>

# removes theme related static files from pub/static and var
grunt clean:<theme>

# republish theme symlinks for your theme to pub/static
grunt exec:<theme>

# tracks changes to source files, recompiles less, and reloads page when using BrowserSync
grunt watch

Observe que o último coando é o uso da sincronização do navegador.