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

Fork Me On Github

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

需求

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

工具

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

第一步

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

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

.vscode\settings.json

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

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

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

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

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

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

$fullFileName 表示文件的绝对路径

第二步

guipfile.js 中增加 build 任务

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

第三步

右键执行 ts 测试以下

增强版

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

修改guipfile.js

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

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

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

再也不用等很长时间了

点击查看全文
0 427 0