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

Question

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

错误 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
});

Answer 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。