Question

我有一个gulp系列，其中包含以下行：

gulp.parallel( compressCSS1, compressCSS2, minifyHTML1, minifyHTML2 )

但是compressCSS1和compressCSS2实际上是相同的功能，只是在不同的文件上运行，例如：

function compressCSS1() {
return gulp.src( filesExist("./folder1/*.css", existOptions), {base: './'} )
    .pipe( debug() )
    .pipe( csso() )
    .pipe( gulp.dest( './', {overwrite:true} ) );
}

所以我基本上得到了一堆几乎相同的函数，我当然希望避免。

有没有一种方法可以改写该函数以一般性地指定接受其他glob？对我而言，答案不是一个不同的问题，因为在各种情况下，我都会遇到无法解决的情况（在某些情况下，输入可能是另一组文件的不同选项，等等）。

我正在尝试弄清楚如何在Gulp任务中将变量传递给函数。换句话说，从概念上讲类似：

gulp.parallel( compressCSS(arg1), compressCSS(arg2), minifyHTML(arg3), minifyHTML(arg4) )

谢谢您的帮助！

Answer 1

如果您的最终目标是避免重复相同的缩小脚本，那么您可以创建一个带有两个参数的函数：

需要缩小的文件列表
输出文件的名称

函数的骨架可能是这样的：

function compressCSS(assets, filename) {
  return gulp.src(assets)
    .pipe( debug() )
    .pipe( csso() )
    .pipe(concat(filename)) // Name of the output file
    .pipe( gulp.dest( './', {overwrite:true} ) );
}

然后，您可以从主函数中调用如下通用函数。

async function compressAllCSS() {
    compressCSS('./folder1/*.css', 'main.min.css');
    compressCSS('./folder2/*.css', 'header.min.css');
}

注意：不要在此处省略 async 关键字。它允许异步调用该函数内部的函数调用。

最后，您可以从 gulp 任务中调用 main 函数，如下所示：

gulp.parallel(compressAllCSS, minifyHTML)

如何在gulp.parallel中将变量传递给任务

1 个答案: