Gulp 调整图像大小以生成多个输出大小
我想使用gulp生成一组不同大小的图像,同时对它们进行优化。我认为有两种方法可以解决这个问题: 首先,可以为每个大小创建n个不同的任务,然后创建一个调用每个调整大小任务的主任务。主任务可能类似于:Gulp 调整图像大小以生成多个输出大小,gulp,image-resizing,Gulp,Image Resizing,我想使用gulp生成一组不同大小的图像,同时对它们进行优化。我认为有两种方法可以解决这个问题: 首先,可以为每个大小创建n个不同的任务,然后创建一个调用每个调整大小任务的主任务。主任务可能类似于: gulp.task('resize_images',['resize_100','resize_300','resize_800','resize_1000']); 这看起来还可以,并且您会得到很好的并行化,但是每个任务都有大量重复的代码,这意味着如果大小列表变得足够大,维护它可能是一场噩梦 我的另
gulp.task('resize_images',['resize_100','resize_300','resize_800','resize_1000']);
这看起来还可以,并且您会得到很好的并行化,但是每个任务都有大量重复的代码,这意味着如果大小列表变得足够大,维护它可能是一场噩梦
我的另一个想法是创建单个任务,但在其中使用for循环来迭代每个大小。像这样:
var gulp = require('gulp');
var imageminWebp = require('imagemin-webp');
var imageResize = require('gulp-image-resize');
var notify = require('gulp-notify');
var os = require('os');
var parallel = require('concurrent-transform');
var pipes = require('gulp-pipes');
gulp.task('resize_images', function() {
var sizes = [100,300,800,1000,2000];
var stream;
for (size in sizes) {
stream = gulp.src('images/master/**/*.{jpg,png,tiff}')
.pipe(parallel(
imageResize({
width: sizes[size],
height: sizes[size],
upscale: false
}),
os.cpus().length
))
.pipe(pipes.image.optimize())
.pipe(gulp.dest('images/derivative/' + sizes[size] + '/'))
.pipe(imageminWebp({quality: 75})())
.pipe(gulp.dest('images/derivative/' + sizes[size] + '/'))
}
return stream;
});
这看起来还可以,但不知什么原因,我感觉不太舒服。例如,在上面的解决方案中,通知很奇怪——我想在每个is大小的处理完成时通知,这是我通过单个主任务免费获得的。有没有更好的方法来完成我想做的事情?记住:Gulp只是JavaScript 吞咽任务并没有什么神奇之处。你不必把所有的东西都放在任务中。任务只是功能 您可以利用这一事实,根据某些参数动态生成一组任务,这样就不会到处都有重复的代码。在您的情况下,您可以为要创建的每个图像大小生成一个任务:
var resizeImageTasks = [];
[100,300,800,1000,2000].forEach(function(size) {
var resizeImageTask = 'resize_' + size;
gulp.task(resizeImageTask, function() {
return gulp.src('images/master/**/*.{jpg,png,tiff}')
.pipe(imageResize({
width: size,
height: size,
upscale: false
}))
.pipe(pipes.image.optimize())
.pipe(gulp.dest('images/derivative/' + size + '/'))
.pipe(imageminWebp({quality: 75})())
.pipe(gulp.dest('images/derivative/' + size + '/'))
});
resizeImageTasks.push(resizeImageTask);
});
gulp.task('resize_images', resizeImageTasks);
对于大口喝4:
var imagemin = require('gulp-imagemin');
var imageResize = require('gulp-image-resize');
var rename = require("gulp-rename");
function images(cb) {
[100, 300, 800, 1000, 2000].forEach(function (size) {
gulp.src('src/images/**/*.{jpg,jpeg,png}')
.pipe(imageResize({ width: size }))
.pipe(rename(function (path) { path.basename = `${path.basename}@${size}w`; }))
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
cb();
}
回调用于发出异步完成的信号(Gulp 4需要)。谢谢,这非常有效。我想我已经走上了“大口大口就是JS”的轨道,但我还没有走到你那么远。在我看来,它看起来并不是很好,但也许它不需要。这段代码不会用WebP图像覆盖优化后的图像吗?