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.

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

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

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

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.

Avalie este artigo!

Clique nas estrelas, para dar uma nota de 1 à 5.

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas (Nenhuma avaliação ainda)
Loading...

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *