Есть ли способ использовать gulp-typescript для создания файлов карты и объявлений во время одной задачи компиляции?

Я использую gulp-typescript для переноса моего кода TypeScript в JavaScript. По сути, я хочу, чтобы для одного файла *.ts были созданы соответствующие файлы *.js, *.d.ts и *.map.

В задаче компиляции я заметил, что могу транспилировать только с объявлением или транспилировать с картой, но не оба одновременно. Например, наличие 1 задачи компиляции, которая пытается сгенерировать файлы декларации и карты (с файлами JavaScript), как показано ниже, не работает. Следующее будет генерировать файлы JavaScript + map, но не файлы объявлений.

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

typescript gulp tsconfig gulp-typescript gulp-sourcemaps
person Jane Wayne    schedule 11.01.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

В вашем примере есть два потока:

  • 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'));
});
person Sven Schoenung    schedule 11.01.2017
comment
tsResult содержит оба набора файлов. tsResult.js только файлы js, tsResult.dts только файлы dts. - person MarkHasper; 19.06.2017

arrow_upward
0
arrow_downward

Я предлагаю такой подход:

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

person Mir-Ismaili    schedule 05.05.2019