我有一个gulp项目,它使用了gulp.js文件,但是我的项目是在typescript中的,所以我更希望gulp文件是在typescript中的。1.手动将typescript gulp文件转换为js,然后2.呼叫gulp <some-task-name>但这似乎并不是最佳的,有没有更好的方法呢?
gulp <some-task-name>
vwoqyblh1#
来自蒸发的Gulp文件:翻译您可以使用需要transpilation的语言(如TypeScript或Babel)编写gulpfile,方法是更改gulpfile.js上的扩展名以指示语言并安装匹配的transpiler模块。
gulpfile.js
gulpfile.ts
gulpfile.babel.js
因此,在Gulp中添加TypeScript支持的更简单的方法是:1.安装ts-node、typescript和@类型/大口:
ts-node
typescript
$ npm i -D ts-node typescript @types/gulp
1.如果有tsconfig.json文件,请将ts-node.compilerOptions.module设置为"commonjs"
tsconfig.json
ts-node.compilerOptions.module
"commonjs"
{ // these options are overrides used only by ts-node "ts-node": { "compilerOptions": { "module": "commonjs" } } }
1.使用以下演示代码创建gulpfile.ts:
import gulp from 'gulp'; // or import * as gulp from 'gulp' gulp.task('default', () => console.log('default'));
Gulpfile.js
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
ef1yzkbh2#
如果其他人遇到这种情况,@tony19上面的答案只适用于某些项目;- )import * as gulp from 'gulp';并不总是有效(这取决于您的tsconfig.json设置-特别是allowSyntheticDefaultImports),使用“更安全”的是import gulp from 'gulp';,它应该有效,而不管allowSyntheticDefaultImports值如何。
import * as gulp from 'gulp';
allowSyntheticDefaultImports
import gulp from 'gulp';
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文件中执行,而不需要任何额外的调用。
gulp.js
eval(require('typescript').transpile(require('fs').readFileSync("./gulp.ts").toString()));
gulp.ts
gulp test
npm install typescript --save-devnpm install fs --save-dev
npm install typescript --save-dev
npm install fs --save-dev
3条答案
按热度按时间vwoqyblh1#
来自蒸发的Gulp文件:
翻译
您可以使用需要transpilation的语言(如TypeScript或Babel)编写gulpfile,方法是更改
gulpfile.js
上的扩展名以指示语言并安装匹配的transpiler模块。gulpfile.ts
并安装ts-node模块。gulpfile.babel.js
并安装@babel/register模块。因此,在Gulp中添加TypeScript支持的更简单的方法是:
1.安装
ts-node
、typescript
和@类型/大口:1.如果有
tsconfig.json
文件,请将ts-node.compilerOptions.module
设置为"commonjs"
tsconfig.json
文件,如果项目中已经有一个文件,则使用此文件)*1.使用以下演示代码创建
gulpfile.ts
:Gulpfile.js
重命名为gulpfile.ts
)*1.开始生成:
输出应类似于以下内容:
ef1yzkbh2#
如果其他人遇到这种情况,@tony19上面的答案只适用于某些项目;- )
import * as gulp from 'gulp';
并不总是有效(这取决于您的tsconfig.json设置-特别是allowSyntheticDefaultImports
),使用“更安全”的是import gulp from 'gulp';
,它应该有效,而不管allowSyntheticDefaultImports
值如何。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