typescriptgulpgulp-typescript

How to use ts-nameof in the gulp build chain, getting: Unknown compiler option 'getCustomTransformers'.?


I am using ts-nameof within my TypeScript files as like in this .ts-file:

import 'ts-nameof';

export class MyTsNameOfTest {
  public testTsNameOf() {
    const nameString = nameof(console.log);
  }
}

My Gulp build task - as recommended here Gulp configuration:

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsNameof = require("ts-nameof");

gulp.task("typescript", function () {
  gulp.src("src/**/*.ts")
    .pipe(ts({
      getCustomTransformers: () => ({ before: [tsNameof] })
    }))
    .pipe(gulp.dest("./dist"));
});

Running gulp I get error:

error TS5023: Unknown compiler option 'getCustomTransformers'.

Versions I am using:

gulp 3.9.1
gulp-typescript 3.2.4
typescript 2.9.2
ts-nameof 2.0.0

What am I doing wrong? Thanks for your help.


Solution

  • Preparation

    Install required npm packages

    npm install typescript
    npm install gulp@^4.0.0                
    npm install gulp-typescript@^5.0.0
    npm install del
    npm install ts-nameof
    

    gulp-typescript WITHOUT a project

    Prepare gulpfile.js

    const gulp = require('gulp');
    const ts = require('gulp-typescript');
    const tsNameof = require("ts-nameof");
    const del = require('del');
    
    gulp.task('clean', () => {
        return del(['./dist/**']);
    });    
    
    gulp.task('ts', function () {
        return gulp.src('./src/**/*.ts')
            .pipe(ts({
                getCustomTransformers: () => ({ before: [tsNameof] })
            }))
            .pipe(gulp.dest('./dist'));
    });
    
    gulp.task('default',
        gulp.series(
            'clean',
            'ts',
        ));
    

    gulp-typescript WITH a project using existing tsconfig.json

    Using gulp-typescript with an existing tsconfig.json the gulpfile.js must be adjusted where the option getCustomTransformers is configured:

    Prepare gulpfile.js

    const gulp = require('gulp');
    const ts = require('gulp-typescript');
    const tsNameof = require("ts-nameof");
    const del = require('del');
    
    gulp.task('clean', () => {
        return del(['./dist/**']);
    }); 
    
    var tsProject = tsProject || null;
    gulp.task('ts::Project', function () {
        if (!tsProject) {
            tsProject = ts.createProject(
                'tsconfig.json',
                {
                    getCustomTransformers: () => ({ before: [tsNameof] })
                }
            );
        }
        return gulp.src('./src/**/*.ts')
            .pipe(tsProject())
            .pipe(gulp.dest("./dist"));
    });
    
    gulp.task('tsProject',
        gulp.series(
            'clean',
            'ts::Project',
        ));
    

    Transpiling

    Run gulpfile.js with

    ./node_modules/.bin/gulp
    

    or

    ./node_modules/.bin/gulp tsProject
    

    Execution

    Execute transpiled file tsNameofTest.js

    node dist/tsNameofTest.js  // expected output: nameString: log
    

    Remark: if typescript target is ESNext I got exectution errors with following statement in .ts file as it was in the final .js file, too:

    import 'ts-nameof';
    

    I got is fixed by replacing it with

    /// <reference path="../node_modules/ts-nameof/ts-nameof.d.ts" />
    

    Update

    It is now even possible to install the type definition of ts-nameof globally:

    npm install @types/ts-nameof --save-dev
    

    Neither import nor /// <reference path="" /> is neccessary.