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

Question

有一个gulp项目使用gulp.js文件，但我的项目是打字稿，所以我宁愿在打字稿中有一个gulp文件。我可以将这个过程分成两个步骤： 1.将typescript gulp文件手动转换为js，然后 2.打电话给gulp <some-task-name> 但这似乎并不是最佳的。有没有更好的方法呢？

Answer 1

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

1. 安装ts-node和typescript： $ npm i -D ts-node typescript
2. 使用以下代码创建gulpfile.ts：

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

   （或将您现有的Gulpfile.js重命名为gulpfile.ts）
3. 开始构建： $ 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

Answer 2

在项目的根目录中设置一个gulp.js文件，只有以下行。

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

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

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

• 请务必先运行以下命令： npm install typescript --save-dev npm install fs --save-dev

Answer 3

如果其他人碰到这个，@ tony19上面的回答只适用于某些项目;-)

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