如何使用typescript文件运行gulp

olmpazwi  于 2022-12-08  发布在  Gulp
关注(0)|答案(3)|浏览(255)

我有一个gulp项目,它使用了gulp.js文件,但是我的项目是在typescript中的,所以我更希望gulp文件是在typescript中的。
1.手动将typescript gulp文件转换为js,然后
2.呼叫gulp <some-task-name>
但这似乎并不是最佳的,有没有更好的方法呢?

vwoqyblh

vwoqyblh1#

来自蒸发的Gulp文件:
翻译
您可以使用需要transpilation的语言(如TypeScript或Babel)编写gulpfile,方法是更改gulpfile.js上的扩展名以指示语言并安装匹配的transpiler模块。

  • 对于TypeScript,请重命名为gulpfile.ts并安装ts-node模块。
  • 对于Babel,重命名为gulpfile.babel.js并安装@babel/register模块。

因此,在Gulp中添加TypeScript支持的更简单的方法是:
1.安装ts-nodetypescript和@类型/大口:

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

1.如果有tsconfig.json文件,请将ts-node.compilerOptions.module设置为"commonjs"

{
    // these options are overrides used only by ts-node 
    "ts-node": {
        "compilerOptions": {
            "module": "commonjs" 
        }
    }
}
  • (您不需要tsconfig.json文件,如果项目中已经有一个文件,则使用此文件)*

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

import gulp from 'gulp'; // or import * as gulp from 'gulp'
gulp.task('default', () => console.log('default'));
  • (或将现有的Gulpfile.js重命名为gulpfile.ts)*

1.开始生成:

$ 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
ef1yzkbh

ef1yzkbh2#

如果其他人遇到这种情况,@tony19上面的答案只适用于某些项目;- )
import * as gulp from 'gulp';并不总是有效(这取决于您的tsconfig.json设置-特别是allowSyntheticDefaultImports),使用“更安全”的是import gulp from 'gulp';,它应该有效,而不管allowSyntheticDefaultImports值如何。

axzmvihb

axzmvihb3#

在项目的根目录中建立一个gulp.js文件,只包含以下行。
eval(require('typescript').transpile(require('fs').readFileSync("./gulp.ts").toString()));
然后在gulp.ts文件中创建另一个实际的gulp文件,该文件是用typescript编写的,将加载gulp.js文件,但会通过编译你的'gulp.ts'文件并传递传递传递的结果来引导进程。
这使得我们在使用gulp.ts文件之前不需要预编译它,而是只需输入gulp test,它就会从tyepscript文件中执行,而不需要任何额外的调用。

  • 确保首先运行以下命令:

npm install typescript --save-dev
npm install fs --save-dev

相关问题