typescript 开发小程序编译当前文件
需求
用 typescript 开发微信小程序时，每次查看效果都很麻烦，编译过程太长了，怎么只编译当前编辑的文件呢？
工具
- vs code
- Code Runner 插件
- gulp
第一步
要把当前文件的路径传给 gulp
要在当前工作区增加一个设置
.vscode\settings.json
以下一些语言必须用以下方式才有用，用拓展名是没有用的
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 有右键菜单项 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 文件
再也不用等很长时间了
转载请保留原文链接： https://zodream.cn/blog/id/107.html