Переименование изображений из массива с помощью Gulp - PullRequest
0 голосов
/ 04 октября 2019

Я хочу изменить размер и переименовать изображения в массе, используя 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

Любые указатели будут высоко оценены, и спасибо заранее!

...