Co to jest Gulp.js? Część 2

Za dokończenie cyklu zbierałem się z 2 lata… no ale pora go dokończyć i mieć to z głowy :) W poprzedniej części po krótce napisałem czym jest gulp, w tej części skoncentrujemy się na tym jak mniej więcej (naprawdę mniej więcej) działa gulp i czym on się różni od grunta.

Główną i najważniejszą rzeczą w gulpie jest to, że działa on na strumieniach danych. Od czasu powstania *nix, strumienie są jednym z chyba najpotężniejszych narzędzi jakie mamy pod ręką w systemie (nie koniecznie ekhm win). Działa to mniej więcej na zasadzie rur, możemy jedną rurę podłączyć do drugiej. Teraz każda z tych rur, może zawierać jakiś filtr. Czyli łączymy jedno wyjście z drugim wejściem przy czym coś z tą "wodą" robimy na przykład "filtrujemy" przez sitko by zablokować jakieś kamyki.

W *nix, strumienie są zaimplementowane w shell z wykorzystaniem pipes |. W node jak i gulp jest to po prostu .pipe(). W trakcie wykonywania operacji na strumieniu jesteśmy wstanie zarówno wykorzystać bibliotekę która będzie działała bardziej "abstrakcyjnie" na naszym strumieniu, albo sami możemy coś z nim zrobić. To trochę wspomaga w rozdzieleniu odpowiedzialności – to znaczy, jesteśmy wstanie stworzyć abstrakcję która będzie odpowiedzialna za jedną i tylko jedną rzecz. Musielibyśmy naprawdę się napracować by móc zrobić więcej niż jedną rzecz na raz. Zresztą flow nasz sam w sobie wspomaga rozdzielenie odpowiedzialności:

.pipe(do1)
.pipe(do2)
.pipe(do3)
.pipe(save)

Gulp wykorzystuje strumienie z node, więc jeżeli chcecie poznać dokładniej na jakiej zasadzie one działają zachęcam do zapoznania się z podręcznikiem dostępnym na github jak i dokumentacją node, dotyczącą strumieni.

Jak widzicie już na samym początku jest znacząca różnica pomiędzy gruntem a gulpem. Grunt który bazuje na konfiguracji (wszystko jest zdefiniowane globalnie, a potem wykorzystywane jako klocki przeważnie wymagające pośrednich kroków czy też folderów tymczasowych), i gulp bazujący na strumieniach, gdzie flow jest od góry w dół bez "pośredników".

Do tego, gulp stricte wykorzystuje to co daje nam node, czyli do częśći rzeczy nie potrzebujemy w ogóle pluginów (np.: usuwanie plików/folderów). Wystarczy, że wciągniemy bibliotekę noda.

Dlatego też API gulpa jest banalnie proste. Zawiera zaledwie 4 metody:

• gulp.task – definiuje byt do którego możemy się odwołać z command line, ogólnie grupuje operację na strumieniach pod określoną nazwą.
• gulp.watch – odpala określoną funkcję jak tylko zmienią się pliki
• gulp.src – zwraca strumień tylko do odczytu który potem może być wykorzystany przez .pipe
• gulp.dest – zwraca strumień z możliwości jego zapisania, dokładnie mówiąc wszystkie pliki które trafią na to, zostaną zapisane.

Jak widać, dużo nauki nie ma. Oczywiście każda z funkcji przyjmuje różny set parametrów do przeczytania w dokumentacji. Warto przeczytać sekcję o asynchronizacji zadań – gdyż to jest pierwsza rzecz która pewnie wam będzie sprawiać problem ze względu na:

Note: The tasks will run in parallel (all at once), so don’t assume that the tasks will start/finish in order.

W sekcji o asynchronizacji, znajdziecie jeden z możliwych sposobów rozwiązania tego feature.

Mając podstawową wiedzę na temat metod jak i tego jak działa gulp możemy się domyśleć, że przeważnie nasz kod będzie wyglądał mniej więcej tak (pseudocode):

gulp.task task_name
   return gulp.src file_lists
      .pipe do_one_thing
      .pipe do_another_thing
      .pipe gulp.dest folder_name;

Przykład prawdziwy (obcięty do taska wyłącznie):

gulp.task('default', function() {
  return gulp.src('foo.js')
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('build/'));
});

Sądzę, że przykład jest samo opisujący się :) ale na wszelki wypadek:

Weź plik foo.js i go z minifikuj, następnie dodaj do niego rozszerzenie .min.js i zapisz w katalogu build.

Proste? Kurcze aż przyjemnie się to czyta :)

To tyle na dzisiaj, jeszcze tylko informacja gdzie warto szukać przykładowych plików gulpfile.js.

Jednym z takich miejsc są przepisy dostępne na github które pokazują jak wykorzystać gulp w określonej sytuacji w tym także jak odpalać taski seryjnie a nie konkurencyjnie.

Innym sposobem jest wyszukiwanie w github gulpfile.js czy też przeglądanie popularnych bibliotek JavaScript (przeważnie mają one i grunta i gulpa) czy też po prostu przejrzenie listy projektów które zostały zgłoszone przez użytkowników github. Ogólnie tego jest naprawdę dużo, wystarczy tylko poszukać :)

Do następnego razu, gdzie napiszemy krótki skrypt dla aplikacji webowej.