Plugin BrowserSync não funciona o reload de arquivos

Seu código esta assim:

gulp.watch('dist/*/')

Se você quer pegar qualquer arquivo dentro de qualquer pasta use dist/**/*. É assim que ensino no curso.

Sucesso e bom estudo.

Não , na verdade está dando um problema na formatação, tentei neste formato como falou mesmo..

Se vc olhar lá no repositório está desta forma..

Parece que é alguma configuração adicional do plugin, mas não estou conseguindo reproduzir, conforme as soluções que estou encontrando na net..

Para detalhar mais o que acontece, é exatamente isso:

https://github.com/BrowserSync/browser-sync/issues/392

Mas ele ainda não não está recarregando as mudanças em arquivos html..

Você consegue compartilhar seu projeto no git? Aliás, poste o seu script do gulp por completo para que eu possa dar uma analisada mais holística no problema.

Quando colo o código aqui ele fica ilegível, mas segue o link do repositório: https://github.com/alphatunning/start-static.git

npm install / npm run gulp

Baixei seu projeto. O live reloading esta funcionando!!!

Alterei o arquivo src/round-about.scss:

/*!
 * Start Bootstrap - Round About (http://startbootstrap.com/template-overviews/round-about)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-round-about/blob/master/LICENSE)
 */

body {
  background: red; // mudei aqui!
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

Instantaneamente a cor do fundo ficou vermelha. Parece que é um problema da plataforma. Eu testei no MAC. Qual seu sistema operacional? Porém, quando altero o HTML, nada acontece. E investigar isso me levou ao seguinte.

Porém vi algumas coisas diferentes no seu gulpfile. Por exemplo, você esta querendo minificar em tempo real. Isso não é feito na prática. Só minificamos e concatenamos no build de produção e não no desenvolvimento. Talvez as outras tasks estejam zuando com seu browserSync.

Em suma, você deve rever todo o seu gulfile e só minfiicar HTML, CSS, JS quando for executar um comando de build de produção. Se você minifica em desenvolvimento com o watch, você terá dificuldades em depurar sua aplicação e o seu gulp ficará muito doido. O livereload é sobre os arquivo de desenvolvimento, não os de produção, ou seja, não é para ser feito na pasta dist.

No máximo, em src, você vai compilar os arquivos SCSS em tempo real. Todo o restante é para ser aplicado com distcom um só comando. Aliás, é assim que faço no curso de Gulp da Alura.

Meu ambiente é windows 10, então.., comecei a fazer da forma do curso, mas quando fui pesquisar por exemplos mais completos, os mais relevantes que encontrei fazem desta forma, usam watch nas tasks , e toda vez que é encontrada alguma mudança ele já roda a task jogando tudo direto para a dist, desta forma eu consigo usar apenas scss no meu ambiente de dev, e quando for depurar consigo usar o sourcemap que compilei no css.

E o livereload não estou fazendo na dist, apontei o "baseDir" para a dist, mas os watch estão rodando sobre os arquivos de dev que é o da pasta "src".

Segue os exemplos mais relevantes que encontrei pesquisando e usei como base para montar o meu:

1 - https://markgoodyear.com/2014/01/getting-started-with-gulp/

2 - https://gist.github.com/torgeir/8507130

O arquivos scss e demais realmente estão funcionando, mas o problema que estou enfrentando agora é que o browserSync não detecta mudanças nos arquivos htmls, pode ser algo relacionado com cache, mas ainda não sei o que é. Mas depois que conseguir resolver isso vou rever este script por completo, obrigado pelas dicas..

Então, se você adotou algum referência e essa referência faz sentido para você, não vejo razão para mudar.

Porém, eu também não consegui identificar o motivo do HTML não esta sendo atualizado. Porém, percebi que o browser sync é acionado a cada alteração, porém ele não é atualizado. Desconfio que seu browser sync esta monitorando o arquivo modificado, mas no livereloading ele esta recarregando o arquivo antigo, antes das tasks aplicadas.

Em suma, eu prefiro fazer watch apenas dos arquivos que precisam ser compilados e todo o restante eu só faço quando for colocar em produção. Isso ajuda também a detectar problemas como esse que estamos enfrentando.

Ok Flavio , obrigado pelo apoio, vou ver o que faço aqui..