typescriptgulpvisual-studio-codetsconfiggulp-typescript

No output with gulp-typescript


I have two tasks in my tasks.json file, a build-task and a gulp task that uses gulp-typescript. The latter won't work, and I really don't understand why. They're both using the same tsconfig.json file.

The gulp-task ("tsc"), executes without errors, but does not generate the src/test.js file (outFile). I can't find it elsewhere in the folder-tree, either. The build task generates the file, tho.

Is there some version mismatch between typescript and gulp-typescript? There has been so many changes and Googling the "correct" way is very hard.

I was hoping gulp-typescript was just a transparent layer around typescript. Obviously, its not (it seems to have its own way of generating sourcemaps, etcetera. Some tsconfig.json settings seems to be ignored by gulp-typescript).

tasks.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "taskName": "tsc",
            "command": "gulp.cmd",
            "args": ["tsc"]
        }
    ]
}

gulpfile.js:

var gulp = require('gulp'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'), 
    uglify = require('gulp-uglify'),
    notify = require('gulp-notify'),
    concat = require('gulp-concat'),
    template = require('gulp-angular-templatecache'),
    htmlminifier = require('gulp-html-minify'),
    chmod = require('gulp-chmod'),
    cachebust = require('gulp-cache-bust'),
    runSequence = require('run-sequence'),
    tsc = require("gulp-typescript"),
    webserver = require('gulp-webserver'),
    flatten = require('gulp-flatten'),
    gutil = require('gulp-util'),
    gulpif = require('gulp-if'),
    debug = require('gulp-debug'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    argv = require("yargs").argv;
...
let compileTypescript = function() {
    var tsProject = tsc.createProject("tsconfig.json");

    var tsResult =
        tsProject
            .src()
            .pipe(sourcemaps.init())
            .pipe(tsProject());

    return
        tsResult.js
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('src'));
};

gulp.task('tsc', compileTypescript);

tsconfig.json:

    {

      "compileOnSave": false,
      "compilerOptions": {
        "target": "es5",
        "allowJs": false,
        "noImplicitUseStrict": true,
        "rootDir": "./src",
        "noEmitOnError": true,
        "module": "none",
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "outFile": "src/test.js",
        "removeComments": true,
        "skipLibCheck": true,
        "allowUnreachableCode": false,
        "allowSyntheticDefaultImports": false,
        "allowUnusedLabels": false,
        "sourceMap": true,
        "declaration": false
      },
      "exclude": [
        "node_modules",
        "dist",
        "src/scripts/typings/node",
        "src/scripts/typings/jasmine",
        "src/**/*.js",
        "src/**/__*.*"
      ]
    }

package.json:

{
  "name": "Test",
  "author": {
    "name": "Test Company",
    "email": "test@test.com",
    "url": "http://test.com/"
  },
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-connect":"5.0.0",
    "gulp-angular-templatecache": "2.0.0",
    "gulp-chmod": "2.0.0",
    "gulp-concat": "2.6.1",
    "gulp-flatten": "0.3.1",
    "gulp-html-minify": "^0.0.14",
    "gulp-debug":"3.1.0",
    "gulp-inject": "4.2.0",
    "gulp-less": "3.3.2",
    "gulp-rename":"1.2.2",
    "gulp-notify": "3.0.0",
    "gulp-plumber": "1.1.0",
    "gulp-rimraf": "0.2.1",
    "gulp-sourcemaps": "2.6.0",
    "gulp-tslint": "8.1.1",
    "gulp-typescript": "^3.2.1",
    "gulp-uglify": "3.0.0",
    "gulp-using": "0.1.1",
    "gulp-util": "3.0.8",
    "webpack-stream":"3.2.0",
    "gulp-if":"2.0.2",
    "gulp-watch": "4.3.11",
    "gulp-cache-bust": "1.1.0",
    "gulp-webserver": "0.9.1",
    "run-sequence":"2.1.0",
    "yargs": "8.0.2",
    "stream-combiner2": "1.1.1",
    "typescript": "2.4.2",
    "tslint":"5.5.0"
  }
}

Solution

  • For other Javascript newbies like me out there, don't manually "beautify" code with extra line-breaks, especially not at return statements;

    Turned out that my gulp-typescript task didn't execute the pipe because of that. Took me almost two days to figure out. Doh.

    Do:

    return tsResult.js
           .pipe(sourcemaps.write())
           .pipe(gulp.dest(project.source.path));
    

    Instead of:

    return 
         tsResult.js
           .pipe(sourcemaps.write())
           .pipe(gulp.dest(project.source.path));