typescript 开发小程序编译当前文件

typescript 开发小程序编译当前文件

需求

用 typescript 开发微信小程序时，每次查看效果都很麻烦，编译过程太长了，怎么只编译当前编辑的文件呢？

工具

1. vs code
2. Code Runner 插件
3. gulp

第一步

要把当前文件的路径传给 gulp

要在当前工作区增加一个设置

.vscode\settings.json

{
    "code-runner.executorMapByFileExtension": {
        ".ts": "gulp build --file=$fullFileName",
    },
}

以下一些语言必须用以下方式才有用，用拓展名是没有用的

java, c, cpp, javascript, php, python, perl, ruby, go, lua, groovy, powershell, bat, shellscript, fsharp, csharp, vbscript, typescript, coffeescript, swift, r, clojure, haxe, objective-c, rust, racket, ahk, autoit, kotlin, dart, pascal, haskell, nim, d, lisp

{
    "code-runner.executorMap": {
        "typescript": "gulp build --file=$fullFileName",
    }
}

Code Runner 有右键菜单项 Run Code 就是执行当前文件的

这样在 ts 文件就会运行命令 gulp build --file=

$fullFileName 表示文件的绝对路径

第二步

在 guipfile.js 中增加 build 任务

var gulp = require('gulp'),
    ts = require("gulp-typescript"),
    tsProject = ts.createProject('tsconfig.json');

gulp.task('build', async() => {
    // 这里必须取得相对路径，不然最终的生成文件就会在 dist 文件夹下加全路径
    var file = process.argv[3].substr(7).replace(__dirname + '\\', '');
    await gulp.src(file)
        .pipe(tsProject())
        .pipe(gulp.dest('dist'));
});

第三步

右键执行 ts 测试以下

增强版

如果我使用一个方法既可以编译所有的，又可以编译一个文件，该怎么做

修改guipfile.js

var gulp = require('gulp'),
    ts = require("gulp-typescript"),
    tsProject = ts.createProject('tsconfig.json');

// 获取输入的路径
function getSrcPath(src) {
    if (process.argv.length < 4) {
        return src;
    }
    if (process.argv[2] !== 'build') {
        return src;
    }
    return process.argv[3].substr(7).replace(__dirname + '\\', '').replace('\\', '/');
}
// 获取输出的路径
function getDistPath(dist) {
    if (process.argv.length < 4) {
        return dist;
    }
    if (process.argv[2] !== 'build') {
        return dist;
    }
    return 'dist';
}

gulp.task('build', async() => {
    await gulp.src(getSrcPath('src/**/*.ts'))
        .pipe(tsProject())
        .pipe(gulp.dest(getDistPath('dist/')));
});

这样执行 gulp build 即可编译所有 ts 文件

右键 Run Code 只编译当前 ts 文件

再也不用等很长时间了

Reprint please keep the original link: https://zodream.cn/blog/id/107.html