javascript - Gulpfile 仅高效编译已更改的 TypeScript 文件

Question

我正在尝试让 gulp 编译并观察 TypeScript 文件。这是我到目前为止得到的

var tsProject = plugins.typescript.createProject(
{
    removeComments: false,
    target: 'ES5',
    module: 'amd',
    noExternalResolve: false,
    noImplicitAny: false,
});

var typescriptGlob = [
    presentationScriptsDir + '**/*.ts',
    definitelyTypedDefinitions
];

gulp.task("compile-typescript", function () {
    return gulp.src(typescriptGlob)
        .pipe(plugins.typescript(tsProject))
        .pipe(gulp.dest(presentationScriptsDir));
});

gulp.task("watch-typescript", function() {
    return gulp.watch(typescriptGlob, ["compile-typescript"]);
});

我正在使用 gulp-typescript .

但是，由于我们有数百个 TypeScript 文件，所以我不想每次其中一个文件发生更改时都重新编译所有文件。上面的代码就是这样做的(我能看出来是因为 watch-typescript 花费的时间至少和 compile-typescript 一样多)

我试过使用 gulp-changed , 像这样

gulp.task("compile-typescript", function () {
    return gulp.src(typescriptGlob)
        .pipe(plugins.changed(presentationScriptsDir, {extension: '.js'}))
        .pipe(plugins.typescript(tsProject))
        .pipe(gulp.dest(presentationScriptsDir));
});

这确实过滤掉了未更改的文件。但是 typescript 编译器会报告错误，因为它只获取一个文件，缺少通常从其他文件获取的类型声明。

我不想将 noExternalResolve 标志设置为 true，因为这样很多类型检查就不会进行，这就打消了很多最初使用 TypeScript 的理由。

如何更好地编写这个 gulpfile？

Answer 1

TypeScript 编译器不像大多数语言编译器那样经历单独的编译和链接阶段。所以，它确实无法完成增量编译。

正如您所说，为了进行类型检查，编译器需要加载并至少重新解析所有可能被引用的文件。

我们在项目中所做的是使用 Visual Studio 对“保存时编译”的支持，这将在我们开发和调试时为我们生成 .js 文件。 (显然该机制使用 noExternalResolve 功能)。然后我们依靠我们的单元测试过程和持续集成服务器来运行常规的 TypeScript 编译以获取所有语法和输入错误。

因此，我建议使用 noExternalResolve 标志运行您的 watch ，但也在您的工作流程中包括一个步骤，以在重要点运行完整的 TypeScript 编译。也许您可以指定某个“根”文件在更改时启动完整编译，或者您可以找到一些其他不太频繁发生的事件，您可以使用它来触发常规编译。