Wszystko

Wszystkie

Archiwum

c.....o
c.....o
  • 0
#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
bla_bla_bla
bla_bla_bla
  • 0
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")
.pipe(rev())
.pipe(gulp.dest("../public/js/"));
});

z czego wypada plik app-{losowanazwa}.js

#programowanie #gulp
damiano_polishiano
damiano_polishiano
  • 0
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.
f.....d
f.....d
  • 4
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
TeflonDon
TeflonDon
  • 1
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
f.....d
f.....d
  • 1
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
michael94
michael94
  • 2
@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
L.....e
L.....e
  • 2
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');
var sass = require('gulp-sass');

gulp.task('reload', function() {
browserSync.reload();
});

gulp.task('serve',
L.....e
L.....e
  • 0
@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
sometwo
sometwo
  • 1
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 #javascript #webpack #gulp
N.....y
N.....y
  • 2
@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
zolwixx
zolwixx
  • 1
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 idą bez problemu)

Środowisko:
Używam generator-webapp z Yeomana, który
zolwixx - Mirki (Mirabelki?) spod tagów #frontend #gulp #angularjs mam jeden problem ...

źródło: comment_W5nQLYk5tD3Co2K0fx7d1OSXbDFXF74X.jpg

Pobierz
Rst00
Rst00
  • 1
@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 żaden.
  • Odpowiedz
Melcma
Melcma
  • 0
@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
Jare_K
Jare_K
  • 4
@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
e.....d
e.....d
  • 3
@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 skończyły.

Możesz:
- zamienić 102 linię na return gulp.src('src/scss/**/*.scss') i usunąć done
albo
- słuchać end event:

.pipe(gulp.dest('./dist'))
.on('end',
  • Odpowiedz
K.....r
K.....r
  • 2
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 coś o tym napisać?
  • Odpowiedz
t.....i
t.....i
  • 8
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ą.


Jako,
t.....i
t.....i
  • 2
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?


@szpongiel:

Nie jest powiedziane, ze wracam. Wrócę jeśli uda mi się go elegancko połączyć z Webpackiem.

Ale rozważam powrót z tego względu, że przy każdej zmianie w konfigu webpacka i każdej aktualizacji modułów (pluginów,
  • Odpowiedz
qwelukasz
qwelukasz
  • 0
@tomash-pl:
no to mam tak:

gulp.task('baba', function () {
return gulp.src('app/Resources/src/tsc/*.ts')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('web/js'));
});
i mi pluje bledem, ze app/Resources/src/tsc/IMaterial.ts: interface is a reserved word in strict mode (1:0)
  • Odpowiedz
larvaexotech
larvaexotech
  • 2
@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ś zainteresować
  • Odpowiedz
UrimTumim
UrimTumim
  • 1
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):

var gulp = require('gulp');
gulp.task('html',function(){
gulp.src('source/*.html').pipe(gulp.dest('public'));
});
gulp.task('watch', function(){
gulp.watch('source/*.hml',['html']);
})
Odpalam w konsoli gulp html


Przenosi wszystkie html z source do public (tzn działa)

Odpalam gulp watch


I niby trwa
UrimTumim
UrimTumim
  • 1
@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
saund
saund
  • 2
Hej Mirki!

Gdzie człowiek po kursie #frontend, samouk może szukać swojej pierwszej pracy w #krakow. Znacie może jakieś firmy, które poszukują właśnie kogoś takiego? Co do technologii, które on zna to #html, #css, #sass, #less, #javascript (z elementami #es6), #gulp, #jquery. Nawet jeśli nie znacie takiej firmy to proszę podzielcie się swoimi doświadczeniami z poszukiwań swojej pierwszej pracy. Ja niestety od 4 lat
zackson
zackson
  • 1
@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

Powiązane tagi