代码之家 › 专栏 › 技术社区 › Andy Jenkins

如何使用typescript文件运行gulp

gulp compilation configuration typescript javascript

8

Andy Jenkins · 技术社区 · 7 年前

有一个使用一大口的大口项目。js文件,但我的项目是在typescript中,所以我宁愿在typescript中有一个gulp文件。可以将该过程分为两个步骤,其中:

1、手动将typescript gulp文件转换为js,然后
2、电话 gulp <some-task-name>

但这似乎并不理想。有没有更好的方法这

3 回复 | 直到 7 年前

1

15

Daniel Tonon 4 年前

从…起 Gulp docs for transpilation :

发丝

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

对于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" 
        }
    }
}
```
(您不需要 t配置。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

2

3

Kevin 6 年前

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

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

3

1

Andy Jenkins 7 年前

设置 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