功能： 在ts 代碼編寫保存后就能查看到編譯后的ts代碼以及編譯信息和運行結(jié)果，因此我們需要一個工具，能夠監(jiān)控源代碼文件的變化，并在監(jiān)控到變化之后自動啟動編譯過程并在編譯成功之后執(zhí)行編譯的JS腳本。

需要的工具

1. gulp 構(gòu)建工具
2. ts-node
   1. gulp 的配置文件 gulpfile.ts 本身是可以使用ts 來寫的，如果使用ts 那么需要ts-node的支持
3. gulp-typescript
   1. 為了能在gulp 中編譯ts 腳本，需要gulp-typescript 插件
4. child_process
   1. 為了能在gulp 中執(zhí)行腳本，需要用到node 中的 child_process 模塊來開啟進程
5. watch()
   1. gulp 提供的，用來監(jiān)聽文件的變化 ，并觸發(fā)編譯和運行任務(wù)。

創(chuàng)建項目并安裝依賴

1. 創(chuàng)建目錄 mkdir ts-playground
2. 初始化 npm init -y
3. 安裝以來 npm i -D typescript ts-node gulp gulp-typescript
4. 初始化typescript npx tsc --init
5. 安裝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)錯誤
        exec("node ./dist/", (err, stdout, stderr) => {
            console.log(stdout);

            if (stderr) {
                console.log(stderr);

            }

            resolve(err);

        })
    })


}

export { compile };

//使用 series 將兩個任務(wù)連接起來，先運行 compile 將文件編譯成js 放到dist 目錄下，
//在執(zhí)行 run ， 運行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)錯誤
        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 將兩個任務(wù)連接起來，先運行 compile 將文件編譯成js 放到dist 目錄下，在執(zhí)行 run ， 運行dist 目錄下的js 腳本
export default series(compile , run);

執(zhí)行命令 npx gulp watch

image.png

這是你會發(fā)現(xiàn)，當(dāng)你修改左邊的index.ts 文件后保存，右邊的index.js 文件也會跟著修改。并且在控制臺執(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/