Browser-Sync: Por qual motivo você desenvolvedor deveria utilizar?
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.

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.