Browser-Sync: Por qual motivo você desenvolvedor deveria utilizar?

Kledson Nascimento
Sep 6, 2018 · 3 min read

Olá, tudo bem com você? Espero que sim, hoje eu vou falar de produtividade, ai você se pergunta: Não é de browser-sync como esta no tópico?

Este é justamente o motivo do surgimento do browser-sync. Produtividade e muito provavelmente economia das famosas e sofridas teclas F5 e F12.

http://slides.com/mcantillana/hackgirls-browser-sync

Para que serve o Browser-Sync?

O Browser-sync serve para emular um servidor HTTP na sua maquina local, a grande funcionalidade dele é a de ouvir toda e qualquer modificação em sua página, não sendo mais necessário que você faça refresh no navegador com F5, e não para por ai, é possível que você abra outro navegador na mesma página e veja as modificações em tempo real, pessoal do front-end fica a dica, com a utilização do browser-sync você pode abrir outro navegador na visualização mobile e outro em modo normal, e ver todas as modificações em tempo real, inclusive a rolagem da página serve para todas as telas, sendo possível trabalhar com layout responsivo sem ter que ficar dando refresh o tempo todo na página. Desta forma economiza-se tempo.

O editor de texto brackets tem uma funcionalidade parecida, com o seu live-preview, mas a ideia aqui não é fazer você mudar de IDE ou editor de texto, e sim ser possível ter uma funcionalidade como esta em qualquer IDE ou editor que você utiliza. Eu utilizei muito o brackets, particulamente é um editor muito bom e repleto de funcionalidades.

Mas vamos ao que interessa, minha ideia aqui não é falar de editores ou IDEs, e sim do Browser-sync.

Como instalar o Browser-sync

Não se preocupe, é fácil, simples e rápido de instalá-lo, então vamos fazer isso.

Os requisitos básicos é que você tenha o node instalado em sua maquina, vá até o terminal, caso você esteja no Linux, basta pressionar as teclas Ctrl + Alt + T, se você estiver utilizando o windows basta pressionar a tecla Windows + R, digitar cmd e pressionar enter.

Agora digite o seguinte comando: sudo npm install -g browser-sync caso esteja utilizando Linux, se estiver no Windows basta utilizar o comando sem o sudo no inicio ficando: npm install -g browser-sync. Pressione enter e aguarde o término da instalação.

Nota: a flag -g indica que vamos instalar o pacote globalmente para que seja possível utilizar de qualquer lugar em seu computador, sendo possível utilizar em qualquer projeto.

Vamos verificar qual a versão do browser-sync instalada apenas para confirmar a instalação, basta digitar no terminal: browser-sync --version, a versão que estou utilizando é a versão 2.24.7.

Utilizando o Browser-sync

Agora chegou o momento mais esperado, ver tudo que foi dito até o momento funcionando de verdade, antes, é necessário que você entre dentro de uma pasta que contenha um arquivo html, se ainda não tiver crie uma pasta chamada teste e um arquivo com nome teste.html coloque um cabeçalho h1 com algum texto, pronto. Vamos iniciar o browser-sync e ver como funciona na pratica.

Ainda no terminal digite: browser-sync start -f . --server

ou apenas: browser-sync

já imagino qual opção você escolheu, tudo bem, a primeira foi logo assim que o browser-sync foi lançado, logo depois apenas o segundo comando fazia a mesma coisa. Tudo em nome da produtividade.

Após iniciar o browser-sync ele ira abrir seu navegador com a página teste.html renderizada.

Agora, basta que você teste tudo que foi dito até aqui sobre o browser-sync, abra em outros navegadores a mesma URL e teste em modo mobile e outras funcionalidades.

Um exemplo de uso foi quando utilizei o browser-sync para criar minha página no github.

Aqui você pode ver que utilizo duas janelas do navegador para visualizar o resultado final em outros dispositivos.

Caso queira conhecer mais sobre o Browser-sync visite a página https://browsersync.io.

Bom pessoal, é isso, bons estudos e até o proximo post.

Sim, antes de sair, deixe seu comentário sobre o browser-sync, se já conhece, se usa, se vai passar a usar, gostaria de saber sua opnião.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade