使用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命令。