使用gulp和vsc構建高效的typescript開發環境

出於某些緣由，近期開始須要在公司推廣使用nodejs寫服務端，由於以前使用es6開發過多個我的項目，因此知道新手開發node很是容易將代碼寫的散亂而且不易後人理解。本人剛入行的時候作的是java，以爲強類型的語言更加適合組織代碼和團隊合做，並且強類型語言由於類型強制聲明，因此IDE能夠作到很好的代碼感知能力，由於有IDE的撐腰，因此開發大型系統，複雜系統比較有保障。因此折中的選擇了typescript開發，也就用起了vsc(visual studio code)。
不管什麼語言什麼項目，總得搭建起一個足夠高效可讓本身開心的寫代碼的開發環境（仍是叫開發流程？不知道怎麼描述了，詞窮），如下是我對typescript開發流程的最低要求:

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

2. 編譯完成以後自動重啓服務

3. 能夠直接在typescript代碼上打斷點調試

最終效果:

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

• gulp-nodemon

• gulp-sourcemaps

• gulp-typescript

先附上個人目錄結構：

使用gulp任務編譯ts文件

最最基礎的確定是編譯ts文件了，這裏用到的就是gulp-typescript和gulp-sourcemaps（用於生成映射），詳細的使用方法和可配置項能夠直接點上面的連接進去看，這裏咱們須要根據tsconfig.json裏的配置進行編譯，tsconfig.json都差很少的，我這裏貼下個人。

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

須要注意的地方就是爲了調試ts代碼的時候映射到編譯後的文件上，sourceMap必需要開啓，outDir也必需要指向正確的目錄。
而後就開始編寫gulp任務了，也是比較簡單的，就須要注意下這些流的順序

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

監聽文件變動自動編譯並重啓服務

要實現這個功能就要使用到gulp-nodemon這個插件了，詳細的使用方法也直接點上面連接看就好了，這個東西踩過幾個坑需你們注意一下下面註釋的內容。這個也就是最後的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',  // 服務的啓動文件
        watch: 'src',    // 源代碼目錄
        tasks: ['compile'], // 在重啓服務前須要執行的任務
        ext: 'ts', // 監聽.ts結尾的文件 必須
        // 設置環境
        env: {
            'NODE_ENV': 'development'
        },
        // 必須開啓debug模式
        exec: 'node --debug'
    });
});

固然啦，你也可使用vsc裏面task的功能，把他集成到vsc裏面去，參考這個去作就好了，由於我用的是mac，直接把終端拖到另外一個屏幕去了，要看輸出內容的時候直接劃一下就行，因此沒有使用這個功能。

使用vsc進行代碼調試

這裏使用的是attach模式進行調試，也就是由nodemon --debug來啓動服務，並提供出一個debug的端口，而後咱們用vsc接入進行調試。
點擊進入debug菜單

而後點擊

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

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

而後點擊

就能夠了，注意要先運行gulp watch命令。