BrowserSync e Grunt com o Magento 2

BrowserSync é uma ótima ferramenta para injetar automaticamente novos css no seu navegador cada vez que ele é modificado.

Se você ainda não usou o Grunt, confira o Guia de primeiros passos.

O que é Browsersync?

O Browsersync torna seu fluxo de trabalho de teste de navegador mais rápido, sincronizando URLs, interações e alterações de código em vários dispositivos. É muito rápido e .

Configurando o BrowserSync

É bem simples de usar. Em primeiro lugar, inicie o “grunt watch” em uma janela do terminal.

grunt watch

Em seguida, abra uma segunda janela de terminal e instale a sincronização do navegador, se você ainda não tiver:

npm install grunt-contrib-watch --save-dev

Em seguida, mude para o diretório css em pub / static, por exemplo:

cd pub/static/frontend/MyTheme/default/en_GB/css

Agora, inicie a sincronização do navegador com o seguinte (ajuste o URL do proxy para a instalação da sua loja)

browser-sync start --proxy 'dev.www.mystore.com' --files="*.css"

Isso iniciará a abertura de uma guia do navegador para: http: // localhost: 3000, que carregará sua loja.

Conclusão

Agora, à medida que você faz alterações em seus arquivos LESS, o comando grunt watch re-compila o CSS, que por sua vez aciona a sincronização do navegador para injetar o novo css.

Tudo sem você ter que levantar um dedo.

Observação: se você estiver usando o docker, atualmente eu executo a sincronização do navegador fora da janela de encaixe e o grunhido é executado internamente. Isso funciona muito bem.