Wpis z mikrobloga

#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ć?
  • 30
@niezielony: brzmi jak race condition. Pomysł z timeout-em cienki jak dupa węża. Ja radziłbym refactoring procesu produkowania plików HTML tak, żeby przebudowie ulegały tylko te faktycznie zmienione.
@ennovum: Właśnie wystarczyłoby zrobić tak, żeby odświeżał się plik html odpowiadający plikowi .jade który zmieniłem, tylko tyle mi do szczęścia potrzeba, nie muszą sie odświeżać wszystkie, masz jakiś pomysł jak to zrobić w gulpie?

Tzn w jakiś sposób w watch przekazać, który plik się zmienił, i w tasku jade odświeżyć tylko htmla odpowiadającego danemu jade.
@ennovum: Okej, potem pokombinuję i w razie czego się odezwę, powiedz tylko dlaczego jade a nie gulp-jade? Wiem że samo jade jest zbudowane na nodejs, ale nie rozumiem co dokładnie masz na myśli.
@niezielony: gulp-jade to takie opakowanie jade, które umożliwia wpięcie budowanie szablonów w gulp-owy stream. A kiedy napiszesz watch-a, podepniesz mu callback, dostaniesz konkretną ścieżkę pliku, to nie potrzebujesz już stream-u, tylko zwyczajnego zbudowania jednego pliku przez jade. A do tego służy jade ;)
@ennovum: Piszę dopiero teraz, bo dopiero teraz miałem czas za to się zabrać, zrobiłem sobie coś takiego: http://wklej.org/id/1839695/ i działa elegancko.
Jak widać, całą treść taska jade przekopiowałem do callbacka watchera, da się to jakoś bardziej elegancko zrobić? Tzn, chciałbym jakoś wywołać po prostu task jade z parametrem filename, ale czytałem, że w gulpie nie ma chyba czegoś takiego, czy takie rozwiązanie jest wg Ciebie ok czy można tu jeszcze coś
@niezielony: wygląda lepiej. Powtarzające się części, czyli to co skopiowałeś, możesz wyrzucić do jakiejś funkcji z parametrem src np.
Testowałeś to i działa? Pytam bo mam wątpliwość co do gulp.dest. W przypadku podania do src glob-a ogólnego ("./jade/*.jade") strumień zawiera informacje o relatywnej ścieżce złapanych plików. Chyba nie jest tak kiedy podajesz do src konkretną ścieżkę (event.path). Wydaje mi się, że pliki wynikowe z watch-a wylądują Ci bezpośrednio w "./dist/" zamiast
@ennovum: Nic się nie zmieniło, wszystkie pliki html generowane są bezpośrednio w /dist, niezależnie od tego jak głęboko są w strukturze samego /jade
Obecnie plik wygląda tak: http://wklej.org/id/1839789/
Natomiast logi:

File jade\index.jade was changed, running tasks...

[BS] 1 file changed (index.html)

File jade\testdir\testfile.jade was changed, running tasks...

[BS] 1 file changed (testfile.html)

Pierwszy plik jade jest bezpośrednio w folderze /jade, drugi w folderze /jade/testdir, ale oba wygenerowane html lecą do /dist
@ennovum: Hm, dodałem console.log dla scr i dest w runjade, i takie rzeczy mi loguje przy zmianie odpowiednich plików:

http://wklej.org/hash/cd70885d650/
Nie wiem czy to wina Windowsa i jego backslashów, ale wygląda to dziwnie, próbowałem jakoś dopasować tą ścieżkę, ale nie za bardzo mi się udaje przez te backslashe, dodam, że teraz pliki w ogóle nie są generowane po odświeżeniu.
Ogólnie to chciałbym, żeby skrypt był uniwersalny, tzn. żeby na linuksie też
@ennovum: Ok, jest już znacznie lepiej, tzn pliki generowane są do właściwych folderów. :)
Ale jest jeden problem, automatycznie odświeżane przez browser-sync są tylko te wewnątrz /jade, te głębiej, tzn w /jade/testdir/ już nie, trzeba ręcznie F5 robić, masz jakieś podejrzenia dlaczego tak się dzieje?