TypeScript 写 gulp 任务

一、环境与项目配置

全局安装 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
相关推荐
索西引擎4 小时前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack
天文家4 小时前
关于TypeScript中type和interface的区别与作用场景
typescript
lichenyang45317 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
太阳上的雨天21 小时前
与 TRON (波场) 区块链进行交互的命令行工具 (CLI): tstroncli
typescript·区块链·交互·tron·trx·trc20
前端拿破轮1 天前
HomeBrew创始人都写不出来的翻转二叉树到底怎么做?
前端·算法·typescript
趣多多代言人1 天前
20分钟学会TypeScript
前端·javascript·typescript
前端啊白2 天前
面试官:回答我!在tsconfig配置了别名你为啥要在vite再配置一遍?嗯?
typescript
pimkle2 天前
LC 135 分发糖果 JavaScript ts
leetcode·typescript
烛阴3 天前
深入浅出,教你用JS/TS轻松搞定Excel与XML互转
前端·javascript·typescript
cxr8283 天前
Vercel AI SDK 3.0 学习入门指南
前端·人工智能·学习·react.js·typescript·npm·reactjs