gulp in typescript esm project not working

[dimaslanjaka]

iam working in typescript project with ESNext.
package.json contain `"type": "module", when i removing this, all project will returning errors.

tsconfig.json

{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "allowSyntheticDefaultImports": true,
    "allowUmdGlobalAccess": true,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "esModuleInterop": true,
    "preserveConstEnums": true,
    "allowJs": true,
    "checkJs": false,
    "outDir": "./dist",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "removeComments": true,
    "declaration": true,
    "declarationDir": "dist/types",
    "lib": [
      "DOM",
      "ES2020"
    ],
    "typeRoots": [
      "src/types",
      "node_modules/@types"
    ]
  },
  "typeAcquisition": {
    "enable": true,
    "include": [
      "bootstrap",
      "axios"
    ]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "**/node_modules/**",
    "**/*.spec.ts",
    "**/*.test.ts",
    "**/__tests__/**",
    "**/dist/**",
    "**/*.test.ts",
    "src/license"
  ],
  "ts-node": {
    "files": true,
    "esm": true
  }
}

When i running it with nodemon like below is working:

but, gulp returning error:

[14:08:53] Requiring external module ts-node/register
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /media/dimaslanjaka/DATA/Repositories/traffic-generator/express/gulpfile.ts
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:13:42)
    at ESMLoader.load (node:internal/modules/esm/loader:303:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:244:11)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

i've tried below commands, and still returning errors:

gulp -r ts-node/register/transpile-only test
gulp -r ts-node/register test
gulp --loader ts-node/esm test

when i remove "type": "module" from package.json, gulp returning error:

[14:19:10] Requiring external module ts-node/register
/media/dimaslanjaka/DATA/Repositories/traffic-generator/express/gulpfile.ts:1
import child_process from 'child_process';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Module.m._compile (/media/dimaslanjaka/DATA/Repositories/traffic-generator/node_modules/ts-node/src/index.ts:1455:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .ts] (/media/dimaslanjaka/DATA/Repositories/traffic-generator/node_modules/ts-node/src/index.ts:1458:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

gulpfile.ts

import child_process from 'child_process';
import gulp from 'gulp';
import path from 'upath';
import terser from 'gulp-terser';
import fs from 'fs';
import cleanCSS from 'gulp-clean-css';
import htmlmin from 'gulp-htmlmin';
import config from './src/config.js';
const { getDirname } = config;
const { spawn } = child_process;
const { existsSync, mkdirSync, rmSync } = fs;
const { task, src, dest, series } = gulp;
const { join } = path;
const __resolve = getDirname();
const baseSrc = join(__resolve.__dirname, 'src');
const baseDest = join(__resolve.__dirname, 'dist');

task('clean', (done) => {
  // only run if not exist
  if (existsSync(baseDest)) {
    // remove dist
    rmSync(baseDest, { recursive: true });
  }
  if (!existsSync(baseDest)) {
    // recreate dist
    mkdirSync(baseDest);
  }
  if (typeof done == 'function') done();
});

// copy to ./dist
task('copy', (done) => {
  const ignore = ['!license/**', '!**/dev.js'];
  const assets = () =>
    src(['**/*', '!**/*.{ts,sqlite,css,html,ejs}', ...ignore], { cwd: baseSrc }).pipe(dest(baseDest));
  const minjs = () =>
    src(['**/*.js', ...ignore], { cwd: join(baseSrc, 'public', 'views') })
      .pipe(terser())
      .pipe(dest(join(baseDest, 'public', 'views')));
  const mincss = () =>
    src('**/*.css', { cwd: baseSrc })
      .pipe(cleanCSS({ compatibility: 'ie8' }))
      .pipe(dest(baseDest));
  const minhtml = () =>
    src('**/*.{html,ejs}', { cwd: baseSrc })
      .pipe(
        htmlmin({
          minifyCSS: true,
          minifyJS: true,
          removeComments: true,
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeAttributeQuotes: true,
          removeEmptyAttributes: true
        })
      )
      .pipe(dest(baseDest));
  return series(assets, minjs, mincss, minhtml)(done);
});

task('tsc', (done) => {
  const cmd = spawn('tsc', ['-p', join(__dirname, 'tsconfig.prod.json')], {
    stdio: 'inherit',
    cwd: __dirname,
    env: Object.assign(process.env, { NODE_ENV: 'production' })
  });
  cmd.stderr?.pipe(process.stderr);
  cmd.stdout?.on('data', (data) => console.log(String(data)));
  cmd.on('close', () => done());
});

task('default', series('clean', 'tsc', 'copy'));
task('test', (done) => {
  console.log('test');
  done();
});

[dimaslanjaka]

i got an sollution:

read from creating hybrid __dirname

build.ts

import child_process from 'child_process';
import gulp from 'gulp';
import path from 'upath';
import terser from 'gulp-terser';
import fs from 'fs';
import cleanCSS from 'gulp-clean-css';
import htmlmin from 'gulp-htmlmin';
import config from './src/config.js';
const { getDirname } = config;
const { spawn } = child_process;
const { existsSync, mkdirSync, rmSync } = fs;
const { src, dest, series } = gulp;
const { join } = path;
const __resolve = getDirname();
const __dirname = __resolve.__dirname;
const baseSrc = join(__dirname, 'src');
const baseDest = join(__dirname, 'dist');
//console.log(baseSrc, baseDest);
/**
 * copy public files to dist
 * @param done
 * @returns
 */
const copy = (done?: any) => {
  const ignore = ['!license/**', '!**/dev.js'];
  const assets = () =>
    src(['**/*', '!**/*.{ts,sqlite,css,html,ejs}', ...ignore], { cwd: baseSrc }).pipe(dest(baseDest));
  const minjs = () =>
    src(['**/*.js', ...ignore], { cwd: join(baseSrc, 'public', 'views') })
      .pipe(terser())
      .pipe(dest(join(baseDest, 'public', 'views')));
  const mincss = () =>
    src('**/*.css', { cwd: baseSrc })
      .pipe(cleanCSS({ compatibility: 'ie8' }))
      .pipe(dest(baseDest));
  const minhtml = () =>
    src('**/*.{html,ejs}', { cwd: baseSrc })
      .pipe(
        htmlmin({
          minifyCSS: true,
          minifyJS: true,
          removeComments: true,
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeAttributeQuotes: true,
          removeEmptyAttributes: true
        })
      )
      .pipe(dest(baseDest));
  return series(assets, minjs, mincss, minhtml)(done);
};

const tsc = (done?: any) => {
  const cmd = spawn('tsc', ['-p', join(__dirname, 'tsconfig.prod.json')], {
    stdio: 'inherit',
    cwd: __dirname,
    env: Object.assign(process.env, { NODE_ENV: 'production' })
  });
  cmd.stderr?.pipe(process.stderr);
  cmd.stdout?.on('data', (data) => console.log(String(data)));
  cmd.on('close', () => {
    if (typeof done === 'function') done();
  });
};

const clean = (done?: any) => {
  // only run if not exist
  if (existsSync(baseDest)) {
    // remove dist
    rmSync(baseDest, { recursive: true });
  }
  if (!existsSync(baseDest)) {
    // recreate dist
    mkdirSync(baseDest);
  }
  if (typeof done == 'function') done();
};

clean(() => tsc(copy));

run with ts-node build.ts

[phated]

That's not using the gulp task system. Gulp can't support esm until node figures out their (really bad) custom loader support.

[dimaslanjaka]

yeah, i realized that. Gulp cannot follow the loader. so, i using some gulp functions to processing without gulp task.