Na początku roku obiecałem, że stworzę jedną grę na miesiąc i dotrzymam słowa (no średnio jedną na miesiąc) :). Maja zostało mi niewiele ale myślę, że jeżeli się zepnę, to uda się w te parę dni napisać ciekawą gierkę.
Ostatnio wszystkie moje projekty to gry i w sumie nic dziwnego, bo bardzo interesuje mnie ten temat. Jednak nie chcę być monotematyczny, więc muszę wprowadzić trochę świeżości, w końcu nie samym canvasem i phaserem człowiek żyje. Dlatego tym razem, do stworzenia gry użyję Angulara 🙂 . A dziś pokaże Jak używać gulpa w projekcie angularJS.
Majowa gra będzie tekstówką/RPG. Coś na kształt klasycznych MUD-ów, ale w wersji dla jednego gracza 🙂 …i w przeglądarce.
Zanim jednak zacznę pracę nad samą grą, muszę odpowiednio przygotować środowisko. W tym celu użyję menadżera zadań – Gulp. Przyznam szczerzę, że nie mam zbyt dużego doświadczenia z tym narzędziem. Wcześniej nigdy nie konfigurowałem go sam, raczej korzystałem z gotowych rozwiązań.
Nie obyło się bez paru problemów, ale ostatecznie udało mi się skonfigurować wszystko dokładnie tak jak chciałem 🙂 . A co takiego chciałem osiągnąć? Dla mojego prostego projektu potrzebowałem zaledwie dwa taski. Pierwszy z nich to uruchamianie serwera, oraz przeładowywanie go automatycznie, gdy zmienię coś w projekcie. Drugi task miał z automatu dołączać do głównego pliku HTML wszystkie skrypty js i to w odpowiedniej kolejności, tak aby aplikacja angularowa działała jak trzeba. To zadanie również powinno wykonywać się automatycznie.
Wstępna struktura projektu wygląda w ten sposób:
|
1 2 3 4 5 6 7 8 9 |
-AngularTextRPG |-node_modules |-src |--app |---controller.js |---module.js |-gulpfile.js |-index.html |-package.json |
Główny folder projektowy nazywa się AngularTextRPG, zaraz pod nim znajduje się node_modules, którego zawartości nie będę wypisywał. Każdy kto czytał moje poprzednie wpisy o node, wie co siedzi w środku. Kolejny katalog, src, zawiera skrypty JS, które podłączane będą do głównego HTML’a. W przyszłości znajdą się tu też CSSy i ewentualnie obrazki.
Pod folderem src, bezpośrednio w folderze projektowym, znajduje się plik gulpfile.js. Jest to bardzo ważny plik, w którym definiowane są taski dla gulpa. Następne dwa pliki to strona startowa index.html oraz package.json, zawierający informacje o dodanych do projektu paczkach.
Oto zawartość najważniejszych plików. Najpierw indeks:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS Text RPG - JavaScript Noob - http://jsdn.pl/</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> <!-- inject:js --> <!-- endinject --> </head> <body ng-app="textRPG"> <div ng-controller="testController"> <h1>hello {{test}}</h1> </div> </body> </html> |
Jak widać, nie ma tu nic specjalnego. Na sztywno dołączam do pliku kod angulara oraz moduł routingowy. Element body dokumentu obejmuje angularowym modułem textRPG a poniżej dodaję div, któremu przypisany jest controller o dźwięcznej nazwie testController.
Najciekawszym fragment są tu zdecydowanie dwa komentarze znajdujące się pod skryptami z kodem angulara. Te komentarze są bardzo ważne dla gulpowego taska, który będzie do pliku indeks.html dodawał pisane przeze mnie skrypty. To właśnie między te komentarze dodawane będą nowe tagi script, odwołujące się do mojego kodu.
Obecnie w projekcie znajdują się dwa napisane przeze mnie pliki. Ich treść służy tylko testom gulpowych tasków. Oto ona:
module.js
|
1 |
angular.module('textRPG', []); |
controller.js
|
1 2 3 4 |
angular.module('textRPG') .controller('testController', function ($scope) { $scope.test = 'world!'; }); |
I tutaj treść jest bardzo prosta. Pierwszy plik to zwykła deklaracja modułu a drugi to prosty kontroler do tego modułu przypisany. Kontroler zawiera jedną zmienną dodaną do scope, którą wykorzystuję w indeksie w celu przetestowania czy całość działa.
Po co to w ogóle dzielić na pliki? W końcu to wszystko z łatwością zmieściłoby się do jednego. Nie miałbym wtedy też problemu z podłączeniem jednego pliku do HTMLa. Niby tak, ale dzielenie kodu na wiele plików to dobra praktyka, dzięki której całość jest bardziej czytelna i łatwiejsza do zarządzania. Kod bardzo szybko się rozrośnie i utrzymywanie jednego wielkiego pliku, mogłoby okazać się bardzo trudne.
Ok, skoro to wszystko jest już jasne, czas przejść do najważniejszej części tego wpisu, czyli treści pliku gulpfile.js. Oto ona:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var gulp = require('gulp'); var webserver = require('gulp-webserver'); var inject = require('gulp-inject'); var angularFilesort = require('gulp-angular-filesort'); var watch = require('gulp-watch'); gulp.task('build', function() { watch('./src/app/**/*.js', function(){ gulp.src('./index.html') .pipe(inject( gulp.src('./src/app/**/*.js') .pipe(angularFilesort()) )) .pipe(gulp.dest('./')); }) }); gulp.task('webserver', ['build'], function() { gulp.src('./') .pipe(webserver({ livereload: true, open: true })); }); gulp.task('serve', ['build', 'webserver']); |
gulpfile, jest plikiem node’owym. Będę go uruchamiał w konsoli, dlatego mogę używać dobrodziejstwa node’a, jakim jest zarządzanie modułami za pomocą require. Jak widać robię to już na samym początku. Wszystkie te moduły pobrałem przez npma i znajdują się one w katalogu node_modules. Na początku oczywiście muszę do pliku dodać moduł gulp, to na nim bazuje cała reszta. Kolejny moduł to gulp-webserver, służy on do obsługi serwera przez gulpowe taski. Dwa kolejne gulp-inject oraz gulp-angular-filesort, potrzebne mi są do dodawania plików angulara do HTMLa. Ostatni moduł gulp-watch, daje mi możliwość, uruchamiania zadań automatycznie po tym jak zawartość projektu się zmieni.
Gdy zadeklaruję już wszystkie moduły, mogę zacząć definiować taski. Aby utworzyć zadanie, należy wywołać metodę task obiektu gulp. Przyjmuje ona dwa argumenty. Pierwszy to łańcuch znaków, będący nazwą taska. Po tej nazwie, można go potem wywołać z konsoli. Drugi argument to funkcja, która zawiera treść taska.
Nie będę tu dokładnie opisywał kodu metod gulpa, zresztą treść tych zadań jest praktycznie żywcem ściągnięta z przykładów na stronie 🙂 W skrócie tylko przedstawię wynik ich działań.
Jak widać, zdefiniowałem trzy taski. Pierwszy z nich, build, obserwuje wszystkie pliki javascriptowe znajdujące się wewnątrz katalogów zawartych w projektowym podkatalogu src. Gdy tylko, któryś z nich się zmieni, task otwiera plik index.html, i wkleja (inject) do niego te same pliki, które są przed niego obserwowane. po drodze metoda angularFilesort, układa je w takiej kolejności aby miały sens dla przeglądarki. Skąd task wie, w którym miejscu w pliku html dodać tagi script, odnoszące się do obserwowanych plików JS? Ano wie o tym dzięki wspomnianym przeze mnie wcześniej komentarzom 🙂 Na koniec tak zmieniony plik html wklejany jest do roota projektu, czyli bezpośrednio do katalogu AngularTextRPG.
Treść kolejnego taska, webserver, jest bardzo prosta. Jednak po jego uruchomieniu dzieje się naprawdę sporo. Po pierwsze startuje serwer na lokalnym porcie 8000. Zawartość tego serwera to katalog zdefiniowany w tasku, w tym wypadku root projektu. Następnie uruchamiana jest domyślna przeglądarka która otwiera zawartość pliku indeks.html. Dopóki ten proces trwa, za każdym razem, gdy jakiś plik w projekcie się zmieni, serwer uruchomi się ponownie, a strona w przeglądarce odświeży się. Bez klikania 🙂 To dopiero wygoda 😛 .
Ostatni task serve, jest dość specyficzny. Zamiast funkcji, w drugim argumencie, przekazuję mu tablicę z nazwami poprzednich tasków. Dzięki temu, gdy to zadanie zostanie wywołane, uruchomi ono zadania wpisane są tablicy. Dzięki temu jednym poleceniem mogę uruchomić oba zadania.
Gdy taski są już gotowe ich wywołanie jest bardzo proste. Wystarczy, będąc w folderze, którym znajduje się plik gulpfile.js, w konsoli wpisać komendę gulp + nazwa taska. W moim wypadku będzie to gulp serve. Dwa słowa w konsoli i cała machina rusza, a ja mogę spokojnie zabrać się za tworzenie aplikacji 🙂 .
I to wszystko na dziś. Jeżeli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem 🙂 .