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
相关推荐
BillKu10 天前
Vue3 + TypeScript + xlsx 导入excel文件追踪数据流转详细记录(从原文件到目标数据)
前端·javascript·typescript
小Lu的开源日常10 天前
Drizzle vs Prisma:现代 TypeScript ORM 的深度对比
数据库·typescript·前端框架
Shixaik10 天前
配置@为src
typescript·前端框架
BillKu10 天前
Vue3 + TypeScript合并两个列表到目标列表,并且进行排序,数组合并、集合合并、列表合并、list合并
vue.js·typescript·list
ze_juejin11 天前
Typescript中的继承示例
前端·typescript
夏天199511 天前
TypeScript 一 泛型使用建议
typescript
一生躺平的仔11 天前
TypeScript 初探:你的 JavaScript 进化伙伴
typescript
一生躺平的仔11 天前
类型系统:给代码装上智能导航
typescript
拾光拾趣录11 天前
TypeScript 交叉类型与联合类型
typescript
RJiazhen11 天前
项目级组件封装指南
前端·react.js·typescript