Todo desenvolvedor web já se incomodou em ter que ficar atualizando uma página a cada modificação realizada no código ou ter que ficar testando a aplicação em inúmeros tipos de navegadores, tanto desktop, quanto tablet, mobile, etc. Mas esses problemas finalmente acabaram! Todas essas tarefas manuais repetitivas podem ser feitas automaticamente pelo Browser-sync.
O Browser-sync é um módulo do Node.js de código aberto, disponível para uso sob a licença Apache 2.0. Ele proporciona uma série de funcionalidades essenciais para o desenvolvimento web. Com ele, você ganhará muito mais tempo automatizando rotinas manuais, e além disso, ele possui uma série de funcionalidades que ajudam muito a vida do desenvolvedor, como:
- Instalação e execução em qualquer lugar: por ser construído em nodeJS, é suportado por qualquer sistema operacional;
- Compatível com automatizadores de tarefas: facilmente integrado com ferramentas como o Gulp e o Grunt;
- Histórico de URL: registra os URLs de testes para que possam ser enviados para todos os dispositivos e navegadores com um único clique;
- Sincronização de arquivos: os navegadores e dispositivos são atualizados a cada modificação dos arquivos de HTML, CSS, imagens, etc.
- Sincronização de interação: as ações como clique do mouse, rolagem, atualização de formulários são espelhadas entre todos os navegadores e dispositivos;
- Acelerador de rede: teste a página mesmo em uma conexão lenta de internet;
- Controle de interface do usuário (UI ou CLI control): execute uma nova interface do usuário baseada em um navegador ou dispositivo para obter um controle rápido.
Vamos ver como ele funciona.
Instalando e executando o Browser-sync em um projeto NodeJS
Vamos criar um projeto NodeJS para aprendermos a configurar o browser-sync na prática. Nesse projeto, usaremos o módulo do Browser-sync juntamente com o Gulp e o Express.
Primeiramente, crie um projeto Node com o comando:
npm init
Baixe os pacotes abaixo na pasta do projeto através do npm install:
npm install browser-sync gulp gulp-nodemon express
O projeto que criaremos terá a seguinte estrutura:
No arquivo index.html, criaremos uma simples página HTML usando Bootstrap para servir aos nossos testes.
<!doctype html>
<html>
<head>
<title>Página Lorem ipsum</title>
<meta charset="utf-8"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class='row'>
<div class='col-md-12'>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas erat non mauris aliquam ultrices. Maecenas sit amet lacus maximus, faucibus nisi a, iaculis mi. Praesent dapibus, nisl eu placera, est nisi efficitur mauris, a feugiat justo magna a ligula.</p>
</div>
</div>
</div>
</body>
</html>
No arquivo app.js vamos fazer o require do módulo express instalado no projeto e configurar para ele atuar sobre a pasta public/ e então fazer uma requisição GET para mandar a resposta para o arquivo index.html. Sendo tudo isso escutado na porta 8000.
var express = require('express');
var app = express();
var router = express.Router();
app.use(express.static('public'));
app.get('/', function(req, res) {
res.sendfile('./public/index.html');
});
app.listen(8000);
Já no arquivo gulpfile.js vamos fazer o require do módulo do gulp, gulp-nodemon e browser-sync. E depois criar as tarefas para o nodemon e browser-sync, atráves do gulp.task.
var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
gulp.task('default', ['browser-sync'], function () {
});
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:8000",
files: ["public/**/*.*"],
browser: "google chrome",
port: 3000,
});
});
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: 'app.js'
}).on('start', function () {
if (!started) {
cb();
started = true;
}
});
});
Note que a porta que o browser-sync estará escutando é a 3000. Depois de criar toda a estrutura do projeto e seus arquivos , vamos até a pasta raiz do projeto e executar o gulp:
Executando o gulp, vemos que nossa aplicação local está sendo ouvida pelo endereço localhost:3000 e a aplicação externa será o IP do seu computador:3000. Podemos colocar esse endereço externo em qualquer navegador de qualquer dispositivo que o Browser-sync irá fazer a sincronização com todos eles. Faça o teste!
E a interface do Browser-sync onde teremos vários recursos está no endereço localhost:3001.
Através desta interface, poderemos:
- Visualizar o histórico de URLs;
- Controlar os tipos de ações a serem sincronizadas (cliques, scrolls, etc);
- Debugar remotamente através do weinre;
- Possibilidade de abrir uma nova aba e forçar o reload de todos os browsers sincronizados;
- Adicionar contornos simples a todos os elementos da página através do CSS Outlining;
- Adicionar caixas de sombras a todos os elementos da página através do CSS Depth Outlining;
- Adicionar uma grade sobreposta ajustável a página através da Overlay CSS Grid;
- Entre outras funcionalidades.
Bem interessante, né? E você? Já usa ou vai começar a usar o Browser-Sync nas suas páginas web? Compartilhe com a gente nos comentários!
Veja o exemplo criado neste artigo no Git.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?