摘要：出于某些原因，近期開始需要在公司推廣使用寫服務(wù)端，因?yàn)橹笆褂瞄_發(fā)過多個(gè)個(gè)人項(xiàng)目，所以知道新手開發(fā)非常容易將代碼寫的散亂并且不易后人理解。所以折中的選擇了開發(fā)，也就用起了。

出于某些原因，近期開始需要在公司推廣使用nodejs寫服務(wù)端，因?yàn)橹笆褂胑s6開發(fā)過多個(gè)個(gè)人項(xiàng)目，所以知道新手開發(fā)node非常容易將代碼寫的散亂并且不易后人理解。本人剛?cè)胄械臅r(shí)候做的是java，覺得強(qiáng)類型的語言更加適合組織代碼和團(tuán)隊(duì)合作，而且強(qiáng)類型語言因?yàn)轭愋蛷?qiáng)制聲明，所以IDE可以做到很好的代碼感知能力，因?yàn)橛蠭DE的撐腰，所以開發(fā)大型系統(tǒng)，復(fù)雜系統(tǒng)比較有保障。所以折中的選擇了typescript開發(fā)，也就用起了vsc(visual studio code)。
無論什么語言什么項(xiàng)目，總得搭建起一個(gè)足夠高效可以讓自己開心的寫代碼的開發(fā)環(huán)境（還是叫開發(fā)流程？不知道怎么描述了，詞窮），以下是我對(duì)typescript開發(fā)流程的最低要求:

typescript代碼在我保存文件時(shí)自動(dòng)編譯

編譯完成之后自動(dòng)重啟服務(wù)

可以直接在typescript代碼上打斷點(diǎn)調(diào)試

最終效果:

大家也看到了用的就是gulp+vsc內(nèi)置的debug工具(使用attach模式)，用到的gulp插件列表:

gulp-nodemon

gulp-sourcemaps

gulp-typescript

先附上我的目錄結(jié)構(gòu)：

最最基礎(chǔ)的肯定是編譯ts文件了，這里用到的就是gulp-typescript和gulp-sourcemaps（用于生成映射），詳細(xì)的使用方法和可配置項(xiàng)可以直接點(diǎn)上面的鏈接進(jìn)去看，這里我們需要根據(jù)tsconfig.json里的配置進(jìn)行編譯，tsconfig.json都差不多的，我這里貼下我的。

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "includes": [
        "src/**/*"
    ]
}

需要注意的地方就是為了調(diào)試ts代碼的時(shí)候映射到編譯后的文件上，sourceMap必須要開啟，outDir也必須要指向正確的目錄。
然后就開始編寫gulp任務(wù)了，也是比較簡(jiǎn)單的，就需要注意下這些流的順序

var gulp = require("gulp");
var ts = require("gulp-typescript");
var sourcemaps = require("gulp-sourcemaps");

var tsProject = ts.createProject("tsconfig.json");

gulp.task("compile", function () {
    return tsProject.src()

        // 注意順序
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("dist"));
});

這樣我們?cè)诿钚羞\(yùn)行gulp compile的時(shí)候，就會(huì)生成js文件了，打開js文件，在文件最下方也會(huì)有用于sourcemap的url，如果需要生成.map文件的話需要傳遞一個(gè)相對(duì)路徑給.write方法:

var gulp = require("gulp");
var plugin1 = require("gulp-plugin1");
var plugin2 = require("gulp-plugin2");
var sourcemaps = require("gulp-sourcemaps");

gulp.task("javascript", function() {
  gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write("../maps"))
    .pipe(gulp.dest("dist"));
});

要實(shí)現(xiàn)這個(gè)功能就要使用到gulp-nodemon這個(gè)插件了，詳細(xì)的使用方法也直接點(diǎn)上面鏈接看就行了，這個(gè)東西踩過幾個(gè)坑需大家注意一下下面注釋的內(nèi)容。這個(gè)也就是最后的gulpfile了

var gulp = require("gulp");
var ts = require("gulp-typescript");
var sourcemaps = require("gulp-sourcemaps");
var nodemon = require("gulp-nodemon");

var tsProject = ts.createProject("tsconfig.json");

gulp.task("compile", function () {
    return tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest("dist"));
});

gulp.task("watch", ["compile"], function () {
    return nodemon({
        script: "dist/bin/www.js",  // 服務(wù)的啟動(dòng)文件
        watch: "src",    // 源代碼目錄
        tasks: ["compile"], // 在重啟服務(wù)前需要執(zhí)行的任務(wù)
        ext: "ts", // 監(jiān)聽.ts結(jié)尾的文件 必須
        // 設(shè)置環(huán)境
        env: {
            "NODE_ENV": "development"
        },
        // 必須開啟debug模式
        exec: "node --debug"
    });
});

當(dāng)然啦，你也可以使用vsc里面task的功能，把他集成到vsc里面去，參考這個(gè)去做就行了，因?yàn)槲矣玫氖莔ac，直接把終端拖到另一個(gè)屏幕去了，要看輸出內(nèi)容的時(shí)候直接劃一下就行，所以沒有使用這個(gè)功能。

這里使用的是attach模式進(jìn)行調(diào)試，也就是由nodemon --debug來啟動(dòng)服務(wù)，并提供出一個(gè)debug的端口，然后我們用vsc接入進(jìn)行調(diào)試。
點(diǎn)擊進(jìn)入debug菜單

然后點(diǎn)擊

生成debug的配置文件(launch.json),這里提供下我配置好的，使用的時(shí)候注意把那些注釋刪掉。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "type": "node", // 必須為node，不能為node2
            "request": "attach",
            "port": 5858, // 為node debug模式的端口號(hào)，默認(rèn)為5858
            "address": "localhost",
            "restart": true, // 配合nodemon使用
            "sourceMaps": true, // 開啟了sourcemap
            "outDir": "${workspaceRoot}/dist", // 輸出目錄
            "outFiles": [],
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

然后點(diǎn)擊

就可以了，注意要先運(yùn)行gulp watch命令。