Siema! W tym tygodniu chciałbym zaprezentować Wam mój nowy projekt open source dla programistów front-endowych automatyzujący pracę przy arkuszach stylów i plikach JavaScriptu — gulp-starter.
Pomysł
Rozpoczynając pracę nad nowym motywem dla bloga oraz tworząc CV dla dziewczyny w HTML-u i CSS-ie (więcej informacji o tym wkrótce) automatyzowałem kompilację i optymalizację arkuszy i skryptów. Za każdym razem sięgałem do internetu po poradnik jakie pakiety gulpa zainstalować, by pomóc sobie w programowaniu. Nadszedł jednak czas, w którym postanowiłem stworzyć własną templatkę, dzięki której oszczędzam czas i zasoby, i wypuściłem ją publicznie na swoim GitHubie jako open source.
Jak to działa?
gulp-starter jest napędzany przez Node.js, npm oraz gulpa. Po wykonaniu forka repozytorium startera i instalacji pakietów Node’a gulp jest gotowy do użytkowania. Podstawowe elementy tej konfiguracji to:
- Kompilator SASS
- Minimalizacja CSS
- Łączenie (concat) plików JS
- JSHint (dla ES6)
- Optymalizacja obrazów
Błędy
Zdaję sobie sprawę, że ten zestaw nie jest idealny, o czym świadczy chociażby sekcja Q&A w pliku README. Ponieważ człowiek uczy się na błędach, będę się starał udoskonalić tę konfigurację i wyeliminować problemy, które zauważyłem w trakcie testów.
Plany na przyszłość
Oprócz wspomnianego wyżej procesu udoskonalania startera, zamierzam również przygotować wersję opartą na grunt.js. Będzie to idealna okazja na porównanie obu task runnerów w akcji i wybranie tego lepszego do dalszej pracy z projektami.
Zachęcam Was do zajrzenia na repozytorium projektu. Jeśli na sali znajduje się człowiek, który wie co dolega mojemu gulpfile.js i chce pomóc, to zapraszam i zachęcam do robienia pull requestów i/lub kontaktu ze mną w wiadomości prywatnej 🙂
Jeżeli spodobał Ci się powyższy wpis, chcesz podzielić się z innymi swoimi przemyśleniami lub masz jakąś uwagę – udostępnij wpis i zostaw komentarz poniżej. Możesz też przeczytać jeden z polecanych wpisów. Dzięki, że tutaj jesteś ❤️
Hi, Wojtek, thanks for your cool example! How do you like an idea of using gulp and webpack together?
Here example – https://github.com/wwwebman/gulp-webpack-starter
Have you any idea how to implement html linter or how to integrate such „starters” for backend?
Hi Dmitry!
Currently I don’t plan using gulp and webpack together. Thanks for your example, will see it in free time 🙂
Asking your second question – sorry, I don’t know.