Web Development & Technologia

gulp-starter — open source’owy starter dla projektów front-endowych

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.

gulp-starter — widok repozytorium plików

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

gulp-starter — fragment kodu

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.

gulp-starter — sekcja Q&A pliku README

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ś ❤️

2 Comments

  1. Dmitry Chumak

    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?

    • Wojtek Wernicki

      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.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

© 2023 Wojtek Wernicki

Theme by Anders NorenUp ↑

%d bloggers like this: