automatyzacja pracy - generator yeoman front-end sass

Automatyzacja pracy front-end developera to złożona sprawa. W społeczności Developerów zajmujących się front-end’em jest znanych wiele popularnych generatorów Yeoman. Cenie sobie wiele z nich jak np. Webapp generator, Angular generator i używam ich w niektórych swoich projektach. Czasem jednak potrzebuję czegoś prostszego i szybszego, dlatego napisałem swój własny generator, który spełnia podstawowe potrzeby fromt-end develoepra takie jak chociażby kompilacja plików sass i serwer lokalny. W tym artykule przedstawię Ci podstawowe funkcje mojego generatora.

Wstęp

Jeśli w ogóle nie masz pojęcia co to jest generator yeoman i task runner grunt to postaram Ci się to teraz pokrótce wyjaśnić. Jeśli znasz i korzystasz możesz śmiało przejść do następnej sekcji

Yeoman jest to narzędzie napisane w Node.js, które służy do generowania generatorów (sic!) Za pomocą Yeomana możemy napisać generator, który stworzy dla nas bazowe pliki projektu takie jakie tylko chcemy. Dzięki takiemu generatorowi możemy za pomocą kilku komend w konsoli wygenerować projekt gotowy do pracy. Bardziej rozbudowane generatory mają też funkcjonalności ułatwiające prace nad projektem np. angular-generator obsługuje tworzenie bazowych plików kontrolerów, dyrektyw, usług etc. za pomocą jednej komendy w konsoli.

Task runner jest to narzędzie za pomocą, którego możemy realizować różne zadania jak np.

  • kompilacja sass do css
  • sprawdzanie plików JS linterem
  • sprawdzanie walidacji html
  • optymalizacja obrazków
  • wiele, wiele innych — co tylko dusza zapragnie

Task runner – GruntJS

Był taki okres, że grunt nie był prawie rozwijany, ale w listopadzie 2015 ukazały się dobre wiadomości – grunt stał się częścią jQuery Foundation co pozwala optymistycznie patrzeć w przyszłość z nadzieją, że ten fantastyczny task runner będzie dalej rozwijany.

Serwer lokalny – BrowserSync

Do uruchamiania projektu na localhost użyłem pluginu BrowserSync. Serwer lokalny jest dostępny w całej sieci lokalnej, a nie tylko na komupterze na którym pracujesz. Dodatkowo jeśli otworzymy strony w różnych przeglądarkach/urządzeniach to te strony będą zsynchronizowane. Scrollowanie w jednym oknie scrolluje też stronę w innym otwartym oknie. Oczywiście serwer lokalny automatycznie przeładowuje stronę po zmianie w plikach projektu (live reload).
Więcej na temat BrowserSync można poczytać tutaj

Sass i autoprefixer

Do kompilowania plików Sass używam libsasa, który jest bardziej wydajny od ruby sass. Ma to znaczenie szczególnie w dużych projektach, gdzie pliki sass’a są bardzo rozbudowane. Można zyskać nawet kilka sekund na każdej kompilacji.
Libsass ma też swoje wady – nie obsługuje compassa — najpopularniejszego frameworka sass’owego. Postanowiłem porzucić korzystanie z compassa, ponieważ używałem go tylko do prefixowania stylów i do generowania sprites.

Do generowania sprites można użyć dodatkowego pluginu grunt. Ta funkcjonalność będzie wprowadzona w kolejnej wersji generatora.

Jeśli chodzi o prefixowanie stylów to zamiast compassa użyłem css autoprefixer. Ma on tą zaletę, że możemy ustawić dla ilu przeglądarek wstecz chcemy robić prefixy. Poza tym dodałem opcję minifikacji plików css

Sprawdzanie plików js, scss i html

Kolejną bardzo przydatną funkcjonalnością jest lintowanie js’a, css’a i walidacja plików html. Automatyzacja tych czynności to spora oszczędność czasu. Poza tym Twój kod zawsze będzie trzymał poziom!

Instalacja pakietów przez bower’a

Generator obsługuje managera pakietów bower, dzięki czemu możemy za pomocą konsoli szybko zainstalować niezbędne biblioteki. Zależności są automatycznie wstrzykiwane do html dzięki pluginowi grunt wiredep

Tworzenie dokumentacji

Dzięki sassdoc i jsdoc stworzysz czytelną dokumentację sass’a i js’a, która jest generowana na podstawie komentarzy w plikach źródłowych. Więcej o dokumentowaniu kodu za pomocą tych narzędzi przeczytasz na ich stronach.

http://sassdoc.com
http://usejsdoc.org

Jak korzystać?

Instalacja

Aby korzystać z generatora trzeba mieć zainstalowanego node i yeomana. Jeśli jeszcze ich nie masz zajrzyj tutaj:
https://nodejs.org/en

i tutaj:

http://yeoman.io/learning/index.html

Gdy już będziesz miał node i yeomana wpisz w konsoli:

Generowanie projektu

Aby wygenerować bazowe pliki projektu wpisz w konsoli

Aby rozpocząć pracę nad projektem wpisz w konsoli

Aby zbudować finalne pliki projektu wpisz

Podsumowanie

Mam nadzieję, że zachęciłem Cię do korzystania z mojego generatora. Zapraszam do wyrażania swojej opinii w komentarzach. Na sam koniec chciałem jeszcze dodać, ze generator będzie dalej rozwijany. Poniżej lista planowanych funkcjonalności:

  • Obsługa require.js
  • Obsługa testów wydajności Google pageSpeed
  • Obsługa testów jednostkowych
  • Obsługa testów funkcjonalności (casper.js)
  • Obsługa ES6 poprzez Babel.js lub typescript
  • Automatyzacja generowania sprites
  • Optymalizacja obrazków

Github

Będę wdzięczny za każdą gwiazdkę na githubie 😉
https://github.com/frodigo/front-end-generator

Share on FacebookTweet about this on TwitterShare on LinkedIn