1. O que é o BrowserSync?
O BrowserSync é uma ferramenta útil para desenvolvimento web que oferece várias funcionalidades em tempo real, como atualização automática de páginas, sincronização de clique, formulários e navegações, e muito mais. Ele é acessível por meio de uma linha de comando e pode ser instalado tanto globalmente como localmente em um projeto específico. O BrowserSync pode ser usado em qualquer ambiente de desenvolvimento, desde que seja compatível com ferramentas como o webpack, Gulp ou Grunt.
2. Como instalar o BrowserSync no Symfony?
O BrowserSync pode ser instalado no Symfony utilizando o Webpack Encore. É importante ter o Node.js instalado em seu sistema para instalar as dependências do Webpack Encore e do BrowserSync. Quando todas as dependências estiverem instaladas, adicione o código abaixo ao seu webpack.config.js e execute-o para iniciar o BrowserSync. Caso queira usar uma porta específica, você pode especificá-la no seu arquivo package.json.
// webpack.config.js
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
Encore
// ...
.addPlugin(new BrowserSyncPlugin(
// BrowserSync options:
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// server files from the "public" directory:
server: { baseDir: ['public'] }
},
// plugin options:
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
))
// ...
.run();
3. Como iniciar o BrowserSync no Symfony?
Depois de ter adicionado o código ao seu webpack.config.js, inicie o servidor local do Symfony usando o comando bin/console server:start (ou bin/console server:run). Em seguida, execute o comando abaixo para iniciar o Webpack Encore e o BrowserSync.
yarn encore dev --watch
Isso iniciará o compilador do Webpack Encore e o BrowserSync automaticamente. Então, você poderá acessar seu projeto no navegador com a URL http://localhost:3000.
4. Como testar se o BrowserSync está funcionando?
Para testar se o BrowserSync está funcionando, você pode fazer uma pequena alteração em seu código e salvar o arquivo. O BrowserSync deve atualizar automaticamente a página no navegador sem que você precise dar um F5. Se não funcionar, verifique se o Webpack Encore e o BrowserSync estão rodando e se o projeto foi compilado corretamente.
5. O que são opções adicionais do BrowserSync?
O BrowserSync tem várias opções disponíveis que podem ajudá-lo a personalizar sua experiência de desenvolvimento. Algumas das opções mais populares incluem:
- files: especifica quais arquivos do projeto são monitorados pelo BrowserSync.
- logLevel: define o nível de verbosidade do log do BrowserSync.
- notify: exibe notificações automáticas em seu sistema operacional para informá-lo sobre alterações no código.
- open: determina se o navegador deve ser aberto automaticamente ao iniciar o BrowserSync.
Para ver uma lista completa de opções adicionais, acesse a documentação do BrowserSync.
6. Como sincronizar eventos no BrowserSync?
Uma das características impressionantes do BrowserSync é a capacidade de sincronizar eventos em vários navegadores ao mesmo tempo. Por exemplo, quando um usuário clica em um botão em um navegador, o evento é registrado e transmitido em vários navegadores conectados. Você pode fazer isso passando uma matriz de eventos para a opção notifyEvents, como mostrado abaixo:
new BrowserSyncPlugin({
notifyEvents: [
"add",
"change",
"delete"
]
})
Isso notificará o BrowserSync sobre adições, alterações ou exclusões de arquivos no projeto.
7. Como ignorar arquivos no BrowserSync?
Às vezes, você pode querer ignorar arquivos específicos ou diretórios durante o desenvolvimento com o BrowserSync, como arquivos de log ou caches. Para fazer isso, adicione a opção ignore ao seu arquivo webpack.config.js e especifique uma matriz de padrões de arquivos ou diretórios a serem ignorados peloo BrowserSync.
new BrowserSyncPlugin({
ignore: ["logs/**/*"]
})
Neste exemplo, todos os arquivos no diretório logs serão ignorados pelo BrowserSync.
8. O que é a opção UI do BrowserSync?
Outra característica bacana do BrowserSync é a opção UI, que permite controlar o servidor do BrowserSync por meio de uma interface baseada em navegador. Para habilitar a opção UI, defina a opção ui para true em seu arquivo webpack.config.js. Então, você pode acessar a interface do BrowserSync visitando a URL especial http://localhost:3001.
new BrowserSyncPlugin({
ui: true
})
A interface do usuário inclui uma ampla variedade de ferramentas úteis, como a capacidade de visualizar o histórico de atualizações, ver o status do servidor e muito mais.
9. Como usar o BrowserSync com o Apache?
Se você está usando o Apache como seu servidor da Web (em vez do servidor local do Symfony), você pode integrar facilmente o BrowserSync ao seu ambiente de desenvolvimento. Para fazer isso, edite seu arquivo de configuração do Apache (httpd.conf) e adicione as linhas abaixo antes do final da configuração do VirtualHost:
Order deny,allow
Allow from all
ProxyPass http://127.0.1.1:3000/browser-sync/
ProxyPassReverse http://127.0.1.1:3000/browser-sync/
ProxySet connectiontimeout=5 timeout=30
Isso permite que o Apache envie solicitações para o servidor do BrowserSync em execução na porta 3000.
10. Como parar o BrowserSync?
Para parar o BrowserSync, você precisa interromper a execução do webpack. Basta pressionar Ctrl + C na janela do terminal onde o Webpack está sendo executado. Isso irá interromper o servidor local do Symfony e o BrowserSync ao mesmo tempo.