[niezielony]

#frontend #webdev #gulp #javascript

Mam dosyć dziwny problem z gulpem i browser-sync, to mój gulpfile: http://wklej.org/id/1830137/
Edytuje sobie pliki jade, za każdym razem po edycji dowolnego z nich widzę w logach

[BS] 5 files changed (file1.html, file2.html, file3.html, file4.html, file5.html)

Problem pojawia się gdy stworzę więcej niż 5 plików jade, wtedy całość się jakby dusi, a każde odświeżenie przeglądarki nie pokazuje aktualnego stanu, tylko o zapis wcześniej, muszę wprowadzić jeszcze jakąś inną zmianę, żeby zobaczyć tę starą, a nowej wtedy w przeglądarce jeszcze nie ma.

Dodatkowo, już nawet przy 3-4 plikach, co jakiś czas jest tak, że localhost ma problem z załadowaniem obrazków i wszystko kręci się w nieskończoność dopóki nie zamknę karty i nie otworzę ponownie, podczas tego ładowania w konsoli widzę, że w "time" obrazków ciągle stoi na "pending".

Wie ktoś jak rozwiązać ten problem?
Oba problemy znikają, gdy na sztywno w tasku jade wpiszę konkretny plik, np index.jade, wtedy odświeża mi prawidłowo, ale tylko ten jeden konkretny plik. Jeśli nie da się odświeżyć wszystkich to może jakoś da się wykryć, który konkretnie został zmieniony i go odświeżyć?

[niezielony]

@ennovum: Nie, w projekcie nie ma ani grama js, to prosty front end, ale z dużą ilością podstron, dlatego dla ułatwienia używam jade i scss.
Zamiana stream() na reload() powoduje tylko problemy, najpierw z plumberem, który chroni mnie przed błędami (Can't pipe to undefined), a po wywaleniu plumbera w ogóle rzuca błędami z kosmosu...
Najśmieszniejsze jest to, że w logach widzę log browser-sync "[BS] 1 file changed (testfile.html)", ale przeglądarka

[ennovum]

@niezielony: wydaje mi się, że browserSync musi wiedzieć, że Twoja aktualna odsłona zależy jakoś od tego zmienionego pliku, żeby odpalił się reload. Trudno mi cokolwiek powiedzieć :/

[niezielony]

@ennovum: spoko, dzięki, spróbuję jeszcze pokombinować. Rzecz w tym, że w testdir/testfile.html to zwykły plik, który mam otwarty w przeglądarce, generuje się od prawidłowo z jade do html, po czym browser sync dowiaduje się, że został zmieniony, ale jakimś trafem w ogóle mi go nie odświeża, dziwna sprawa.

A Ty czego używasz na co dzień? Też gulpa czy jakiejś alternatywy?

[ennovum]

@niezielony: Gulp-a i Grunt-a w starszych projektach. Oba mają swoje zakamarki, nie powiedziałbym, że któryś jest jakoś wyraźnie lepszy. Gulp jest nieco szybszy i code-over-configuration, więc dla mnie wygrywa.

[ennovum]

@ennovum: we wszystkich plikach masz spięty runtime browserSync-owy?

[niezielony]

@ennovum: Możesz jaśniej? Nie za bardzo wiem jak to sprawdzić.
Może dodam, że kółko odświeżania w chrome kręci się tylko przy plikach bezpośrednio w /dist/, nawet jeśli dany plik nie jest zmieniany i browser sync go nie odświeża to i tak się kręci, natomiast w tych głębiej osadzonych plikach już nic się nie kręci.

[ennovum]

@niezielony: z tego co pamiętam, aby browserSync działał, trzeba na stronie załączyć mały plik JS-owy. To nazywam runtime-m.
EDIT
W docs-ach oni to nazywają klientem. I jeśli używasz browserSync-owego serwera, to plik jest załączany automagicznie. Używasz?

[niezielony]

@ennovum: Racja, ten plik zawsze załączał mi się automatycznie, a do tego folderu testdir już się nie dołączył, a przecież powinien, wiesz jaka może być przyczyna?

[ennovum]

@niezielony: a spróbuj browserSync.stream({match: '**/*.html'})

[niezielony]

@ennovum: wybacz, nie zauwazylem komentarza, nie, niestety rozwiązanie z match nie działa, pliczek js nie załącza sie w ogóle do tego pliku wewnątrz, troche szkoda, bo wydaje mi się, że problem powinienem być dosyć popularny jeśli wszystko robię dobrze. U siebie używałes kiedyś browser synca przy zagnieżdżonych plikach?