功能： 在ts 代碼編寫保存后就能查看到編譯后的ts代碼以及編譯信息和運(yùn)行結(jié)果，因此我們需要一個(gè)工具何暮，能夠監(jiān)控源代碼文件的變化，并在監(jiān)控到變化之后自動(dòng)啟動(dòng)編譯過(guò)程并在編譯成功之后執(zhí)行編譯的JS腳本铐殃。
需要的工具
- gulp 構(gòu)建工具
- ts-node
- gulp 的配置文件 gulpfile.ts 本身是可以使用ts 來(lái)寫的海洼，如果使用ts 那么需要ts-node的支持
- gulp-typescript
- 為了能在gulp 中編譯ts 腳本，需要gulp-typescript 插件
- child_process
- 為了能在gulp 中執(zhí)行腳本富腊，需要用到node 中的 child_process 模塊來(lái)開啟進(jìn)程
- watch()
- gulp 提供的坏逢，用來(lái)監(jiān)聽文件的變化 ，并觸發(fā)編譯和運(yùn)行任務(wù)赘被。
創(chuàng)建項(xiàng)目并安裝依賴
- 創(chuàng)建目錄
mkdir ts-playground - 初始化
npm init -y - 安裝以來(lái)
npm i -D typescript ts-node gulp gulp-typescript - 初始化typescript
npx tsc --init - 安裝gulp類型檢查
npm i -D @types/gulp @types/gulp-typescript
編寫 gulpfile.ts 配置文件
編寫compile 方法
compile 方法是整，將指定目錄下ts 文件編譯后輸出到指定目錄下。
import { src, dest, watch ,series } from "gulp";
import ts from "gulp-typescript";
const tsProject = ts.createProject("tsconfig.json");
function compile(){
// 使用src 引入源代碼
const tsResult = src("src/**/*.ts")
.pipe(tsProject());
// 將編譯的結(jié)果輸出到 dist 目錄
return tsResult.js.pipe(dest("./dist"));
}
// 導(dǎo)出任務(wù)
export { compile };
執(zhí)行任務(wù)： npx gulp compile 表示執(zhí)行 創(chuàng)建的compile任務(wù)民假。
image.png
編寫 run 方法
執(zhí)行編譯后的js 腳本文件
import { src, dest, watch, series } from "gulp";
import ts from "gulp-typescript";
import { exec } from "child_process";
const tsProject = ts.createProject("tsconfig.json");
function compile() {
// 使用src 引入源代碼
const tsResult = src("src/**/*.ts")
.pipe(tsProject());
// 將編譯的結(jié)果輸出到 dist 目錄
return tsResult.js.pipe(dest("./dist"));
}
/**
* 執(zhí)行腳本
*/
function run(): Promise<any> {
return new Promise(resolve => {
// stdout 標(biāo)準(zhǔn)輸入 浮入， stderr 標(biāo)準(zhǔn)錯(cuò)誤
exec("node ./dist/", (err, stdout, stderr) => {
console.log(stdout);
if (stderr) {
console.log(stderr);
}
resolve(err);
})
})
}
export { compile };
//使用 series 將兩個(gè)任務(wù)連接起來(lái)，先運(yùn)行 compile 將文件編譯成js 放到dist 目錄下羊异，
//在執(zhí)行 run 事秀， 運(yùn)行dist 目錄下的js 腳本
export default series(compile , run);
執(zhí)行命令 npx gulp
image.png
編寫watch 方法
監(jiān)聽 ts 文件的變化彤断，然后做出操作。
import { src, dest, watch, series } from "gulp";
import ts from "gulp-typescript";
import { exec } from "child_process";
const tsProject = ts.createProject("tsconfig.json");
function compile() {
// 使用src 引入源代碼
const tsResult = src("src/**/*.ts")
.pipe(tsProject());
// 將編譯的結(jié)果輸出到 dist 目錄
return tsResult.js.pipe(dest("./dist"));
}
/**
* 執(zhí)行腳本
*/
function run(): Promise<any> {
return new Promise(resolve => {
// stdout 標(biāo)準(zhǔn)輸入 秽晚， stderr 標(biāo)準(zhǔn)錯(cuò)誤
exec("node ./dist/", (err, stdout, stderr) => {
console.log(stdout);
if (stderr) {
console.log(stderr);
}
resolve(err);
})
})
}
/**
* 監(jiān)聽
*/
function watchTs(){
// 定義監(jiān)聽 src 目錄下的 ts 文件瓦糟，如果有變化就執(zhí)行 compile 和 run 函數(shù)
watch("src/**/*.ts" , series(compile , run));
}
export { compile , watchTs as watch };
// 使用 series 將兩個(gè)任務(wù)連接起來(lái)，先運(yùn)行 compile 將文件編譯成js 放到dist 目錄下赴蝇，在執(zhí)行 run 菩浙， 運(yùn)行dist 目錄下的js 腳本
export default series(compile , run);
執(zhí)行命令 npx gulp watch
image.png
這是你會(huì)發(fā)現(xiàn)，當(dāng)你修改左邊的index.ts 文件后保存句伶，右邊的index.js 文件也會(huì)跟著修改劲蜻。并且在控制臺(tái)執(zhí)行了 index.js
<a name="lxuCu"></a>
package.json 自定義命令
為了方便，可以編寫一些自定義命令
{
"name": "ts-playground",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "gulp watch",
"build": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/gulp": "^4.0.9",
"@types/gulp-typescript": "^2.13.0",
"gulp": "^4.0.2",
"gulp-typescript": "^6.0.0-alpha.1",
"ts-node": "^10.8.2",
"typescript": "^4.7.4"
}
}
博客地址：http://kafeim.cn/
