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

Question

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']);

score 6 · Accepted Answer · answered Jan 11 '17 at 07:13

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

`tsResult` contains both sets of files. `tsResult.js` just the js files, `tsResult.dts` just the dts files. — MarkHasper, Jun 19 '17 at 06:54

score 0 · Answer 2 · answered May 05 '19 at 18:48

I suggest this approach:

const gulp = require("gulp")
const ts = require("gulp-typescript")
const sourcemaps = require('gulp-sourcemaps')
const tsProject = ts.createProject("tsconfig.json")
const merge = require('merge2')

gulp.task("compile", () => {
    const tsResult = 
            tsProject.src()  // OR: gulp.src(['src/**/*.ts'])
            .pipe(sourcemaps.init())
            .pipe(tsProject())

    return merge([
        tsResult.dts.pipe(gulp.dest('dist/types')),
        tsResult.js.pipe(sourcemaps.write('.')).pipe(gulp.dest('dist'))
    ]);
})

See:

https://github.com/ivogabe/gulp-typescript#basic-usage

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

2 Answers2