TypeScript 写 gulp 任务

evamango2025-04-14 14:27

一、环境与项目配置

全局安装 gulp-cli 以支持命令行操作

shell 复制代码

npm i -g gulp-cli

初始化 npm 包管理文件

shell 复制代码

npm init -y

(-y可跳过交互直接生成默认配置)

项目中安装 gulp 核心库

css 复制代码

npm i gulp -D

安装 typescript 、 ts-node 和 @types/gulp

让 gulp 可自动识别并编译 ts 文件
gulp 的代码提示

css 复制代码

npm i typescript ts-node @types/gulp -D

TypeScript 配置

创建 tsconfig.json 文件，设置模块规范为 CommonJS（Gulp 默认使用 CommonJS 模块）

json 复制代码

{
  "compilerOptions": {
    "module": "CommonJS", 
    "esModuleInterop": true, 
    "target": "ES2018", 
    "outDir": "./dist", 
    "rootDir": ".", 
    "strict": true 
    } 
}

二、编写测试 gulp 任务

项目根目录新建 gulpfile.ts

编写默认任务和一个拷贝指定类型文件的任务

ts 复制代码

// #region -------- 默认任务
function defaultTask(cb: () => void): void {
  console.log("Default task executed");
  cb();
}

export default defaultTask;

// #region -------- 拷贝任务
import { src, dest } from 'gulp';
function copy() {
  return src('assets/config/*.json')
    .pipe(dest('temp/'));
}

export { copy };

三、编写测试 gulp 任务

执行默认任务

在命令行中测试一下。执行 gulp

csharp 复制代码

$ gulp
[11:12:32] Loaded external module: ts-node/register
[11:12:33] Using gulpfile ./gulpfile.ts
[11:12:33] Starting 'default'...
Default task executed
[11:12:33] Finished 'default' after 1.3 ms

执行指定任务

执行 gulp copy 以执行 copy 任务

csharp 复制代码

$ gulp copy
[11:17:37] Loaded external module: ts-node/register
[11:17:37] Using gulpfile ./gulpfile.ts
[11:17:37] Starting 'copy'...
[11:17:37] Finished 'copy' after 15 ms

查看任务列表

执行 gulp --tasks

sql 复制代码

$ gulp --tasks
[11:21:21] Loaded external module: ts-node/register
Tasks for ./gulpfile.ts
├── copy
└── default