代码之家 › 专栏 › 技术社区 › Xeevis

复制文件的gulpfile任务应该优化图像(如果有)

gulp-if minimatch gulp-imagemin gulp javascript

0

Xeevis · 技术社区 · 6 年前

在我的gulpfile中,我正在复制多个文件全局(各种格式),如果其中任何一个全局包含一个图像,我想用 gulp-imagemin 是的。

问题是 吞咽成像 只希望映像在日志中抛出不受支持的映像,因此如果我传入整个glob,它将抛出许多错误,我希望避免这种情况。我试过了 gulp-if 要过滤glob,虽然它可以作为过滤器并防止这些错误,但它似乎总是至少通过一次,即使不存在图像。例如,即使没有任何PNG文件,它仍然会调用imagemin()一次:

gulp.task('test:imagemin', function () {
  return gulp.src('*.nothing')
    .pipe(gulpif('*.png', imagemin({ verbose: true })));
});

这将记录“缩小的0个图像”,因为在我的真实场景中,我传递了几十个没有图像的球,我的日志被垃圾邮件。如果我将gulpif condition设置为static false,它根本不会调用imagemin,那么它一定是这个条件下的某个东西,而不是应该的false?

如果glob不包含某个类型的文件,我怎么才能根本不调用imagemin()?

2 回复 | 直到 6 年前

1

0

redelschaap 6 年前

使用 gulpif 第一个参数中有一个函数。这样地:

gulpif(function(file) {
    return file.extname.toLowerCase() == '.png';
}, imagemin({ verbose: true }))

或使用正则表达式(未测试):

gulpif(/\.png$/i, imagemin({ verbose: true }))

2

0

Xeevis 6 年前

原来问题是 gulp-if 在条件之前解决操作。条件需要放在乙烯基流之外。因此,首先我同步了glob以获取文件,然后确定是否有任何支持的图像并将其保存到bool。然后当我打电话咕噜,如果我必须条件这个布尔和巢在另一个咕噜,如果过滤。

function copyFilesPipeline(assetGroup) {
  var containsImages = glob.sync(assetGroup.inputPaths).some(function (inputPath) {
    var ext = path.extname(inputPath).toLowerCase();
    return [".gif", ".jpg", ".png", ".svg"].includes(ext);
  });

  return gulp.src(assetGroup.inputPaths)
    .pipe(makeFilesLowercase())
    .pipe(gulpif(containsImages, gulpif('**/*.{gif,jpg,png,svg}', imagemin({ verbose: true }))))
    .pipe(newer(assetGroup.outputDir))
    .pipe(gulp.dest(assetGroup.outputDir));
}