javascript - 将 tsconfig.json 属性添加到 Gulp 任务

我一直在收到关于在编译时使用与 ES5 标准不同的东西的错误，只是因为我刚开始使用 TypeScript，并且我不知道如何将 tsconfig.json 直接包含在我的 Gulp 任务自动编译中。

错误 TS1056：访问器仅在目标为 ECMAScript 5 或更高版本时可用

是否可以将我的 tsconfig.json 文件属性直接添加到我的 Gulp 管道中？

当前 gulpfile.js

'use strict';

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json'); // TypeScript config
var merge = require('merge2'); // TypeScript requirement
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

gulp.task('sass', function () {
    return gulp.src('app/assets/scss/**/*.scss')
        .pipe(sass()) // Using gulp-sass
        .pipe(gulp.dest('app/assets/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('typescript', function () {
    var tsResult = gulp.src('app/assets/typescript/**/*.ts')
        .pipe(ts({
            declaration: true
        }));

    return merge([
        tsResult.dts.pipe(gulp.dest('app/assets/definitions')),
        tsResult.js.pipe(gulp.dest('app/assets/js'))
    ]);
});

gulp.task('watch', ['browserSync', 'sass'], function () {
    gulp.watch('app/assets/typescript/**/*.ts', ['typescript']);
    gulp.watch('app/assets/scss/**/*.scss', ['sass']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('app/**/*.html', browserSync.reload);
    gulp.watch('app/assets/js/**/*.js', browserSync.reload);
});

gulp.task('browserSync', function () {
    browserSync.init({
        server: {
            baseDir: 'app'
        },
    });
});

gulp.task('useref', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        // Minifies only if it's a CSS file
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'));
});

gulp.task('images', function () {
    return gulp.src('app/assets/img/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/assets/img'));
});

gulp.task('fonts', function () {
    return gulp.src('app/assets/fonts/**/*')
        .pipe(gulp.dest('dist/assets/fonts'));
});

gulp.task('clean:dist', function () {
    return del.sync('dist');
});

gulp.task('build', function (callback) {
    runSequence('clean:dist', ['sass', 'useref', 'images', 'fonts'],
        callback
    );
});

gulp.task('default', function (callback) {
    runSequence(['sass', 'typescript', 'browserSync', 'watch'],
        callback
    );
    // Typescript compiler
});

答案＃1

我建议你将 tsconfig.json 作为属性的唯一来源。为此，请更改创建 tsResult 的方式：

var tsProject = ts.createProject('tsconfig.json');

var tsResult = tsProject.src().
    .pipe(//....

以下是对我有效的完整任务：

gulp.task('build.js.dev', () => 
{
    var tsProject = ts.createProject('tsconfig.json');

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
        .pipe(tsProject()); 

    return merge([
        //Write definitions 
        //tsResult.dts.pipe(gulp.dest(TEMP_TARGET_FOLDER)),
        //Write compiled js
        tsResult.js.pipe(sourcemaps.write(
            ".", 
            { 
                includeContent: true, 
                sourceRoot: __dirname + "/dist"
            })).pipe(gulp.dest(TEMP_TARGET_FOLDER))]);
});

你遇到的错误是因为如果你省略了 target 编译选项，TypeScript 编译器将回退到 ES3。