Instalando o Browser-sync

Instalando o browser-sync

Para instalar o browser-sync, o primeiro passo é instalar o NodeJS. Caso você ainda não tenha o NodeJS instalado e tenha dúvidas de como instalar, veja esse artigo, que explica como instalar o NodeJS no Windows e no Linux.

Após instalar o NodeJS, vamos abrir o terminal e digitar o seguinte comando:

npm install -g browser-sync

E após terminar o processo de instalação, o browser-sync já estará pronto para uso.

Usando o browser-sync

Para iniciar o browser-sync, vamos abrir o terminal e direcionar para a pasta do projeto, utilizando o comando cd. Depois, vamos rodar o seguinte comando na raiz do projeto:

browser-sync start --server --files . --directory

Explicando o que são cada um dos argumentos:

browser-sync start vai iniciar o servidor do browser-sync.

--server vai iniciar o servidor localmente

--files . vai garantir que o browser-sync observe todos os arquivos do projeto

--directory é opcional, mas sem esse argumento, o browser-sync vai procurar por uma página index.html para servir de início da aplicação. Caso você queira ver uma página diferente, eu recomendo adicionar esse argumento.

Depois de rodar o comando, uma nova aba no seu navegador padrão deve se abrir automaticamente com a estrutura do projeto. Em seguida, basta escolher um arquivo .html e agora qualquer mudança que acontecer no projeto será atualizada automaticamente no navegador, sem a necessidade de recarregar a página para ver as mudanças.

Acessando de outro dispositivo (local)

Uma das grandes vantagens de se usar o browser-sync é exatamente poder testar o projeto em diferentes dispositivos e todos eles atualizarem automaticamente a cada mudança no projeto.

O primeiro passo após iniciar o browser-sync, é descobrir o seu ip local. Para isso, abra uma outra aba (ou janela) no seu terminal e escreva ipconfig (no Windows) ou ifconfig (no Linux Ubuntu)

Anote o seu endereço de ip local (IPv4). Geralmente, o ip local segue a seguinte estrutura: 192.168.xxx.xxx

O próximo passo é conectar outro dispositivo na máquina onde o browser-sync foi iniciado. Para isso, nós precisamos do ip local e também da porta de conexão. Para descobrir a segunda informação, podemos ver o log do browser-sync no momento em que foi iniciado.

Com as duas informações em mãos, podemos digitá-las na barra de endereço do segundo dispositivo, digitando no seguinte formato: ip-local:porta.

E agora, os dois dispositivos estão em sincronia com atualizações do projeto, e o mais interessante é que algumas interações na página (como o scroll) tem efeito nos dois dispositivos, simultaneamente.

Observação: é extremamente importante que os dispositivos estejam na mesma rede, seja por cabo ou por Wi-Fi.

Gostou do tema? Para consultar a primeira parte deste artigo, acesse: Como instalar NodeJS no Windows/Linux.