Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Generator projektów Yeoman – jaram się!

4

Hej! W związku z tym, że jestem „obłożnie” chory i przebywam w domu na L4 to dziś temat trochę lżejszy i mniej techniczny – nie mam siły na wymyślanie przykładów… 😉 Dlatego też, postanowiłem przedstawić Wam super narzędzie, o którym wcześniej nie słyszałem, a na które natknęła się ostatnio koleżanka pracująca ze mną w projekcie, poszukując odpowiedniego frameworka do „routingu” po stronie klienta. Zresztą mniejsza o powody, ważne że dzięki temu dowiedzieliśmy się czym jest generator projektów Yeoman. Jego stronę domową można znaleźć pod tym adresem.

Czym jest generator projektów Yeoman?

Generalnie tego czym jest Yeoman możemy dowiedzieć się na stronie głównej projektu:

„Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.”

Czyli reasumując, Yeoman pozwala nam na generowanie różnego rodzaju projektów, a konkretnie utworzenie struktury katalogów zgodnie z najlepszymi praktykami, wstępne utworzenie niezbędnych plików, a także zainstalowanie niezbędnych zależności – na przykład tworząc projekt AngularJS może zostać od razu zainstalowany Bootstrap, Less itp. itd. Dzięki temu od razu na starcie mamy utworzony stos narzędzi niezbędnych do pracy z danym projektem. Zresztą jak to dokładnie wygląda dowiecie się za chwilę.

Na początek jednak zaznaczę, że narzędzie to służy głównie do generowania projektów webowych tudzież „node-dżej-esowych”. Dlatego też, aby w ogóle zacząć należy zainstalować sobie na komputerze manager pakietów NPM. Nie będę tutaj przytaczać jak to zrobić – możecie to sprawdzić w jednym z wielu poradników na ten temat.

Jak zacząć?

Ok, jeśli NPM jest już zainstalowany możemy przejść do instalacji niezbędnych składników. Ogólnie rzecz ujmując, Yeoman oparty jest na trzech składnikach:

  • yo czyli narzędzie Yeoman generujące projekt na podstawie generatora
  • bower – menadżer pakietów
  • grunt lub gulp – narzędzie do buildowania

Co to dokładnie jest bower oraz grunt, pisał kiedyś Gutek na swoim blogu – jeśli nie znasz tych konceptów zachęcam do zapoznania się z nimi w poniższych wpisach:

Aby więc móc generować projekty, musimy to wszystko zainstalować za pomocą NPM. Robimy to zgodnie z instrukcjami na stronie yeoman.io (oczywiście poniższe polecenie wpisujemy w konsoli):

npm install -g yo bower grunt-cli gulp

Teraz możemy już przejść do wygenerowania jakiegoś projektu.

Generujemy projekt za pomocą Yeomana

Aby wygenerować projekt, musimy jeszcze za pomocą NPM zainstalować specjalny generator projektu. Jest to specjalny pakiet Yeomana, który zawiera wszystkie niezbędne informacje na temat danego projektu. Lista wszystkich dostępnych obecnie generatorów dostępna jest pod tym linkiem – nic nie stoi jednak na przeszkodzie abyśmy sami stworzyli swój własny generator.

Ja postanowiłem pokazać Wam możliwości na podstawie generatora generator-gulp-ng, który tworzy projekt AngularJS ze strukturą katalogów zgodną z najlepszymi praktykami, o których pisałem w jednym z ostatnich wpisów. Zainstalujmy go więc:

npm install -g generator-gulp-ng

Ok, generator zainstalowany. Teraz wystarczy utworzyć katalog na projekt, wejść do niego i skorzystać z narzędzia yo, które wcześniej zainstalowaliśmy do wygenerowania projektu:

yo gulp-ng

Niektóre generatory mogą po drodze pytać o to jakie pakiety zainstalować itp. W tym przypadku jednak nic takiego nie ma miejsca – generator wszystkie decyzje podejmuje za nas (pewnie dlatego, że jest dość prosty i praktycznienic poza angularem nie instaluje). W efekcie wykonania powyższego polecenia uzyskujemy taką oto zawartość katalogu projektu:

Projekt wygenerowany przez Yeomana

Moim zdaniem super sprawa! Szczególnie jeśli nie wiesz jak zacząć pracę z jakimś frameworkiem lub ich zestawem – na pewno znajdzie się odpowiedni generator wśród 1385 dostępnych na tę chwilę! Nam w projekcie bardzo przydał się na przykład generator wykorzystujący frameworki KnockoutJS oraz Crossroads.

Podsumowanie

Nie wiem jak Wy ale ja uważam, że generator projektów Yeoman jest zajebistym narzędziem – jaram się! Od dawna już noszę się z zamiarem dogłębnego poznania node.js i wszystkich aspektów z tym związanych. Wydaje mi się, że Yeoman bardzo mi to ułatwi bo szczerze mówiąc nie do końca jeszcze potrafiłem sobie wyobrazić jak zacząć pracę w tym środowisku. Zachęcam więc wszystkich do zapoznania się z Yeomanem bo moim zdaniem na prawdę może się przydać! 😉

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!

  • Mario

    Dobre 🙂 trzeba się pobawić

  • Fajny tekst. Mi akurat spasował generator-gulp-angular w którym fajnie zorganizowano skrypt gulp’a.

  • Jacek

    A ja ostatnio zakochałem się w generator-angular-fullstack (fork generator-angular od Yeoman), który pomaga utrzymać płaską strukturę i się nie pogubić 😉

  • Ziomek

    W tej książce co czytasz też jest o Yeomanie.