Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Redimensionar imagens com gulp

Olá galera, tudo tranks?

Alguém saberia me ajudar com um plugin do gulp que redimensione imagens com multiplas saídas? Por Exemplo, tenho uma imagem com um tamanho de 1000x1000 e apartir dela quero gerar uma outra imagem com 500x500, depois uma com 400x250 e uma menor com 300x200.

Obs: Já fiz isso no grunt com um módulo chamado responsive_images. Só não estou conseguindo achar uma altertiva para o gulp e que funcione bem.

Obrigado, até mais! :D

3 respostas

Olá, Nilton.

Usei o que está com o link abaixo. Quando usei não tive nenhum problema com ele: https://www.npmjs.com/package/gulp-image-resize

solução!

Valew pela dica, Marco.

Conseguir chegar em uma solução utilizando o puglin que você indicou. Não sei se é a melhor, mas resolveu minha necessidade. Estou deixando o código que utilizei logo abaixo.

var imageResizer = require('gulp-image-resize')
, rename = require('gulp-rename');

gulp.task('resize-images', () => {
  const image_dest = 'dist/images'; // Destino das imagens
  const image_source =
    gulp.src('src/images/**/*.{jpg,png}');

  // Small images
  image_source
    .pipe(imageResizer({
      width: 300,
      height: 300,
      crop: true,
      upscale: false
    }))
    .pipe(rename(function (path) {
      path.basename += '-small'
    }))
    .pipe(gulp.dest(image_dest))
  // Medium images
  image_source
    .pipe(imageResizer({
      width: 500,
      crop: false,
      upscale: false
    }))
    .pipe(rename(function (path) {
      path.basename += '-medium'
    }))
    .pipe(gulp.dest(image_dest))
  //Large images
  image_source
    .pipe(imageResizer({
      width: 800,
      crop: false,
      upscale: false
    }))
    .pipe(rename(function (path) {
      path.basename += '-large'
    }))
    .pipe(gulp.dest(image_dest))
})

Post com a referência

Show de bola Nilton. Obrigado por postar o código. :-)