Я хочу изменить размер и переименовать изображения в массе, используя Gulp. У меня есть задача, которая работает путем переименования файлов в соответствии с их размерами, но я хотел бы использовать сокращение в именах файлов, таких как -small
и -large
, и просто использовать числовое значение для процесса изменения размера.
Я попытался добавить несколько итераций массива пары ключ: значение в строку .forEach
...
[small:100, large:1000].forEach(function (size)
[{small:100, large:1000}].forEach(function (size)
... и затем пытается нацелить ключ / значение в строке imageResize
изображения, где «k» будет ключом. Это не работает для меня, и я до сих пор не смог самостоятельно отследить эту часть.
.pipe(rename(function (path) { path.basename = `${path.basename}-${size[k]}px`; }))
Вот текущее задание, которое выполняет свою работу. Он изменяет размер изображения на основе size
, а затем добавляет size
к имени файла в виде строки.
// Optimize Images
gulp.task("images", function (done) {
[100, 1000].forEach(function (size) {
return gulp.src(imagesSRC)
.pipe(newer(imagesDestSite)) // get newer images
.pipe(imageResize({ width: size })) // resize each according to array above
.pipe(rename(function (path) { path.basename = `${path.basename}-${size}px`; })) // put size in filename
.pipe(imagemin())
.pipe(gulp.dest(imagesDest))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest(imagesDestSite))
});
done();
});
Вывод задачи в настоящее время выглядит следующим образом:
image1-100px.jpg
image1-1000px.jpg
image2-100px.jpg
image2-1000px.jpg
Что работает, но я бы предпочел, чтобы результат был таким:
image1-small.jpg
image1-large.jpg
image2-small.jpg
image2-large.jpg
Любые указатели будут высоко оценены, и спасибо заранее!