#gulp #frontend #webdev
Mirkowie, podpowiedzcie bo nie wiem czy to jest w ogóle możliwe. Kombinuję, ale nie wychodzi mi spięcie tego w Gulpie:

Chciałbym w mojej przeglądarce uruchomić stronę produkcyjną i wstrzyknąć lokalne pliki jedynie w celu prezentacji / podglądu.

Próbowałem gulp-inject, browser-sync
  • Odpowiedz
Używam w gulpie, gulp-rev do dodawania w skompilowanym pliku losowej nazwy żeby wymusić pobranie nowej wersji. Wie ktoś jak zrobić automatycznie żeby mi podmienił w pliku html ścieżkę do nowo zapisanego pliku?

kod wygląda tak:

gulp.task('js_rev', function() {
return gulp.src("../build/app.js")
Hej #webdev ,
jeśli mam jakieś wolne chwilę, to prywatnie próbuję zabawy z #gulp. Chciałbym poprosić o naprowadzenie, może wytłumaczenie "jak to działa" - nigdy nie miałem styczności z projektem z prawdziwego zdarzenia.

Powiedzmy, że konfiguruję sobie Gulp w pracy. Ogarniam w nim hierarchię src / tmp / dest. Konfiguruję kompilacje z scss, autoprefixer, minimalizację obrazów, plików etc. No i mam jakieś tam pliki.

Chciałbym projekt kontynuować w innym miejscu, np. właśnie w domu. Jak to najlepiej zrobić? Czy powinienem w domu od nowa skonfigurować Gulp tak jak w pracy od zera? Wydaje mi się, że raczej 2x konfigurowanie ręczne narzędzia do tego samego projektu to coś nie halo ( ͡° ͜ʖ ͡°). Czy wrzucić na zdalne repo wszystko, w tym node_modules i pobrać w domu? Bo na razie wstępnie wyczytałem, że
Miał ktoś kiedyś problem z zapisem plików .scss w Visual Studio Code?

Mam folder scss a w nim plik main.scss i test.scss.
W pliku main.scss importuje plik test.scss przez @import "test"; (pliki są w tym samym folderze) i niestety gdy chce sobie napisać styl w pliku
test.scss to w konsoli wyskakuje mi błąd taki jak na screenie. (plik main.scss kompiluje normalnie)
Co ciekawe odpaliłem ten sam projekt w Webstormie, Phpstormie a nawet w Notepadzie++ i wszystko elegancko się kompiluje a w VSC:Insiders jak i tym zwykłym nie xD
Reinstalacja noda, gulpa, VSC nie
Miraski, chcę przerobić mój customowy motyw WP pod prace z Gulpem (sassy itd). No i tak, mam 2 motywy, nazwijmy je theme oraz theme-child. No i teraz w glownym motywie mam jakies tam swoje css'y, ktore tworza glowny trzon strony. W childzie robie modyfikacje. W jaki sposob poprawnie zaimplementowac teraz obsluge sass i gulp? W glownym motywie mam kilka plikow css, kilka js. Czy powinienem je polaczyc w jeden plik przy uzyciu
  • Odpowiedz
Halo halo, potrzebne wsparcie ( ͡° ͜ʖ ͡°)

Postanowiłem sobie przetestować Visual Studio Code ale natknąłem sie niestety na pewien dość ważny dla mnie problem.
Mianowicie posiadam gulpa Z TEGO GITA i problem jest w tym że VSC nie importuje mi plików sass z innych folderów.
Tzn. mam plik src/sass/app.scss i w nim piszee @import 'test/plik'; po czym w folderze scss tworze folder "test" a w nim _plik.scss i przykladowo ustawiam w nim na body background-color: red to gulp nie wychwytuje tych zmian.
w app.scss wszystko działa ale cholera nie chce
@folxuxd: Bo gulp obserwuje tylko plik app.scss pod kątem zmian.
80: gulp.watch('src/sass/app.scss', ['sass']);
dodaj sobie:
81: gulp.watch('src/sass/(gwiazdka)/(gwizadka).scss', ['sass']);

edit: (gwiazdka) zmień na * bo wykop usuwa gwiazdki z tekstu xD
  • Odpowiedz
Ogarnia ktoś gulpa? Generalnie wszystko działa poza tym że browser sync nie widzi plików css podpiętych do htmla. Gdy chce wejść w te style przez okno przeglądarki browser synca to wywala "cannot get" + ścieżka do cssów. Domyślam się że coś jest #!$%@? ze ścieżkami ale nie mam pojęcia co.

#gulp #javascript #naukaprogramowania #programowanie

var gulp = require('gulp');
var browserSync = require('browser-sync');
@24xls: @dannycarter: dobra, mam. Miałem złą ścieżkę w pliku html do stylów. VSC jest bardzo liberalny i sam sobie znajdzie w folderze potrzebny plik ale gulp już jest bardziej ortodoksyjny i trzeba mu wskazać dokładną ścieżkę.
  • Odpowiedz
Od jakiegoś czasu zastanawiam się jak najlepiej zoptymalizować ilość request'ów do plików js/css. Powiedzmy w kodzie developerskim mam 30 plików js/css, które ostatecznie chce skonkatenować/minifikować tak by, któraś z przeglądarek jak najszybciej je pobrała.

Wstępnie myślę, żeby osobno dać kobyły jak bootstrap, jquery, czy datatables natomiast custom'owe pliki tak połączyć by było ich max 10 o podobnym rozmiarze.

Ktoś, coś? Jakieś doświadczenia w tym temacie?

#webdev #frontend #
@CoffeeBreak: mapy i tak są dopiero pobierane po otwarciu konsoli deweloperskiej więc nie powodują dłuższego czasu ładowania (sama informacja o mapie jest raczej pomijalna). To tak jakby ktos to czytał i zastanawiał się czy mapy powodują wydłużenie czasu ładowania strony( ͡° ͜ʖ ͡°)
  • Odpowiedz
Mirki (Mirabelki?) spod tagów #frontend #gulp #angularjs mam jeden problem (albo dwa w sumie) i chciałbym go przy Waszej pomocy rozwiązać. W zamian chętnie wyślę kasztany, albo przeleję na piwa, żeby nie było że poświęcicie 15 minut, a ja zgarnę 15k ( ͡° ͜ʖ ͡°)

Problem:
index.html nie aktualizuje się o moje pliki JS dla Angulara (bower + scss/css
zolwixx - Mirki (Mirabelki?) spod tagów #frontend #gulp #angularjs mam jeden problem ...

źródło: comment_W5nQLYk5tD3Co2K0fx7d1OSXbDFXF74X.jpg

Pobierz
@Melcma: tak, bo wszyscy mają czas żeby przepisywać co 5 min z grunta na gulpa, z gulpa na webpacka, a za chwile z webpacka na jakieś nowe gówno. OP nie o to pytał więc nie wiem po co ten komentarz skoro korzysta z tych narzędzi i się sprawdzają to jaki jest sens to zmieniać na coś "nowszego"? Tak to możemy w kółko wszystko zmieniać i przepisywać a sens w tym
  • Odpowiedz
@Rst00: z takim podejsciem to sobie mozecie w C pisac. W gulpie juz nikt nie pisze na nowo, sa utrzymywane stare srodowiska i ludzie nie chca wracac do czegos co zmierza do statusu deprecated. Pare miesiety temu jeszcze sam pomagalem ludziom ze stackoverflow z gulpem, teraz jest ogromny zastoj i nikt tym ludziom nie pomaga, bo szybciej bedzie przepisac to na webpacka.
  • Odpowiedz
@Mewtwo: łoo panie... powodzenia w utrzymywaniu tego ( ͡º ͜ʖ͡º)
Btw. jak ma zmieniać na niezrozumiałe, to powinien np. zamieniać sidebar-black na header-yellow, sidebar-left na footer-right itp.
  • Odpowiedz
@greensneaky: Przy odpalaniu serii tasków gulp musi jakoś wiedzieć kiedy task się kończy i kiedy może odpalać kolejny.

Tak więc task może zwrócić pipe-a którego koniec zakończy task, albo możesz wywołać funkcję done() manualnie.

W twoim kodzie task generate_styles kończy się natychmiastowo, by wywołujesz done w czasie gdy async. operacje się nie
  • Odpowiedz
Mirki z #webdev i #gulp bo zaraz zwariuję. Mam aplikację angularową, browser sync i backend który chodzi sobie lokalnie. Chcę pracować nad aplikacją tak, żeby ona uderzała na backend lokalny, na innym porcie niż chodzi frontend. Próbuję z każdą dostępną konfiguracją, najsensowniej wygląda to: https://stackoverflow.com/questions/25410284/gulp-browser-sync-redirect-api-request-via-proxy ale w konsoli przeglądarki ciągle widzę 404 z requestów wysyłanych na ten sam port, na którym chodzi browser sync. Ma ktoś chwilkę żeby
  • Odpowiedz
Muszę sobie ponarzekać. Postanowiłem pójść z duchem czasu i przejść z #gulp na #webpack. Nie tylko ze względu na to, że webpack jest teraz na topie - po prostu #webpack w porównaniu z browserify kompiluje JS szybciej (tak, znam watchify, tak, testowałem).

TL;DR
`
!Webpack jest fajny, ale cholernie trudny w konfiguracji. Gulp jest spoko, ale Gulp + Browserify już nie, a Gulp z Webpackiem używane razem się nie lubią.
ten pie chart co dałeś - rozmiar czerwonego powinien być wielkości żółtego, biorąc pod uwagę liczbę wciąż powstających cokolwiekJS.


U mnie ostatnio powiększa się niebieskie ;P

Skoro Ci w końcu wszystko zadziałało, to czemu wracasz do gulpa?


@
  • Odpowiedz
@qwelukasz: Problemem jest to, że oczekujesz tutaj systemu modularnego a przeznaczeniem TypeScripta nie jest TWORZENIE systemu modularnego a jedynie INTEGROWANIE się z istniejącymi.

Tak samo w czystym .js słowo import nie zadziała, bo przeglądarki nie mają wsparcia dla modułów.

Tak więc musisz użyć narzędzia które pozwoli Ci wprowadzić system modularny do przeglądarki i to bez znaczenia czy chcesz używać TypeScripta czy nie. Koledzy tutaj proponowali Babel aczkolwiek według mnie powinieneś
  • Odpowiedz
Hej Mirki,
Zaczynam się uczyć według tutoriali gulpa i nie ogarniam ;( Chciałem zrobić coś takiego:
-Mam dwa foldery (source i public)
-Gdy zmienię jakiś plik html w folderze source, gulp powinien zmienić go w folderze public.

Napisałem coś takiego (gulpfile.js):
@rbielawski: Dziękuję za sugestie ( ͡° ͜ʖ ͡°) wezmę to pod uwagę w najbliższym czasie :)

@Marmite: Dziękuję dobry człowieku! Nie wiem jakim cudem wkradła się taka literówka;x a po zainstalowaniu gulp-cli (i poprawieniu literówki) wszystko śmiga( ͡º ͜ʖ͡º)
  • Odpowiedz
@veranoo wydaje mi się że panie HR po prostu je odrzucają bo nawet nie wiedzą co to github i jak nie ma doświadczenia to CV ładuje w koszu. Byłem na dwóch rozmowach i 2 razy wzięli kogoś innego tylko dlatego że ja mogłem na max 3/5 etatu. Przynajmniej tak mi powiedzieli. Najtrudniej dostać robotę, potem już powinno być git.
  • Odpowiedz