將tsconfig.json屬性添加到Gulp任務

Question

我在編譯時不斷遇到使用與ES5標准不同的錯誤，這僅僅是因為我剛開始使用TS，而且我不知道如何將tsconfig.json直接包含在Gulp任務自動tsconfig.json中。

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編譯器選項，則打字稿編譯器將回退到ES3。