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
相关推荐
烛阴7 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
濮水大叔17 小时前
VonaJS多租户🔥居然可以同时支持共享模式和独立模式,太牛了🚀
typescript·node.js·nestjs
濮水大叔19 小时前
VonaJS多租户同时支持共享模式和独立模式
typescript·nodejs·nestjs
科技林总1 天前
【TS3】搭建本地开发环境
学习·typescript
tyro曹仓舒2 天前
彻底讲透as const + keyof typeof
前端·typescript
濮水大叔2 天前
Vona ORM分表全攻略
typescript·node.js·nestjs
Bruce-li__2 天前
前端开发利器:nvm、npm与pnpm全面解析与TypeScript/JavaScript选择指南
javascript·typescript·npm
Linsk2 天前
如何实现TypeScript级的polyfill自动引入
前端·typescript·前端工程化
路光.2 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3