如何在 Gulp 管道中并行运行两个单独的插件？

Question

我正在尝试设置 Gulp 任务，通过使用 gulp-ttf2woff 和 gulp-ttf2woff2 插件将 .ttf 字体转换为 webfont 格式。分别将源字体转换为.woff和.woff2。

我提出了这两个独立的功能，每个插件一个：

function fontsW(done) {
    src(fontsSrc)
        .pipe(ttf2woff())
        .pipe(dest(fontsDist))
    done();
};

function fontsW2(done) {
    src(fontsSrc)
        .pipe(ttf2woff2())
        .pipe(dest(fontsDist))
    done();
};

是否可以将它们浓缩在一个函数中，让我们称之为function fonts(done) {} 来同时处理两个插件？

基本上，我想要这样的东西

function fontsW2(done) {
    src(fontsSrc)
        .pipe(ttf2woff())
        .pipe(ttf2woff2())
        .pipe(dest(fontsDist))
    done();
};

ttf2woff() 和ttf2woff2() 都接收src 的输出，并将它们自己处理的文件提供给dest。

Answer 1

你可以这样做：

function fontsW(done) {
    src(fontsSrc)
        .pipe(ttf2woff())
        .pipe(dest(fontsDist))

     src(fontsSrc)
        .pipe(ttf2woff2())
        .pipe(dest(fontsDist))
    done();
};

Answer 2

您可以定义一个并行调用这两个函数的任务：

gulp.task('fonts', gulp.parallel(ttf2woff, ttf2woff2));

您可以在其他任务中使用此任务（例如，从您的 default 任务中调用它），也可以直接从终端调用它：

gulp fonts