Gulp – watch – Kurs WordPress

Gulp watch to świetny sposób na bieżące kompilowanie swoich skryptów i styli. O co chodzi? Przypomnijmy sobie poprzednie odcinki, o skryptach i stylach kompilowanych (na swój sposób) Gulpem. Piszemy sobie JavaScript czy też SCSS, klikamy zieloną strzałkę i mamy skompilowane pliki. Rewelacja i świetne ułatwienie pracy. Czy można to uczynić jeszcze prostszym? Okazuje się, że można.

Gulp watch

Możemy zastosować sobie obserwatorów, którzy będą na bieżąco śledzić stan naszych plików źródłowych. Wyobraźmy sobie takiego obserwatora, jako osobę, która gapi się przez okno i nic nie umknie jej uwagi. A jak coś się stanie, to dzwoni po kompilator, który zmiany w plikach źródłowych, natychmiast zmieni na kod wynikowy. Tak właśnie działa gulp – watch task.

Zmiany oczywiście będziemy wprowadzać w pliku gulpfile.js, który już znacie z poprzednich wpisów. Na początek, ponieważ używanie .pipe w międzyczasie zostało uznane za przestarzałe, przepiszę zadanie „styles” tak, aby używać pump. Wynik poniżej:

gulp.task('styles', function (done) {
	pump([
		gulp.src([
			stylesheet_path + 'css/*.css',
			stylesheet_path + 'sass/*.scss',
		]),
		auto_prefix(),
		sass({outputStyle: 'compressed'}),
		concat('hello-world.min.css'),
		gulp.dest(assets_path + 'css/')
	]);
	done();
});

gulp.task('styles', function (done) {

pump([

gulp.src([

stylesheet_path + 'css/*.css',

stylesheet_path + 'sass/*.scss',

]),

auto_prefix(),

sass({outputStyle: 'compressed'}),

concat('hello-world.min.css'),

gulp.dest(assets_path + 'css/')

]);

done();

});

Teraz możemy sobie stworzyć następne zadanie. Nazwałem je, wstępnie: watch:files. I uruchamiamy watch bazując na wszystkich źródłach, które przekazałem w zadaniach styles i scripts. Wygląda to tak:

gulp.task('watch:files', function (done) {
	gulp.watch([
		stylesheet_path + 'css/*.css',
		stylesheet_path + 'sass/*.scss',
		script_path + 'initialize.js',
		script_path + '*.js',
		script_path + 'finalize.js',
	], gulp.parallel('styles', 'scripts') );
	done();
});

gulp.task('watch:files', function (done) {

gulp.watch([

stylesheet_path + 'css/*.css',

stylesheet_path + 'sass/*.scss',

script_path + 'initialize.js',

script_path + '*.js',

script_path + 'finalize.js',

], gulp.parallel('styles', 'scripts') );

done();

});

Od razu wyjaśnię, żebyśmy się źle nie zrozumieli. W tym przypadku wywołanie done() oznacza, że obserwator został ustawiony, nasza osoba zaczęła wyglądać przez okno a nie, że się to właśnie zakończyło. Proces trwa w tle. Teraz spróbujmy sobie to zadanie uruchomić:

gulp watch:files

I dostajemy coś takiego:

"C:\Program Files\JetBrains\PhpStorm 2018.1.6\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\bin\projects\kursy\hello-world\node_modules\gulp\bin\gulp.js --color --gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js watch:files
[23:35:13] Using gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js
[23:35:13] Starting 'watch:files'...
[23:35:13] Finished 'watch:files' after 24 ms

"C:\Program Files\JetBrains\PhpStorm 2018.1.6\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\bin\projects\kursy\hello-world\node_modules\gulp\bin\gulp.js --color --gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js watch:files

[23:35:13] Using gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js

[23:35:13] Starting 'watch:files'...

[23:35:13] Finished 'watch:files' after 24 ms

Jak wspomniałem, „finished” oznacza koniec ustawiania obserwatora.

Jak to przetestować? Wejdź w jakiś plik CSS lub JS, dopisz/usuń coś, zapisz plik i zobaczysz, jak zadanie uruchamia „się samo” 🙂 Pytanie brzmi, czy to jest wydajne? Gulp watch to nie jest najwydajniejsza rzecz, jaka może nas w życiu spotkać. Dlatego też, często rozbija się to na mniejsze fragmenty. Na przykład tak:

gulp.task('watch:css', function (done) {
	gulp.watch([
		stylesheet_path + 'css/*.css',
		stylesheet_path + 'sass/*.scss',
	], gulp.task('styles') );
	done();
});

gulp.task('watch:js', function (done) {
	gulp.watch([
		script_path + 'initialize.js',
		script_path + '*.js',
		script_path + 'finalize.js',
	], gulp.task('scripts') );
	done();
});

gulp.task('watch:files', gulp.parallel('watch:css', 'watch:js') );

gulp.task('watch:css', function (done) {

gulp.watch([

stylesheet_path + 'css/*.css',

stylesheet_path + 'sass/*.scss',

], gulp.task('styles') );

done();

});

gulp.task('watch:js', function (done) {

gulp.watch([

script_path + 'initialize.js',

script_path + '*.js',

script_path + 'finalize.js',

], gulp.task('scripts') );

done();

});

gulp.task('watch:files', gulp.parallel('watch:css', 'watch:js') );

Zadanie uruchamiamy, jak poprzednio. Teraz, gdy zmodyfikujemy plik CSS, uruchomimy automatycznie zadanie „styles” a modyfikując plik javascript – uruchomimy zadanie „scripts”. Choć poprzednia wersja nie działa wolno, to dlatego, że ma mało (małych) plików. Siłą rzeczy, kompiluje je błyskawicznie. Ale jak plików będzie kilkadziesiąt i będą spore – czas może zauważalnie wzrosnąć. Stąd lepiej zawczasu dzielić zadania na mniejsze kawałki. Ostatnio, tworząc projekt komercyjny, miałem następujące zadania:

gulp.task('watch:files', gulp.parallel('watch:front_css', 'watch:back_css', 'watch:front_js', 'watch:back_js', 'watch:game_js') );

I działało. I działa do teraz. To, jak sobie podzieliłem pliki, wynika (mam nadzieję, że jasno) z nazwy zadań. Zadania były nieco bardziej rozbudowane, ale to nie jest chwila na ich opisywanie. Zasadę już znasz!