如何使用打字稿文件运行 gulp答案

【问题标题】：How can I run gulp with a typescript file如何使用打字稿文件运行 gulp
【发布时间】：2018-09-25 15:20:30
【问题描述】：

有一个使用 gulp.js 文件的 gulp 项目，但我的项目在 typescript 中，所以我宁愿在 typescript 中有一个 gulp 文件。可以将过程分为两个步骤，其中我：

1.手动将typescript gulp文件转译成js，然后
2. 拨打gulp <some-task-name>

但这似乎不是最优的。有没有更好的做法这个？

【问题讨论】：

标签： javascript typescript configuration compilation gulp

【解决方案1】：

在项目的根目录中设置一个gulp.js 文件，除了以下行之外什么都没有。

eval(require('typescript').transpile(require('fs').readFileSync("./gulp.ts").toString()));

然后在文件gulp.ts 中创建另一个用打字稿编写的实际 gulp 文件。将会发生的情况是 gulp.js 文件将被加载，但将通过编译您的 `gulp.ts' 文件并传递转译结果来引导进程。

这使我们不必在使用 gulp.ts 文件之前对其进行预编译。相反，您只需键入 gulp test，它将从您的 tyepscript 文件中执行，无需任何额外调用。

确保首先运行以下命令：
npm install typescript --save-dev
npm install fs --save-dev

【讨论】：

这听起来很有希望，但您在说明中遗漏了很多步骤。 Gulp 需要 gulpfile.js 或者您会收到 No gulpfile found 错误。如果我将您的代码 sn-p 放在 gulpfile.js 中，我会收到此错误：TypeError: Cannot read property 'task' of undefined。如果我将代码 sn-p 粘贴到默认的 gulp 任务中，也是如此。您也没有为您的gulp test 命令提供代码 sn-p。

【解决方案2】：

来自Gulp docs for transpilation：

转译

您可以使用需要转译的语言（如 TypeScript 或 Babel）编写 gulpfile，方法是更改 gulpfile.js 上的扩展名以指示语言并安装匹配的转译器模块。

对于 TypeScript，重命名为 gulpfile.ts 并安装 ts-node 模块。

对于 Babel，重命名为 gulpfile.babel.js 并安装 @babel/register 模块。

所以在 Gulp 中添加 TypeScript 支持的更简单方法：

安装ts-node、typescript和@types/gulp：

$ npm i -D ts-node typescript @types/gulp

如果您有一个tsconfig.json 文件集ts-node.compilerOptions.module 到"commonjs"
```
{
    // these options are overrides used only by ts-node 
    "ts-node": {
        "compilerOptions": {
            "module": "commonjs" 
        }
    }
}
```
（你不需要tsconfig.json 文件，这只是为了你的项目中已经有一个文件）

使用以下演示代码创建gulpfile.ts：

import gulp from 'gulp'; // or import * as gulp from 'gulp'
gulp.task('default', () => console.log('default'));

（或将现有的 Gulpfile.js 重命名为 gulpfile.ts）

开始构建：
```
$ npx gulp
```

输出应该类似于：

$ gulp
[21:55:03] Requiring external module ts-node/register
[21:55:03] Using gulpfile ~/src/tmp/typescript-tmp/gulpfile.ts
[21:55:03] Starting 'default'...
default
[21:55:03] Finished 'default' after 122 μs

【讨论】：

这不再起作用了。我得到SyntaxError: Cannot use import statement outside a module 如果项目的type 是commonjs 和TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" 如果项目的类型是module
我已经在 Gulp 中发布了一个问题，看看这个方法是否可以再次开始工作。 github.com/gulpjs/gulp/issues/2623
我对这个问题进行了更多调查。我有 2 个项目，两个项目都只有最少的 node_modules。一个因提到的错误而失败，另一个完美地工作。不同之处在于完美运行的那个没有 tsconfig.json 文件。所以 tsconfig 文件中的某些内容导致了错误。其次，这是 ts-node 的问题，而不是 Gulp。
这给出了我正在寻找的答案:) github.com/TypeStrong/ts-node/issues/922#issuecomment-667076602 它说"compilerOptions" 下的"module" 字段需要设置为"commonjs"。我已经更新了答案以包含所需的 tsconfig.json 设置
我再次编辑了答案以合并此评论中给出的建议（即使在需要能够使用 ESM 样式模块的 Vite 项目中，您仍然可以在 Gulp 中使用 ts）github.com/TypeStrong/ts-node/issues/922#issuecomment-673155000

【解决方案3】：

万一其他人遇到这种情况，@tony19 上面的回答仅适用于某些项目 ;-)

import * as gulp from 'gulp'; 并不总是有效（这取决于您的 tsconfig.json 设置 - 特别是 allowSyntheticDefaultImports），使用“更安全”的东西是 import gulp from 'gulp';，无论 allowSyntheticDefaultImports 值如何，它都应该有效。

【讨论】：