Gulpfile written using Typescript - SyntaxError: Unexpected token import

Question

I am trying to do more with Typescript, and reading some online tutorials, indicates that Node 5.3.0 will support Typescript. I am trying to use the latest tools, and Babel with Gulp to write my Gulpfile.js (actually, gulpfile.babel.js) using Typescript. I get a:

import { PROJECT_ROOT, SERVER_SOURCE, appVersion } from 'Config';
^^^^^^
SyntaxError: Unexpected token import

when trying to run a task with Gulp. While the require() syntax does work, I am trying to use Typescript all the way, and am led to believe it will work. I do have 'use strict'; in each file.

gulpfile.babel.js

/**
 * GulpFile.Babel.js
 * Configuration and Control file for the Gulp Task Runner
 */
'use strict';

var GulpTaskRunner  = require('gulp');
var PlugIns         = require('gulp-load-plugins')();
var TaskList        = require('gulp-task-listing');     // Help Screen of Tasks

GulpTaskRunner.task('default', TaskList);
GulpTaskRunner.task('clean', GetGulpTask('Clean'));


// Gulp Task Loader
function GetGulpTask(Task) {
    var FileSystem = require('fs');
    try {
        var TaskFile = './GulpTasks/Task-' + Task + '.ts';
        FileSystem.access(TaskFile, FileSystem.F_OK, function(err) {
            if (!err) {
                return require(TaskFile)(GulpTaskRunner, PlugIns);return require(TaskFile)(GulpTaskRunner, PlugIns);
            } else {
                PlugIns.util.log(PlugIns.util.colors.red.bold(TaskFile + ' not found'));
            }
        });

    } catch (e) {
        PlugIns.util.log(TaskFile + ' ' + PlugIns.util.colors.red.bold(e));
    }
}

Configuration file to centralize common variables/paths

/**
 * config.ts
 * Gulp configuration file for the project written in Typescript
 */
'use strict';

import {normalize, join} from 'path';

export const PROJECT_ROOT       = normalize(join(__dirname, '..'));
export const SERVER_SOURCE      = normalize(join(PROJECT_ROOT, 'server', 'src'));

function appVersion(): number|string {
    var pkg = JSON.parse(readFileSync('package.json').toString());
    return pkg.version;
}

Task-Clean.ts

/**
 * Task-Clean.ts
 * Clean process to clean the project and prepare to build the source code
 */
'use strict';

import {PROJECT_ROOT, SERVER_SOURCE, appVersion} from 'Config';
console.log('Clean Process ' + SERVER_SOURCE + ' - V.' + appVersion());

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
    }
}

When I then run gulp, I get the error. If I comment out the Clean task, then the script will run properly.

I have checked this question but it does not seem to apply here.

Software Versions:

node -v
v5.9.1

npm --version
3.7.3

gulp -v
Requiring external module babel-register
CLI version 1.2.1
Local version 3.9.0

Answer 1

Here:

// Gulp Task Loader
function GetGulpTask(Task) {
    var FileSystem = require('fs');
    try {
        var TaskFile = './GulpTasks/Task-' + Task + '.ts';
        FileSystem.access(TaskFile, FileSystem.F_OK, function(err) {
            if (!err) {

The TypeScript tasks have to be compiled before they can be run, of course. Loading the .ts and trying to run it directly is not going to work because the runtime doesn't understand TypeScript syntax.

You should either be looking for a generated .js file instead, or using a TypeScript transpilation function to do the TS -> JS translation on the fly (see the ts.transpile function exposed by the TypeScript API, or maybe some other Gulp library for this).