[zolwixx]

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 ma już gotowy gulpfile. Mam strukturę swoich skryptów:

app/scripts/main.js
app/scripts/app.js
app/scripts/components/pages/strona1/strona1.component.js
app/scripts/components/pages/strona1/strona1.controller.js
app/scripts/components/pages/strona1/strona1.html
app/scripts/routes/strona1.page.js
app/scripts/routes/strona2.page.js

wydaję polecenie gulp serve, cokolwiek w międzyczasie zainstaluję z bowera, to automatycznie ląduje w index.html, ale powyższe pliki z app/scripts/** już nie

fragment gulpfile z taskiem serve

gulp.task('serve', () => {
 runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => {
 browserSync.init({
 notify: false,
 port: 9000,
 server: {
 baseDir: ['.tmp', 'app'],
 routes: {
 '/bower_components': 'bower_components'
 }
 }
 });

 gulp.watch([
 'app/*.html',
 'app/images/**/*',
 '.tmp/fonts/**/*'
 ]).on('change', reload);

 gulp.watch('app/styles/**/*.scss', ['styles']);
 gulp.watch('app/scripts/**/*.js', ['scripts']);
 gulp.watch('app/fonts/**/*', ['fonts']);
 gulp.watch('bower.json', ['wiredep', 'fonts']);
 });
});

(Problem 2)
również sam build wygląda tak, że pliki są kopiowane do .tmp, ale stamtąd nie są łączone w jeden vendor/custom/app/main czy inne .js. Fragment gulpfile dot. skryptów i dołączania do htmla

gulp.task('scripts', () => {
 return gulp.src('app/scripts/**/*.js')
 .pipe($.plumber())
 .pipe($.if(dev, $.sourcemaps.init()))
 .pipe($.babel())
 .pipe($.if(dev, $.sourcemaps.write('.')))
 .pipe(gulp.dest('.tmp/scripts'))
 .pipe(reload({stream: true}));
});

gulp.task('html', ['styles', 'scripts'], () => {
 return gulp.src('app/*.html')
 .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
 .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
 .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false})))
 .pipe($.if(/\.html$/, $.htmlmin({
 collapseWhitespace: true,
 minifyCSS: true,
 minifyJS: {compress: {drop_console: true}},
 processConditionalComments: true,
 removeComments: true,
 removeEmptyAttributes: true,
 removeScriptTypeAttributes: true,
 removeStyleLinkTypeAttributes: true
 })))
 .pipe(gulp.dest('dist'));
});

O mnie:
Czytałem trochę o Gulpie, raz nawet napisałem własny plik do składania rzeczy z różnych folderów i umieszczania z pomocą gulp-inject do htmla. Problem w tym, że jestem za cienki jeśli chodzi o ten plik z webapp i zwyczajnie nie wiem co tam się dzieje. Nie wiem skąd gulp wie, że ma dorzucić bowera między (nigdzie nie ma podanego startaga), skąd wie że ma rozdzielić bower_components po buildzie pomiędzy dwa różne pliki. Póki co załączyłem te pliki ręcznie, ale jak to z angularem bywa będzie ich więcej i więcej i nie wiem czy dopisać jakiś własny task z gulp-inject tylko i wyłącznie pod te pliki, czy dopisać się do któregoś z obecnych tasków. Tyle że w tym gulpfile nie ma ani grama gulp-inject a jakoś to działa...

EDIT: linki do kursów, podpowiedzi, cokolwiek co pozwoli mi zrozumieć gulpa (a konkretnie ten plik) mile widziane.

[Melcma]

@zolwixx: ale wiesz ze yeoman, gulp i bower sa juz od dawna nie sa uzywane do webowych aplikacji?

[zolwixx]

@Melcma: o bowerze słyszałem, natomiast o yeomanie i gulpie nie. Od dawna czyli od... roku? Tak jak Angular 2 i 4? Robię pod Angularem 1.6.8, chcę z automatu załączyć pliki, które piszę i nic innego mnie w tym momencie nie interesuje. Wejście z Angularem 5, Bootstrapem 4, Yarnem i Typescriptem tylko zatrzyma mnie w miejscu, podczas gdy w pracy i tak będę miał "prehistorię", której teraz próbuję użyć w domu.

[HAL__9000]

@zolwixx: Ogarnij webpacka.

[zolwixx]

@HAL__9000: nie pytałem o webpacka. W robocie mam to co mam i nie mam czasu rozdwajać się w różnych kierunkach. mam prosty temat, mam apkę z generatora, ma gulpfile'a, potrzebuje wiedzieć co się w nim dzieje by dołożyć zarówno w podglądzie jak i buildzie moje dodatkowe pliki. Na webpacka przyjdzie czas jak w pracy zaczniemy robić wielki refactoring. Czyli prawdopodobnie ja wcześniej odejdę i zajmę się czymś innym.

[Rst00]

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

[Melcma]

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