How to configure gulp to compile both .jsx and .ts files?

Question

I have my client side code in react native i.e .jsx files and I am using gulp to compile them. I want to convert my project to start using typescript but 1 file at a time. Which means I need to be able to compile both jsx and ts using gulp.

I am using the below gulp --

/// <binding AfterBuild='default' />
"use strict";

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json"),
    runSequence = require('run-sequence');

var runSequence = require('run-sequence');

var sass = require('gulp-sass');

var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

var webroot = "./wwwroot/";
var paths = {
    scss: webroot + "sass/**/*.scss",
    scssDest: webroot + "css/"
};

// 1. react
gulp.task('react', function () {
    return browserify({ entries: './wwwroot/clientapp/root', extensions: [ '.jsx', '.js'], debug: true })
        .transform('babelify', { presets: ['es2015', 'react'] })
        .bundle()
        .pipe(source('index.js'))
        .pipe(gulp.dest('./wwwroot/'));
});

// 2. sass
gulp.task('compile:sass', function () {
    gulp.src(paths.scss)
        .pipe(sass())
        .pipe(gulp.dest(paths.scssDest));
});
gulp.task("sass", ["compile:sass"]);

// minify sass output
function getBundles(regexPattern) {
    return bundleconfig.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}
gulp.task("css",  function () {
    var tasks = getBundles(/\.css$/).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("clean", function () {
    return del(['wwwroot/css/*', 'wwwroot/index.js']);
});

gulp.task("default", function (cb) {
    runSequence(
        ['clean', 'sass'],
        ['react'],
        ['css'],
        cb);
});

What changes would I have to do to my gulp configuration to make sure both .jsx and .ts files work and compile.

Answer 1

Add .ts extension to react task. Depending on your code you will have to configure babelify to work with ts as well

gulp.task('react', function () {
    return browserify({ entries: './wwwroot/clientapp/root', extensions: [ '.jsx', '.js', '.ts'], debug: true })
        .transform('babelify', { presets: ['es2015', 'react'], extensions: [ '.jsx', '.js', '.ts'] })
        .bundle()
        .pipe(source('index.js'))
        .pipe(gulp.dest('./wwwroot/'));
});

You could try without adding extension to babelify, but I don't think it would work.

Hope that helps!