Jedną z pierwszych rzeczy, którą muszę dodać do mojego projektu jest jakiś build system. Przyda mi się on nie tylko do kompilowania kodu TSowego ale także do uruchomiania takich zadań jak bundlowanie, lintowanie czy testowanie kodu.
Oczywiście mój wybór padł od razu na gulpa, ale pisanie zadań używając podstawowego JSa, wydawało się trochę dziwne w projekcie w całości opartym na TypeScript. Szperając w sieci natrafiłem na bardzo ciekawe narzędzie: gulpclass.Jest to moduł, który pozwala na pisanie glupowych tasków w TypeScript 🙂 .
Aby dodać gulpclass do projektu wystarczy zainstalować je z npma:
1 |
npm install gulpclass --save-dev |
Gdy instalacja będzie gotowa, trzeba jeszcze tylko pobrać odpowiednie definicje typów za pomocą narzędzia typings i tyle, można zacząć pisać taski przy użyciu TypeScript.
Pliki z zadaniami można nazywać w dowolny sposób, ale aby uniknąć problemów nie używaj nazwy gulpfile.ts. Może się to wydawać logicznym wyborem, ale podczas kompilacji, zostanie on zamienione na gulpfile.js i nadpisze istniejący plik o tej nazwie, a jest on wciąż potrzebny.
Uruchomianie gulpa z linii komend zawsze powoduje, że uruchomiony zostanie gulpfile.js, aby odpalił on nasze TypeScriptowe zadania, trzeba go troszkę „zhakować”. Projektowy gulpfile musi zawierać taką treść:
1 |
eval(require("typescript").transpile(require("fs").readFileSync("./ŚcieżkaDoTwojego/PlikuzZadaniamiTS.ts").toString())); |
W ten sposób zadania TSowe zostaną skompilowane i odpalone w czasie rzeczywistym przez task runnera. Oczywiście aby to wszystko działało w projekcie musi być zainstalowany moduł TypeScript.
Tak wygląda obecna wersja mojego gulpclass.ts:
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 26 27 28 29 30 31 32 33 34 35 36 |
import {Gulpclass, Task, SequenceTask} from "gulpclass/Decorators"; let gulp = require('gulp'); let del = require('del'); let path = require('path'); let ts = require('gulp-typescript'); let sourcemaps = require('gulp-sourcemaps'); @Gulpclass() export class Gulpfile { @Task("clean") clean(cb: Function) { return del(["./dist/**"], cb); } @Task("build:server") buildServer() { var tsProject = ts.createProject( path.resolve('./server/tsconfig.json') ); var tsResult = gulp.src(['./server/**/*.ts']) .pipe(sourcemaps.init()) .pipe(ts(tsProject)); return tsResult.js .pipe(sourcemaps.write()) .pipe(gulp.dest( path.resolve('./dist/server') )); } @SequenceTask() default() { return ['clean', 'build:server']; } } |
Teraz zawartość gulpfile zawiera się w jednej przejrzystej klasie, a same deklaruje się są za pomocą dekoratorów.
Dekorator Task, pozwala nam na stworzenie (niespodzianka) taska. Zdecydowanie jest to taki, którego będzie się używać najczęściej. Jak widać, ja w swoim gulpfile mam póki co dwa proste taski, build oraz clean. Pierwszy kompiluje pliki serwerowe i przenosi je do odpowiedniego folderu, a drugi usuwa folder wynikowy.
Nie są to specjalnie skompikowane taski 🙂 gulp zdecydowanie bardziej przyda się gdy zacznę tworzyć frontend 🙂
Drugim dekoratorem którego używam jest SequenceTask. Metoda, która go używa zwraca tablicę łańcuchów znaków. Stringi te to nic innego jak nazwy tasków, które zostaną uruchomione sekwencyjnie w takiej kolejności w jakiej występują w tablicy.
Dodatkowo, ponieważ ostania metoda ma nazwę default, ten task będzie uruchamiany domyślnie w moim projekcie. Odpalenie gulpa, najpierw spowoduje usunięcie folderu dist, a następnie skompilowanie kodu TSowego na JavaScript i umieszczenie go w nowej instancji dist.
Na dziś to tyle. Jak zwykle zachęcam do polubienia mojej strony na facebooku. Dzięki temu na pewno nie przegapisz żadnego posta. Zawsze na bieżąco zamieszczam tam informacje o nowościach.