复制文件的 Gulpfile 任务应该优化图像(如果有)
Gulpfile task to copy files should optimize images if there are any
在我的 gulpfile 中,我正在复制多个 glob 文件(各种格式),如果这些 glob 中的任何一个包含图像,我想使用 gulp-imagemin
对其进行优化。
问题是 gulp-imagemin
只需要图像,否则会在日志中抛出不受支持的图像,所以如果我要传递整个 glob,它会抛出很多错误,我想避免这种情况。我已经尝试 gulp-if
过滤 glob,虽然它作为过滤器工作并防止这些错误,但它似乎总是至少通过一次,即使没有图像存在。例如,即使没有任何 png 文件,这仍然会调用 imagemin() 一次:
gulp.task('test:imagemin', function () {
return gulp.src('*.nothing')
.pipe(gulpif('*.png', imagemin({ verbose: true })));
});
这将记录 "Minified 0 images",因为在我的真实场景中,我传递了几十个没有图像的 glob,我的日志被它塞满了。如果我将 gulpif 条件设置为 static false,它根本不会调用 imagemin,所以它一定是这个条件在它应该的时候不为 false 的东西?
如果 glob 不包含某种类型的文件,我如何完全不调用 imagemin()?
在函数的第一个参数中使用 gulpif
。像这样:
gulpif(function(file) {
return file.extname.toLowerCase() == '.png';
}, imagemin({ verbose: true }))
或者用正则表达式(未测试):
gulpif(/\.png$/i, imagemin({ verbose: true }))
原来问题是 gulp-if
解决条件之前的操作。条件需要放在乙烯基流之外。所以首先我同步了 glob 来获取文件,然后我确定是否有任何支持的图像并将其保存到一个布尔值中。然后在调用 gulp-if 时我必须调节这个 bool 并嵌套在另一个 gulp-if 中进行过滤。
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));
}
在我的 gulpfile 中,我正在复制多个 glob 文件(各种格式),如果这些 glob 中的任何一个包含图像,我想使用 gulp-imagemin
对其进行优化。
问题是 gulp-imagemin
只需要图像,否则会在日志中抛出不受支持的图像,所以如果我要传递整个 glob,它会抛出很多错误,我想避免这种情况。我已经尝试 gulp-if
过滤 glob,虽然它作为过滤器工作并防止这些错误,但它似乎总是至少通过一次,即使没有图像存在。例如,即使没有任何 png 文件,这仍然会调用 imagemin() 一次:
gulp.task('test:imagemin', function () {
return gulp.src('*.nothing')
.pipe(gulpif('*.png', imagemin({ verbose: true })));
});
这将记录 "Minified 0 images",因为在我的真实场景中,我传递了几十个没有图像的 glob,我的日志被它塞满了。如果我将 gulpif 条件设置为 static false,它根本不会调用 imagemin,所以它一定是这个条件在它应该的时候不为 false 的东西?
如果 glob 不包含某种类型的文件,我如何完全不调用 imagemin()?
在函数的第一个参数中使用 gulpif
。像这样:
gulpif(function(file) {
return file.extname.toLowerCase() == '.png';
}, imagemin({ verbose: true }))
或者用正则表达式(未测试):
gulpif(/\.png$/i, imagemin({ verbose: true }))
原来问题是 gulp-if
解决条件之前的操作。条件需要放在乙烯基流之外。所以首先我同步了 glob 来获取文件,然后我确定是否有任何支持的图像并将其保存到一个布尔值中。然后在调用 gulp-if 时我必须调节这个 bool 并嵌套在另一个 gulp-if 中进行过滤。
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));
}