Como utilizar o Browsersync no WordPress

wordpress

Use o Browsersync pra sincronizar as mudanças no código com o navegador e pare de dar reload na página manualmente.

No post anterior eu falei sobre as funcionalidades e benefícios de utilizar o wordpress/scripts em seu projeto. Caso tenha perdido clique aqui.

Agora quero continuar o post anterior adicionando um pouco mais de poder ao wordpress/scripts utilizando o Browsersync para sincronizar o código que você está escrevendo e atualizando automaticamente a página sem precisar fazer o reload manualmente.

O que é o Browsersync?

O BrowserSync é uma ferramenta que facilita o desenvolvimento web sincronizando automaticamente alterações do código com o navegador. Ele permite que você veja as mudanças do seu código em tempo real, sem precisar atualizar a página manualmente. Há outras funcionalidades que você pode explorar consultando a documentação.

Como instalar?

Para instalar é simples, somente executar o comando abaixo:

npm install browser-sync --save-dev

Partirei do princípio que você é uma pessoa esperta e leu o post anterior e já tem a estrutura inicial no seu projeto 😉.
Agora precisamos alterar o arquivo package.json adicionando na parte de scripts a seguinte linha de código:

{
   "scripts": {
      "sync": "browser-sync start -p \"URL_DO_SEU_SITE\" --files \"**/*.php\"",
   }
}

É necessário substituir a palavra URL_DO_SEU_SITE pela URL do servidor que está rodando a aplicação. Importante que não utilize as iniciais http:// ou https:// . Dependendo do servidor a URL pode ser algo como: meu-site.local, meu-site.test, localhost.

Explicando o código acima em poucas palavras, podemos dizer que ele está chamando o browsersync para iniciar o nosso site na URL indicada e ficar olhando os arquivos .php que foram alterados e atualizar o site automaticamente.

Juntando tudo

Para que tudo funcione lindamente, precisamos juntar os scripts do wordpress/scripts com o script do browsersync que acabamos de configurar. Para isso precisamos instalar um novo pacote que nos ajudar a executar tudo de uma vez.

npm i npm-run-all

Agora vem a cereja do bolo, vamos criar um novo script chamado dev que vai pegar nossos outros scripts e rodar todos juntos e em paralelo. No final nosso arquivo package.json ficará assim:

{
   "scripts": {
      "dev": "npm-run-all --parallel sync start",
      "sync": "browser-sync start -p \"URL_DO_SEU_SITE\" --files \"**/*.php\"",
      "build": "wp-scripts build",
      "start": "wp-scripts start",
      "lint:js": "wp-scripts lint-js",
      "format": "wp-scripts format"
   }
}

O script dev está utilizando no pacote npm-run-all que rodar vários scripts de uma só vez, neste caso nossos scripts sync e start em paralelo.

Conclusão

Agora temos um script que fica de olho nos nossos arquivos .php e atualiza a página automaticamente sempre que algo muda, graças ao BrowserSync. Legal, né?

Espero que vocês tenham gostado e fique de olho pois vamos deixar esse script mais poderoso futuramente.

Saudações,
Grande Abraço!

Comentários