如何用gulp将多个TypeScript文件分别转译压缩为独立JS文件

一、Gulp实现方案（可行，修改现有配置即可） #

你现有代码的核心问题如下：

1. 每次执行函数重复创建tsProject实例，存在性能冗余
2. 错误将单个文件名传入gulp.dest()，该参数要求传入输出目录，而非目标文件名
3. 没有配置压缩步骤，也没有明确规避文件合并的参数

实现步骤 #

1. 安装缺失依赖

npm install --save-dev gulp-terser typescript

2. 修改gulpfile.js配置

const gulp = require('gulp');
const ts = require('gulp-typescript');
const terser = require('gulp-terser');

// 全局仅创建一次ts项目实例，复用配置
const tsProject = ts.createProject('Source/Scripts/tsconfig.json');

function typescriptPreProcessor() {
  // 读取tsconfig中include匹配的所有ts文件
  return tsProject.src()
    .pipe(tsProject()) // 转译ts为js，默认不合并文件
    .js
    .pipe(terser()) // 单独压缩每个js文件，不会合并
    .pipe(gulp.dest('Source/Scripts/dist')); // 填入你的输出目录即可，每个ts文件会对应生成一个同名压缩后的js
}

// 导出任务供调用
exports.buildTs = typescriptPreProcessor;

3. 确认tsconfig.json配置
   确保你的Source/Scripts/tsconfig.json中没有配置outFile参数，只要不配置该参数，TypeScript默认就会为每个输入的ts文件单独生成对应的js文件，不会合并。

二、替代Gulp的其他实现方案 #

如果不想用Gulp，也可以用以下更轻量的方案：

• 原生tsc+terser：直接调用TypeScript官方的tsc命令转译，再用terser批量压缩所有输出的js文件，全程不会合并文件。可以直接在package.json中配置脚本：

  {
    "scripts": {
      "build": "tsc -p Source/Scripts/tsconfig.json && terser Source/Scripts/dist/*.js --compress --mangle -o Source/Scripts/dist/"
    }
  }
  

• esbuild：性能极高的转译打包工具，两行配置即可实现需求，自动为多入口生成单独输出文件，自带压缩能力，安装后执行命令即可：
  esbuild List.ts TelephoneNumbers.ts --outdir=./dist --minify
• Rollup：适合需要控制输出格式的场景，指定多入口后会单独输出每个文件，配合rollup-plugin-terser可实现压缩。

内容的提问来源于stack exchange，提问作者Graham Harris