AngularJS和Typescript应用程序的VSCode gulpfile.js和tsconfig.json

Question

我刚刚开始使用VS Code,我想知道在哪里可以找到a gulpfile.js和a tsconfig.json,这将让我观看TS和Less文件并在运行中编译它们.

我观看了John Papa的演讲以及此次网络研讨会.它提到他已经修改了Typscript的HotTowel应用程序但是我无处可以找到gulpfile应该是什么样子的任何例子.

如果有人可以与社区分享任何例子作为这个问题的答案,我真的很感激.更好的是,如果有人可以指向我在VSCode下运行的一些示例应用程序,它们具有我可以使用的gulpfile.js,那就更好了.

Answer 1

根据您的问题,我不完全确定您要解决的问题.你以前用过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命令数组,以便在检测到任何这些更改时重新运行.

您可以在这里查看如何使用gulp构建过程减少设置.我不知道您是否希望立即观看所有这些文件,或者您是否希望根据您正在处理的文件(ts vs less)设置两个不同的监视任务.我希望这有帮助!

此外,这将创建一个长期运行的任务.我不确定如何从VSCode终止此任务.我目前所做的是运行Ctrl + Shift + B,它会在VSCode编辑器的顶部给你一点提示,说明一个任务已在运行,让你从那里终止任务.我确信有更好的方法可以做到这一点,但我还没想出来.