BROWSER-SYNC
Usando o incrível Browser-Sync
- atualizar navegadores (qualquer) quando o código-fonte for alterado (HTML, CSS, imagens, etc.)
- suporta Windows, MacOS e Linux
- você pode assistir suas atualizações de código (ao vivo) usando seus dispositivos móveis
Instalação no MacOS (veja a ajuda deles para instalar em outro sistema operacional)
Instale o NVM, para que você possa experimentar qualquer versão do Node
brew install nvm # install a Node version manager
nvm ls-remote # list available Node versions
nvm install v10.13.0 # install one of them
npm install -g browser-sync # install Browser-Sync
Como usar a sincronização do navegador para sites estáticos
Vamos ver dois exemplos:
browser-sync start --server --files . --host YOUR_IP_HERE --port 9000
browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000
A --server
opção permite executar um servidor local em qualquer lugar do terminal e --files
especificar quais arquivos serão rastreados para alterações. Eu prefiro ser mais específico para os arquivos rastreados, portanto, no segundo exemplo, uso ack
para listar extensões de arquivos específicas (é importante que esses arquivos não tenham nomes de arquivos com espaços) e também ipconfig
para encontrar meu IP atual no MacOS.
Como usar a sincronização do navegador para sites dinâmicos
Caso você esteja usando PHP, Rails, etc., você já possui um servidor em execução, mas ele não é atualizado automaticamente quando você faz alterações no seu código. Então você precisa usar o--proxy
opção para permitir que a sincronização do navegador saiba onde está o host desse servidor.
browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open
No exemplo acima, eu já tenho um aplicativo Rails em execução no meu navegador em 192.168.33.12:3000
. Realmente é executado em uma VM usando uma caixa Vagrant, mas eu poderia acessar a máquina virtual usando a porta 3000 nesse host. Eu gosto --no-notify
de parar a sincronização do navegador, enviando-me um alerta de notificação no navegador toda vez que altero meu código e --no-open
interromper o comportamento da sincronização do navegador que carrega imediatamente uma guia do navegador quando o servidor é iniciado.
IMPORTANTE: Caso esteja usando o Rails, evite usar o Turbolinks no desenvolvimento, caso contrário você não poderá clicar nos seus links enquanto estiver usando a --proxy
opção.
Espero que seja útil para alguém. Eu tentei muitos truques para atualizar o navegador (até mesmo um post antigo que enviei sobre essa questão do StackOverflow usando o AlfredApp há algum tempo), mas esse é realmente o caminho a seguir; não há mais hacks, apenas flui.
CRÉDITO: Inicie um servidor da Web de recarga ao vivo local com um comando