如何在TypeScript中使用gulp插件？

Question

我没有在gulp-load-plugins中找到TypeScript的例子。不幸的是，我的TypeScript太差了，无法理解，应该从TypeScript评论中做些什么。

我试过：

import * as _gulpPlugins from 'gulp-load-plugins';
const gulpPlugins: IGulpPlugins = _gulpPlugins();

return gulp.src(sourceFilesGlobSelections)
        .pipe(gulpPlugins.pug())
        // ...

它发出了来自Webpack的4条警告(我不知道75:13-25指的是哪个数字；.pipe(gulpPlugins.pug())在50行)：

WARNING in ../node_modules/gulp-load-plugins/index.js 75:13-25
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

WARNING in ../node_modules/gulp-load-plugins/index.js 81:48-63
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

WARNING in ../node_modules/gulp-load-plugins/index.js 117:40-55
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

WARNING in ../node_modules/gulp-load-plugins/index.js 122:51-66
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

这是在@types/gulp-load-plugins上说的

/**
 * Extend this interface to use Gulp plugins in your gulpfile.js
 */
interface IGulpPlugins {
}

我试过：

interface IGulpPlugins {
  pug: () => NodeJS.ReadWriteStream;
}

它还界定：

declare module 'gulp-load-plugins' {

    interface IOptions {
        // ...
    }

    interface IPluginNameMappings {
        [npmPackageName: string]: string
    }

    /** Loads in any gulp plugins and attaches them to an object, freeing you up from having to manually require each gulp plugin. */
    function gulpLoadPlugins<T extends IGulpPlugins>(options?: IOptions): T;

    // ...
}

看来我应该使用gulpLoadPlugins而不是接口扩展.用我目前的TypeScirpt熟练程度来说，这是我所了解的全部，但是仅仅理解如何在TypeScript中使用gulp-load-plugins还不够。

Answer 1

在gulp-load-plugins-tests.ts中有一个工作示例

import * as gulp from 'gulp';
import gulpConcat = require('gulp-concat');
import gulpLoadPlugins = require('gulp-load-plugins');

interface GulpPlugins extends IGulpPlugins {
    concat: typeof gulpConcat;
}

gulp.task('taskName', () => {
    gulp.src('*.*')
        .pipe(plugins.concat('concatenated.js'))
        .pipe(gulp.dest('output'));
});

关于Critical dependency: the request of a dependency is an expression：不要绑定webpack项目的Node.js依赖关系，这些项目的目标是Node.js (不是浏览器)。webpack-节点-外部会告诉webpack不要捆绑Node.js库，但是仍然可以像往常一样导入和使用它们。