[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ć?

[Termos69]

@niezielony: może spróbuj callback z timerem jak tu: http://stackoverflow.com/questions/25384796/can-i-set-gulp-livereload-to-run-after-all-files-are-compiled

[ennovum]

@niezielony: brzmi jak race condition. Pomysł z timeout-em cienki jak d--a węża. Ja radziłbym refactoring procesu produkowania plików HTML tak, żeby przebudowie ulegały tylko te faktycznie zmienione.

[niezielony]

@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]

@niezielony: Gulp.watch umie powiedzieć Ci callback-iem lub event-em który plik uległ zmianie. Odczytaj to i uruchom Jade-a tylko na tym pliku. Raczej nie będziesz potrzebował gulp-jade, tylko samego jade.

[niezielony]

@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.

[ennovum]

@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 ;)

[niezielony]

@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

[ennovum]

@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/"

[niezielony]

@ennovum: Hmm, racja, event.path to w Windowsie ścieżka absolutna (po prostu C:\Users\xxx\...) i wszystkie pliki html lądują bezpośrednio w dist, a nie w odpowiednich folderach takich jak w strukturze /jade, jak na to coś poradzić?
Co do wydzielenia całej funkcji, to zrobiłem tak: http://wklej.org/hash/f9b39821a0d/

[ennovum]

@niezielony: spróbowałbym z path.relative, czyli w miejscu event.path podaj path.relative('.', path.relative). Nie zapomnij o require("path");. Daj znać.

[niezielony]

@ennovum: Kompletnie nie rozumiem, teraz tylko w event.path mam jakiekolwiek dane o zmienionym pliku, w jaki sposób to info ma dostać path.relative?

[ennovum]

@niezielony: słusznie, bo napisałem bzdurę, wybacz. Chodziło mi o path.relative('.', event.path).

[niezielony]

@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

[ennovum]

@niezielony: dobra, zacznijmy od ścieżek. Zbadaj to, dodałem dist jako argument funkcji runjade. Potestuj, pologuj i daj znaka.

[niezielony]

@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

[ennovum]

@niezielony: znowu nasadziłem błędów. Spróbuj z tym.

[niezielony]

@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?

[ennovum]

@niezielony: chodzi już wyłącznie o browserSync, tak? W sensie sam setup gulp+jade już działa i transpiluje pliki na bieżąco, tak?

[niezielony]

@ennovum: Dokładnie, pliki html są generowane już do dobrych folderów, ale browserSync automatycznie odświeża pliki bezpośrednio znajdujące się w /dist, tych w /dist/testdir już nie.

[ennovum]

@niezielony: to jest jakieś SPA, np. Angular? Zastanawiam się czy browserSync wie co z tym stream-em zrobić. Spróbuj w runjade zamiast .stream() odpalić .reload().