我刚刚开始使用VS Code,我想知道在哪里可以找到gulpfile.js
和tsconfig.json
,让我可以看到TS和Less文件并在飞。
我观看了John Papa的演讲,还this webinar。它提到他已经修改了Typscript的HotTowel应用程序但是我无处可以找到gulpfile应该是什么样子的任何例子。
如果有人能与社区分享任何例子作为这个问题的答案,我真的很感激。更好的是,如果有人能够指出我在VSCode下运行的一些示例应用程序,它们具有我可以使用的gulpfile.js,那就更好了。
答案 0 :(得分:5)
根据您的问题,我并不完全确定您要解决的问题。你以前用过gulp吗?您是否只是遇到了在VSCode中工作的问题,或者您是否正在学习如何使用Gulpjs?如果您之前使用过Gulpjs,您是否使用过手表?我有一个适用于TS文件的示例。我相信这会让你朝着正确的方向前进。
如果你有这样的项目结构:
project
.settings
tasks.json
tsconfig.json
src
app.ts
package.json
gulpfile.js
tasks.json看起来像这样:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "default",
// Make this the default build command.
"isBuildCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent"
}
]
}
tsconfig.json看起来像这样:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": "true",
"removeComments": "true",
"target": "ES5"
},
"files": [
"app.ts"
]
}
package.json看起来像这样:
{
"name": "typescript-concepts",
"version": "0.0.0",
"dependencies": {
"gulp": "latest",
"gulp-typescript": "latest",
"gulp-watch": "latest"
}
}
gulpfile.js看起来像这样:
var gulp = require('gulp');
var compileTypescript = require('gulp-typescript');
var tslint = require('gulp-tslint');
var watch = require('gulp-watch');
var tsProject = compileTypescript.createProject('./.settings/tsconfig.json');
gulp.task('compile-ts', function() {
return tsProject.src() // instead of gulp.src(...)
.pipe(compileTypescript(tsProject))
.js
.pipe(gulp.dest('dest'));
});
gulp.task('default', ['compile-ts'], function() {
return gulp.watch(['./src/app.ts'], ['compile-ts']);
});
您必须在您的盒子上安装npm(这是node.js安装的一部分)。您需要导航到项目目录(在命令提示符中)并键入 npm install 。
安装完所有npm模块后,您应该可以在VSCode窗口中键入 Ctrl + Shift + B 。该项目应该在dest目录中构建并放置一个app.js文件(如果它之前没有创建过,那么应该创建它)。您可以对app.ts文件进行更改,保存更改后,应该会看到app.js重新生成。
gulp.watch命令使用一组文件路径来监视更改作为其第一个参数,以及在检测到任何更改时重新运行的gulp命令数组。
您可以查看here了解如何使用gulp构建过程减少设置。我不知道您是否想要一次观看所有这些文件,或者您是否希望根据您正在处理哪一个(ts vs less)来设置两个不同的监视任务。我希望这有帮助!
此外,这将创建一个长时间运行的任务。我不确定如何从VSCode终止此任务。我目前所做的是运行 Ctrl + Shift + B ,它会在VSCode编辑器的顶部给你一点提示,说明任务已经在运行,让你从那里终止任务。我确定有更好的方法可以做到这一点,但我还没想到它。