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

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

typescript代碼在我保存文件時自動編譯

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

可以直接在typescript代碼上打斷點調(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ì)的使用方法和可配置項可以直接點上面的鏈接進(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代碼的時候映射到編譯后的文件上，sourceMap必須要開啟，outDir也必須要指向正確的目錄。
然后就開始編寫gulp任務(wù)了，也是比較簡單的，就需要注意下這些流的順序

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"));
});

這樣我們在命令行運行gulp compile的時候，就會生成js文件了，打開js文件，在文件最下方也會有用于sourcemap的url，如果需要生成.map文件的話需要傳遞一個相對路徑給.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"));
});

要實現(xiàn)這個功能就要使用到gulp-nodemon這個插件了，詳細(xì)的使用方法也直接點上面鏈接看就行了，這個東西踩過幾個坑需大家注意一下下面注釋的內(nèi)容。這個也就是最后的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ù)的啟動文件
        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里面去，參考這個去做就行了，因為我用的是mac，直接把終端拖到另一個屏幕去了，要看輸出內(nèi)容的時候直接劃一下就行，所以沒有使用這個功能。

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

然后點擊

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

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

然后點擊

就可以了，注意要先運行gulp watch命令。