Dienstag, 12. September 2017

use gulp as task runner for a Typescript project

First we switch to yarn to avoid problems with npm. So a last npm call will enable the successor:

 npm install -g yarn

Next is to install Gulp command line interface locally. I don't use global to get consistent project behaviour. Additionally typescript and typescript support is installed.

 yarn init
 yarn add typescript gulp-cli gulp-typescript --dev

create files and directories
 mkdir src
 mkdir dist

./gulpfile.js
var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default"function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("dist"));
});

./package.json
{
    "name""typescript-test",
    "version""1.0.0",
    "description""a typescript with gulp test projet",
    "main""gulpfile.js",
    "dependencies": {},
    "devDependencies": {
        "gulp-cli""^1.4.0",
        "gulp-typescript""^3.2.1",
        "typescript""^2.4.2"
    },
    "scripts": {
        "test""echo \"Error: no test specified\" && exit 1"
    },
    "author""kuntergunt"
}

./tsconfig.json
{
    "files": [
        "src/test.ts"
    ],
    "compilerOptions": {
        "noImplicitAny"true,
        "target""es5"
    }
}

./src/test.ts
function hello(compilerstring) {
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");



Now build the javascript from typescript and run it

gulp
node dist/test.js