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

Não consigo minificar as imagens

Olá Flávio.

Estou com o mesmo problema de um outro tópico que o aluno não deu um feedback final (https://cursos.alura.com.br/forum/topico-otimizacao-de-imagens-43296)

Conferi o código várias vezes, já li o forúm mas não consigo encontrar o erro. Ta tudo rodando , ele executa a tarefa mas retorna com 0 imagens minificadas

package.json

{
  "name": "imagemin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp": "^3.9.0"
  },
  "devDependencies": {
    "gulp-imagemin": "^2.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC"
}

gulpfile.js

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

gulp.task('build-img' , function() {
    gulp.src('imagemin/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('imagemin/otm'));
});

no prompt de comando aparece a seguinte mensagem

C:\Users\Danilo\imagemin>npm run gulp build-img --save

> imagemin@1.0.0 gulp C:\Users\Danilo\imagemin
> gulp "build-img"

[15:54:27] Using gulpfile ~\imagemin\gulpfile.js
[15:54:27] Starting 'build-img'...
[15:54:27] Finished 'build-img' after 8.69 ms
[15:54:27] gulp-imagemin: Minified 0 images

Estou usando a versão 6.11.2 do Node.JS. Se precisar instalar outra versão mais antiga eu também não sei como faço. hahaha. Entre no site do Node e não vejo como baixar outra versão mais antiga.

9 respostas

O comando que você esta executando não esta correto, apesar de dar erro

npm run gulp build-img --save

O correto é

npm run gulp build-img

A solução do outro aluno, questionável (aliás, talvez seja um teste interessante aqui) é reinstalar o Gulp com a opção --save no lugar de --save-dev. Todavia, isso não deveria resolver o problema, mas você pode tentar.

Sua máquina é Windows, correto? Talvez haja algum problema nessa plataforma. Mas para vermos a solução do colega, instale o gulp usando --save no lugar de --save-dev.

Sobre o Node, você pode usar a versão 6 ou 8, contanto que seja par.

Reinstalei de novo e não deu certo, mesmo com a solução do colega. Rodei também o npm run gulp build-img ( sem o --save) Meu sistema é Windows sim.

{
  "name": "imagemin",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp" : "gulp"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-imagemin": "^2.3.0"
  }
}

C:\Users\Danilo\imagemin>npm run gulp build-img

imagemin@1.0.0 gulp C:\Users\Danilo\imagemin gulp "build-img"

[17:09:25] Using gulpfile ~\imagemin\gulpfile.js [17:09:25] Starting 'build-img'... [17:09:25] Finished 'build-img' after 8.35 ms [17:09:25] gulp-imagemin: Minified 0 images

C:\Users\Danilo\imagemin> ```

Se você já minificou e esta gravando na mesma pasta de origem nada será minificado. Se você tem certeza que esta tudo certo, pode ser um lapso do seu Windows que não esta sendo capaz de exibir essas informações.

Então, compare a imagem otimizada no final com a imagem original. Aliás, lembre-se que as imagens precisam ser png ou jpeg.

Outra coisa, não use nome de pasta do seu projeto como nome de módulo do node.js. Isso causará problemas estranhos. Só renomei a pasta do seu projeto para outra coisa.

Aliás, apague a pasta node_modules, rode npm install e cole aqui tudo o que ele exibe no console. Você verificou se o plugin foi instalado corretamente, leu o log?

Segue o que esta sendo exibido no console

https://gist.github.com/anonymous/8e0732916f6cc280e9987d1cd4d0ecff#file-npm-install-gulp

Flávio, engraçado que as demais tarefas consigo executar normalmente. O clean e o copy estão funcionando certinho sem problemas. Agora o imagemin não está mesmo. Mas pelo menos consegui entender os conceitos estou seguindo com o curso enquanto não encontramos uma solução.

Aliás parabéns, um dos melhores instrutores da Alura. Explica com muita clareza. Agradeço pelo empenho para ajudar.

Opa! Sobre o log, eu preciso do log do imagemin, da instalação.

Olha, obrigado pelo feedback. Estou igual a você quero descobrir o que está acontecendo. Se puder subir seu projeto do jeito que está no Git sem node_modules fica ainda mais fidedigno meu teste.

Fico no aguardo do log.

solução!

Flávio bom dia! Misteriosamente acabei de refazer todo o processo (apaguei tudo e fiz tudo, absolutamente tudo de novo exceto baixar o node js) e deu certo.

Vou deixar o link do meu projeto aqui caso alguém tenha o mesmo problema que o meu.

Eu vi duas coisas diferentes que não sei se tem a ver. Quando baixei o projeto eu apaguei um arquivo chamado .DS_Store (não sei se tem algo a ver)

A outra mudança que vi é que no package.json o gulp ficou com dependencies e somente o gulp-imagemin ficou com devDependencies.

Antes quando não estava dando certo os dois estão com devDependencies

https://gist.github.com/dandfl/3d2b030f4f49e9ab1e40bfa0a4ba833e

Boa notícia! Eu vou monitorar aqui. Mas pela definição, seja em dependencies ou devDependencies não teria problema nenhuma. A diferença entre um e outro é apenas para indicar quais são as dependências do desenvolvedor e quais são aquelas da aplicação quando rodando. Como gulp é uma ferramenta de desenvolvimento, ela deveria ficar em devDependencies.