Tartalomjegyzék

< Gulp

Gulp és a TypeScript

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: 

npm install --save-dev gulp-typescript

Használat:

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;

Próba

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

src/app.ts
class Dolgozo {
 
}

Futtassuk a gulp parancsot: 

gulp

Az elkészült app.js tartalma:

dist/app.js
var Dolgozo = /** @class */ (function () {
    function Dolgozo() {
    }
    return Dolgozo;
}());

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: 

tsc --init

Vegyünk fel egy tsProject objektumot:

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;

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 --init 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:

dist/app.js
"use strict";
var Dolgozo = /** @class */ (function () {
    function Dolgozo() {
    }
    return Dolgozo;
}());

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: 

npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename

Használat:

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;

ts alkönyvtárban

npm install --save-dev gulp
npm install --save-dev gulp-typescript
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify
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;

Forrás