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

Minificação de Imagens não funciona com plugins

Pessoal, tenho a seguinte configuração no Gulpfile e a mesma com ou sem plugin do Imagemin(como Jpegtran, e o Optipng) não estão fazendo diferença nas minhas imagens se eu remover os plugins e depois recolocar. Tem alguma coisa errada na minha configuração?


const gulp = require("gulp"),
      imagemin = require('gulp-imagemin'),
      imageminJpg = require('imagemin-jpegtran'),
      imageminPng = require('imagemin-optipng');

gulp.task('default', () =>
    gulp.src("dicasnovo_src/assets/images/*.{jpg,png}")
        .pipe(imagemin([
                imageminJpg(),
                imageminPng()
            ],
            {verbose: true}
        ))
        .pipe(gulp.dest(''))
);
5 respostas

Consegui rodar pelo menos o Jpegtran assim:

gulp.task('default', () =>
    gulp.src("dicasnovo_src/assets/images/*.{jpg,png}")
        .pipe(imageminJpg({progressive: true}) ()
        )
        .pipe(gulp.dest(''))
);

Setar os plugins manualmente assim substitui a configuração default do imagemin? A configuração default já utiliza esses plugins? Alguem tem esse conhecimento?

Optipng ainda não esta funcionando

Oi Fábio, tudo bem? Primeiro, dizer que algo não está funcionando é muito vago, não dá pra ter certeza de qual é o problema. Você está tendo algo erro? As imagens são processadas mas você não vê resultado? As imagens não são processadas nem tem nenhuma mensagem de erro?

solução!

Wanderson, bom dia. Eu especifiquei qual o erro sim, removendo o uso dos plugins do imagemin como o jpegtran e optipng o resultado apresentado de compressão era o mesmo, ou seja, nao havia diferença em usar com ou sem.

Após um tempo de pesquisa consegui criar a seguinte task que acredito funcionar melhor para esse processo de minificação de imagens com o gulp.

gulp.task('minifica-imagens', () =>
    gulp.src("pasta_src/assets/images/**/*")
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('pasta_dist/assets/images'))
);

Oi Fábio, isso não indica um erro. Note que, se a imagem "não otimizada" e a imagem "otimizada" não tiver diferenças de tamanho após o processo, isso indica algumas coisas:

  1. A imagem já está otimizada e o processo não conseguiu otimizar a imagem mais ainda. Isso pode acontecer.

  2. A otimização foi realizada, mas a perca de tamanho foi tão insignificante que não deu pra ser percebida. Alterações de tamanho na casa dos bits é difícil de perceber quando você normalmente vê isso em KB.

Alguns plugins durante o processo, apresentam uma porcentagem de redução no tamanho das imagens como resultado na otimização, esse valor pode ser de 0 a 100 porcento, sendo que zero indica que a imagem não pode ser otimizada. Entende o que eu quero dizer agora? Isso não quer dizer também que o plugin não esteja funcionando.