Add tsconfig.json properties to Gulp task

Question

I keep on getting that error about using something different than ES5 standards while compiling, simply because I just started using TS and I don't know how to include the tsconfig.json directly in my Gulp task autocompile.

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

Is it possible to add my tsconfig.json file properties directly into my Gulp pipe?

Current 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

I would recommend you to use your tsconfig.json as the only source of the properties. To do this change how you create tsResult :

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

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

Below is the complete task that works for me:

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

The error you are getting is due to the fact that if you omit target compiler option the typescript compiler will fallback to ES3.