Is there a way to use gulp-typescript to generate both map and declaration files during one compilation task?

I am using gulp-typescript to transpile my TypeScript code to JavaScript. Essentially, I want for one *.ts file, for there to be corresponding *.js, *.d.ts and *.map files generated.

In the compile task, I have noticed that I can only transpile with declaration or transpile with map but not both at the same time. For example, having 1 compile task that attempts to generate both declaration + map files (with the JavaScript files) like the following does not work. The following will generate the JavaScript + map files, but not the declaration files.

var tsc = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = tsc.createProject('tsconfig.json');

gulp.task('compile', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});

My tsconfig.json looks like the following.

{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es6",
        "module": "commonjs",
        "alwaysStrict": true,
        "diagnostics": false,
        "listEmittedFiles": false,
        "listFiles": false,
        "pretty": true,
        "declaration": true
    }
}

To work around this problem, for now, I have to create 3 gulp tasks:

• one to create the declarations,
• one to create the mapping, and
• one to call on the previous two.

This option works, but is not desired, or best practice, as now I have to compile twice just to get the desired outputs.

My 3 gulp tasks look like the following. Note how I have made tsProject local to the functions now (keeping it global, the gulp task fails).

gulp.task('compile:with:dts', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  return gulp.src(['src/**/*.ts'])
    .pipe(tsProject())
    .pipe(gulp.dest('./dist/src'));
});

gulp.task('compile:with:maps', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});

gulp.task('compile', ['compile:with:dts', 'compile:with:maps']);

You have two streams in your example:

• tsResult which contains the typings files
• tsResult.js which contains the transpiled JavaScript files

All you have to do is merge them into one stream using merge-stream:

var tsc = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var merge = require('merge-stream');

gulp.task('compile', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return merge(tsResult, tsResult.js)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});