typescript 开发小程序编译当前文件
需求
用 typescript 开发微信小程序时，每次查看效果都很麻烦，编译过程太长了，怎么只编译当前编辑的文件呢？
工具
- vs code
- Code Runner 插件
- gulp
第一步
要把当前文件的路径传给 gulp
要在当前工作区增加一个设置
.vscode\settings.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
{
"code-runner.executorMap": {
"typescript": "gulp build --file=$fullFileName",
}
}12345
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'));
});
123456789101112
第三步
右键执行 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/')));
});
12345678910111213141516171819202122232425262728293031
这样执行 gulp build 即可编译所有 ts 文件
右键 Run Code 只编译当前 ts 文件
再也不用等很长时间了
转载请保留原文链接： https://zodream.cn/blog/id/107.html