有没有办法在一次编译任务中使用 gulp-typescript 生成映射文件和声明文件？

Question

我正在使用 gulp-typescript 将我的 TypeScript 代码转换为 JavaScript。本质上，我想要一个 *.ts 文件，因为会生成相应的 *.js、*.d.ts 和 *.map 文件。

在编译任务中，我注意到我只能使用声明转译或使用映射转译，但不能同时转译。例如，有 1 个编译任务尝试生成声明 + 映射文件（带有 JavaScript 文件），如下所示不起作用。以下将生成 JavaScript + 映射文件，但不会生成声明文件。

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

我的 tsconfig.json 如下所示。

{
    "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
    }
}

要解决这个问题，现在，我必须创建 3 个 gulp 任务：

一个创建声明，
一个创建映射，
一个要拜访前两个。

此选项有效，但不是所需的，也不是最佳实践，因为现在我必须编译两次才能获得所需的输出。

我的 3 gulp 任务如下所示。请注意我现在是如何将 tsProject 设为函数的局部变量（保持全局，gulp 任务失败）。

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

Answer 1

您的示例中有两个流：

tsResult 其中包含打字文件
tsResult.js 其中包含转译的 JavaScript 文件

您所要做的就是使用 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'));
});

Answer 2

我建议采用这种方法：

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

参见：

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

有没有办法在一次编译任务中使用 gulp-typescript 生成映射文件和声明文件？

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

typescript

gulp

tsconfig

gulp-sourcemaps

gulp-typescript