如何使用typescript文件运行gulp

从…起 Gulp docs for transpilation :

发丝

您可以使用需要透明的语言(如TypeScript或Babel)编写gulpfile,方法是更改 gulpfile.js 指示语言并安装匹配的transpiler模块。

• 对于TypeScript,重命名为 gulpfile.ts 并安装 ts-node 单元
• 对于Babel,重命名为 gulpfile.babel.js 并安装 @babel/register 单元

因此,在Gulp中添加TypeScript支持的更简单方法是:

1. 安装 ts-node ,则, typescript 和 @types/gulp :

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

2. 如果你有 tsconfig.json 文件集 ts-node.compilerOptions.module 到 "commonjs"

   {
       // these options are overrides used only by ts-node 
       "ts-node": {
           "compilerOptions": {
               "module": "commonjs" 
           }
       }
   }
   

   (您不需要 t配置。json 文件,这仅适用于您的项目中已经有一个文件的情况)

3. 创造 gulpfile。ts 使用以下演示代码:

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

   (或重命名现有 Gulpfile.js 到 gulpfile。ts )

4. 启动生成:

   $ 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

如果其他人遇到这种情况,@tony19上面的答案只适用于某些项目;-)

import * as gulp from 'gulp'; 不会一直工作(具体取决于您的tsconfig.json设置 allowSyntheticDefaultImports ),使用“更安全”的东西是 import gulp from 'gulp'; 无论 allowSyntheticDefaultImports 价值

设置 gulp.js 在项目的根目录中,只包含以下行。

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

然后在文件中创建另一个用typescript编写的实际gulp文件 gulp.ts 。将发生的是 吞咽js公司 文件将被加载,但会通过编译“gulp”来引导进程。并传递传输的结果。

这使得我们不必预先编译这个大口。在使用之前,请先查看ts文件。相反,您可以直接键入 gulp test 它将从您的tyepscript文件执行,无需任何额外调用。

• 请确保首先运行以下操作:
  npm install typescript --save-dev
npm install fs --save-dev