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

Question

我继续在编译时遇到与使用ES5标准不同的错误，因为我刚刚开始使用TS而我不知道如何将tsconfig.json直接包含在我的Gulp任务自动编译中。

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher

是否可以将我的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。