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

Question

我刚开始使用 VS Code，我想知道在哪里可以找到 gulpfile.js 和 tsconfig.json 来查看 TS 和 Less 文件并编译它们即时。

我看了 John Papa 的演讲，还看了 this webinar。它提到他已经为 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 window 中键入 Ctrl+Shift+B。该项目应该构建一个 app.js 文件并将其放置在 dest 目录中（如果以前没有创建它，则应该创建它）。您可以更改 app.ts 文件，保存更改后，您应该会看到 app.js 重新生成。

gulp.watch 命令使用一组文件路径来监视更改作为其第一个参数，并使用一组 gulp 命令在检测到任何这些更改时重新运行 .

您可以查看 here 了解如何在 gulp 构建过程中减少设置。我不知道你是否想一次观看所有这些文件，或者你是否想根据你一次正在处理的任务设置两个不同的监视任务（ts vs less）。希望对您有所帮助！

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

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

VSCode gulpfile.js and tsconfig.json for AngularJS and Typescript application

angularjs

typescript

visual-studio-code