Advertisement
  1. Web Design
  2. BrowserSync

3 Métodos de Recarga Automática de Navegadores

Scroll to top
Read Time: 2 min

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse vídeo tutorial, aprenderemos sobre recarga de navegadores–especificamente recarga automatica–e consideraremos 3 métodos diferentes para tanto. Comecemos!

Assista o Vídeo

Consideremos um fluxo de trabalho típico de frontend: temos nosso editor, talvez escrevamos alguns HTML, algum CSS usando Sass e o navegador para testar tudo. Toda vez que alteramos o código, temos de voltar ao navegador, apertar atualizar e ver as mudanças surgirem.

Pode parecer um processo rápido, mas fazer essa atualização o tempo todo e gastaremos um bom tempo. Podemos aprimorá-lo. Vejamos três ferramentas que podem tomar conta desse processo, automaticamente, para nós.

LiveReload

LiveReload já existe faz um tempo e é uma ótima ferramenta. Ela tem apps para macOS e Windows e custa (hoje), US$9,99.

Façamos ele funcionar usando um trecho de JavaScript nos arquivos editados ou usemos em combinação a uma extensão de navegador. Se usarmos a extensão, talvez precisemos editar suas configurações para permitir acesso aos arquivos.

Links Úteis

Grunt Watch

Se sentir-se confortável usando a linha de comando, é bom dar uma olhada nessa opção. Grunt é um executador de tarefas em JavaScript e podemos usá-lo para automatizar várias tarefas que teríamos de fazer manualmente–incluindo recarga do navegador.

Usaremos o plugin Grunt Watch ("grunt-contrib-watch") que podemos baixar via NPM.

A tarefa watch em nosso gruntfile.js inclue a opção livereload: true e vigia todos os arquivos no projeto.

1
watch: {
2
    
3
    files: ['*.*'],
4
    options: {
5
        livereload: true
6
    }
7
8
}

De novo, precisamos da extensão LiveReload ligada no navegador e tudo funcionará como antes, com o benefício de executar tarefas adicionais.

Recursos do Grunt

Browsersync

O método número três, que tem se tornado o meu favorito, é Browsersync. Ele é muito mais que apenas um utilitário de recarga de páginas, permitindo, também, realizer teste sincronizado de navegador.

Para iniciar, precisaremos do Node.js, então instalemo-no. Para mais detalhes, veja Linha de Comando para Web Design: Domando Pacotes de Terceiros. Com Node instalado, instalemos Browsersync com o comando a seguir do npm:

1
npm install g- browser-sync

Para usar o BrowserSync, precisamos de outro comando e esse mudará dependendo do que queremos fazer. Por exemplo, esse comando configurará um ambiente de servidor estático, sugerindo o Browsersync vigiar todos os arquivos para recarga:

1
browser-sync start --server --files "*.*"

Para mais detalhes sobre os vários comandos que podemos usar, vejamos a documentação.

Links Úteis

Conclusão

É isso! Espero que esse tutorial tenha convecido você a parar de gastar tempo e tentar um desses três métodos de recarga. Se tiver algum outro método preferido, diga-nos nos comentários!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.