[[oktatas:web:nodejs:gulp|< Gulp]]

====== Gulp és a TypeScript ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Fordítás és másolás =====

Kezdetben csak annyit szeretnék, hogy fordítsa le a .ts kiterjesztésű fájlokat 
az src könyvtáron belül, és a kész .js kiterjesztésű fájlt másolja a dist nevű könyvtárba.

Feltételezzük, hogy a gulp már telepítve van. Telepítsük a gulp-typescript bővítményt, fejlesztéshez:


<code bash>
npm install --save-dev gulp-typescript
</code>

Használat:

<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const ts = require('gulp-typescript');

function streamTS() {
    return src('src/**/*.ts')
        .pipe(ts()).js
        .pipe(dest('dist'));
}
 
exports.default = streamTS;
</code>

==== Próba ====

Írjunk az src könyvtárban egy app.ts scriptet:

<code javascript src/app.ts>
class Dolgozo {

}
</code>

Futtassuk a gulp parancsot:
  gulp

Az elkészült app.js tartalma:
<code javascript dist/app.js>
var Dolgozo = /** @class */ (function () {
    function Dolgozo() {
    }
    return Dolgozo;
}());
</code>

===== tsconfig.json figyelése =====

Most állítsuk be, hogy figyelje a tsconfig.json fájlt, ha van ilyen.

Generáljunk egy tsconfig.json fájlt:

<code bash>
tsc --init
</code>


Vegyünk fel egy tsProject objektumot:

<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');

function streamTS() {
    return src('src/**/*.ts')
        .pipe(tsProject()).js
        .pipe(dest('dist'));
}

exports.default = streamTS;
</code>

A .pipe() függvény paramétere most tsProject() és nem ts().
Így figyeli a tsconfig.json fált. Ha visszaírjuk a tsProject() helyett
a ts() függvényt, akkor nem fogja figyelembe venni a tsconfig.json fájlt. 

Most ellenőrizzük, hogy figyelembe veszi-e a tsconfig.json fájlt. 
A tsc fordító alapértelmezetten nem használja a kimeneti fájlban
a strict bejegyzést. Az automatikusan generált tsconfig.json fájlban
-- amit a tsc <nowiki>--init</nowiki> parancs generál --
be van állítva a stric használata. Ha futtatjuk a gulp parancsot
a generált dist/app.js fájlban kell legyen most már strict bejegyzés.

Legyünk biztosak abban, hogy tsconfig.json le van gyártva, majd futtassuk
a gulp parancsot:
  gulp

A dist/app.js fájl tartalma, most ilyen kell legyen:
<code javascript dist/app.js>
"use strict";
var Dolgozo = /** @class */ (function () {
    function Dolgozo() {
    }
    return Dolgozo;
}());
</code>

A tsconfig.json fájlban beállíthatjuk a es6 szabványt is az alapértelmezett es5 helyett, majd újabb fordítás után nézzük meg a generált app.js fájlt. 



===== Minimalizálással =====

Feltételezzük, hogy a gulp és a gulp-typescript már telepítve van. 
Telepítsük a gulp-uglify és a gulp-rename bővítményeket:

<code bash>
npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename
</code>

Használat:

<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');

const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

function streamTS() {
    return src('src/**/*.ts')
        .pipe(tsProject()).js
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(dest('dist'));
}

exports.default = streamTS;
</code>

===== ts alkönyvtárban =====

<code>
npm install --save-dev gulp
npm install --save-dev gulp-typescript
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify
</code>



<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const ts = require('gulp-typescript');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');


function streamTS() {
    return src("src/**/*.ts")
    .pipe(ts()).js
    .pipe(uglify())
    .pipe(rename({dirname: 'js', extname: '.min.js'}))
    .pipe(dest('public'));
}

exports.default = streamTS;

</code>

===== Forrás =====
  * https://www.npmjs.com/package/gulp-typescript (2021)
  * https://www.typescriptlang.org/docs/handbook/gulp.html (2021)