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"
}
}
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));