Gulp

Miało być o IoC I Faktorce budującej sekcje, jednak właśnie skończyłem pracę nad “kompilatorem” do frontendu i to właśnie o Gulpie będzie dzisiejszy post.

Wspominałem wcześniej, że chcę budować frontend aplikacji poprzez jakiś kompilator. Po zrobieniu researchu stwierdziłem, że Gulp będzie dobrym wyborem. Czym zatem jest Gulp? Można powiedzieć, że jest to task runner. Idea jest prosta, tworzysz sobie task, podajesz pliki źródłowe. Podłączasz do taska pluginy, które zrobią coś z Twoimi wejściowymi plikami. Każdy z nich zostanie wywołany w kolejności, w której został dodany. Na końcu podajemy plik wyjściowy, w którym otrzymamy efekt działania pluginów na plikach wejściowych. Tylko tyle i aż tyle. Gulp ma bardzo rozbudowaną bazę pluginów. Do bardzo wielu różnych zastosowań.

Obecna ich lista znajduje się tu: http://gulpjs.com/plugins/

W moim przypadku, wykorzystuję Gulpa do:

• Skompilowania stylów, które są w Sass-ie do css i jeśli jest to produkcyjny build także minifikację.  
• Skompilowania skryptów które będą w ES6 na JavaScript, który rozumieją obecne przeglądarki za pomocą babela, w devowym buildzie dodanie source mapy dla ułatwienia debuggowania, a na produkcyjny minifikację.
• Skopiowanie fontów do folderu z assetami (korzystam z font awesome) 

Przykładowy Task w Gulpie:

    gulp.task('sassprod', ['fonts'], function () {
    return gulp.src(scss.in) //pliki wejsciowe
        .pipe(sass(scss.sassOpts))  //skompiluj sassy
        .pipe(cssnano()) //minifikuj 
        .pipe(gulp.dest(scss.out)); //wyjsciowy plik
});

Jak widać, samo zrozumienie i używanie Gulpa jest proste. Zwłaszcza, jeśli ktoś ma jakieś doświadczenie np. w używaniu Power Shella lub Basha, w którym w podobny sposób możemy działać na plikach/obiektach. Problematyczne (przynajmniej dla mnie) jest jednak znalezienie wśród tych wszystkich pluginów te, które są potrzebne w projekcie. Spędziłem sporo czasu skanując sieć w poszukiwaniu różnych przykładów użycia Gulpa, aby znaleźć te pluginy, które mi się przydadzą. Czy znasz może jakieś ciekawe pluginy, które powinienem przetestować? Jeśli tak, podziel się tym w komentarzach, chętnie zerknę :).

Linki do stronek wyjaśniających jak działa Gulp i przykładowe użycia z których między innymi czerpałem wiedzę:

1. Rodzime podwórko

• http://www.merixstudio.pl/blog/gulpjs-co-jest-i-z-czym-sie-je/
• https://blog.gutek.pl/2014/06/23/co-to-jest-gulp-js-czesc-1/
• https://blog.gutek.pl/2016/02/15/co-to-jest-gulp-js-czesc-2/
• https://blog.gutek.pl/2016/02/22/co-to-jest-gulp-js-czesc-3/

2. Po angielsku

• https://css-tricks.com/gulp-for-beginners/

To tyle na dziś, ja tymczasem wracam do rozwoju projektu, do następnego razu! :)