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

Impossível minificar imagens

Não consigo utilizar a task imagemin no Linux.

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

Erro:

lennonjesus@blahblah:~/projetos/lennon/Alura/gulp/01-capitulo/projeto$ gulp imagemin
[16:45:16] Using gulpfile ~/projetos/lennon/Alura/gulp/01-capitulo/projeto/gulpfile.js
[16:45:16] Starting 'imagemin'...
[16:45:16] Finished 'imagemin' after 10 ms

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: spawn /home/lennonjesus/projetos/lennon/Alura/gulp/01-capitulo/projeto/node_modules/optipng-bin/vendor/optipng ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)

Já reinstalei as dependências, já atualizei as versões, já atualizei o node e o gulp... Sempre o mesmo problema.

27 respostas

Fique tranquilo. Zilhões de alunos já passaram por essa parte sem problema algum.

Onde está seu script completo do Gulp? Diga-me também sua versão do Linux.

Já testou seu código em outra distribuição Linux?

Apague sua pasta node_modules. Depois de apagar baixe todas dependências com o comando:

npm install

Você instalou as versões que uso no curso? Se instalou outra versão não garanto porque pode haver bug.

Colê o conteúdo do seu package.json para eu ver.

Fique tranquilo. Zilhões de alunos já passaram por essa parte sem problema algum.

Onde está seu script completo do Gulp?

'use strict'

var
  gulp = require('gulp')
  ,imagemin = require('gulp-imagemin')
  ,clean = require('gulp-clean')
  ,concat = require('gulp-concat')
  ,htmlReplace = require('gulp-html-replace')
  ,uglify = require('gulp-uglify')
  ,usemin = require('gulp-usemin')
  ,minifycss = require('gulp-minify-css')
  ,browserSync = require('browser-sync')
;

gulp.task('server', function () {
  browserSync.init({
    server: {
      baseDir: 'dist'
    }
  });

  gulp.watch('dist/**/*').on('change', browserSync.reload);
});

gulp.task('default', ['copy'], function() {
  gulp.start(
    // 'build-js',
    // 'build-html'
    'usemin'
  );
});

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

gulp.task('copy', ['clean'], function () {
  return gulp
    .src('src/**/*')
    .pipe(gulp.dest('dist'));
});

gulp.task('clean', function () {
  return gulp
    .src('dist')
    .pipe(clean());
});

gulp.task('usemin', function () {
  return gulp
    .src('dist/**/*.html')
    .pipe(usemin({
      js: [uglify()],
      css: [minifycss()]
      // inlinejs: [uglify()],
      // inlinecss: [minifycss(), 'concat']
    }))
    .pipe(gulp.dest('dist'));
  ;
});

Diga-me também sua versão do Linux.

Linux 3.19.0-33-generic #38-Ubuntu SMP  x86_64 x86_64 x86_64 GNU/Linux

Já testou seu código em outra distribuição Linux? Não.

Apague sua pasta node_modules. Depois de apagar baixe todas dependências com o comando:

npm install

Já fiz. Não funcionou. :(

Você instalou as versões que uso no curso? Se instalou outra versão não garanto porque pode haver bug.

Já instalei as versões específicas e também as mais atuais. Não funcionaram.

Colê o conteúdo do seu package.json para eu ver.

{
  "name": "projeto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.10.0",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-html-replace": "^1.5.5",
    "gulp-imagemin": "^2.3.0",
    "gulp-minify-css": "^1.2.2",
    "gulp-uglify": "^1.5.1",
    "gulp-usemin": "^0.3.16"
  }
}

Opa, eu não ensinei a usar o "use strict", por que colocou isso lá? Se você fizer isso e alguma lib declarar alguma variável sem usar var vai dar problema em vários lugares. Como não foi você que criou as libs você não pode ativar o strict mode indiscriminadamente.

Faça um teste removendo o strict mode e depois me passa. Aparentemente seu código e tudo está certinho, nota 10.

Aguardo seu feedback, mas primeiro, eu quero o log que é exibido no terminal quando você instala imagemin. Para isso, apague dentro de node_modules a pasta imagemin e instale novamente. É esse log de instalação, mesmo grande, que eu quero.

Apaguei manualmente as seguintes pastas:

node_modules/imagemin node_modules/imagemin-gifsicle node_modules/imagemin-jpegtran node_modules/imagemin-optipng node_modules/imagemin-svgo

Segue log da execução do comando npm install --save-dev gulp-imagemin

npm WARN install Couldn't install optional dependency: Unsupported
- object-assign@4.0.1 node_modules/meow/node_modules/object-assign
projeto@1.0.0 /home/lennonjesus/projetos/lennon/Alura/gulp/01-capitulo/projeto
├─┬ browser-sync@2.10.0
│ ├─┬ chokidar@1.3.0
│ │ └─┬ readdirp@2.0.0
│ │   └── readable-stream@2.0.4 
│ ├─┬ localtunnel@1.8.0
│ │ └─┬ request@2.65.0
│ │   ├─┬ bl@1.0.0
│ │   │ └── readable-stream@2.0.4 
│ │   ├── extend@3.0.0 
│ │   └─┬ http-signature@0.11.0
│ │     └── asn1@0.1.11 
│ ├─┬ meow@3.3.0
│ │ └── object-assign@3.0.0 
│ └─┬ opn@3.0.3
│   └── object-assign@4.0.1 
├─┬ gifsicle@3.0.3
│ └─┬ bin-build@2.2.0
│   ├─┬ decompress@3.0.0
│   │ ├─┬ decompress-tar@3.1.0
│   │ │ ├─┬ tar-stream@1.3.1
│   │ │ │ └── readable-stream@2.0.4 
│   │ │ └─┬ through2@0.6.5 
│   │ │   └── readable-stream@1.0.33 
│   │ ├─┬ decompress-tarbz2@3.1.0
│   │ │ └─┬ through2@0.6.5 
│   │ │   └── readable-stream@1.0.33 
│   │ ├─┬ decompress-targz@3.1.0
│   │ │ └─┬ through2@0.6.5 
│   │ │   └── readable-stream@1.0.33 
│   │ ├─┬ decompress-unzip@3.4.0
│   │ │ └── vinyl@1.1.0 
│   │ ├─┬ vinyl-assign@1.2.1
│   │ │ ├── object-assign@4.0.1 
│   │ │ └── readable-stream@2.0.4 
│   │ └─┬ vinyl-fs@2.2.1 
│   │   ├─┬ glob-stream@5.2.0 
│   │   │ ├── extend@3.0.0 
│   │   │ ├─┬ through2@0.6.5 
│   │   │ │ └── readable-stream@1.0.33 
│   │   │ └── unique-stream@2.2.0 
│   │   ├── object-assign@4.0.1 
│   │   └── vinyl@1.1.0 
│   └─┬ download@4.4.3
│     ├─┬ caw@1.1.0
│     │ └── object-assign@3.0.0 
│     ├─┬ got@5.2.0
│     │ └── object-assign@4.0.1 
│     ├─┬ gulp-decompress@1.2.0
│     │ └── readable-stream@2.0.4 
│     ├── object-assign@4.0.1 
│     ├─┬ read-all-stream@3.0.1
│     │ └── readable-stream@2.0.4 
│     ├── readable-stream@2.0.4 
│     ├── vinyl@1.1.0 
│     └─┬ vinyl-fs@2.2.1 
│       └─┬ glob-stream@5.2.0 
│         ├── extend@3.0.0 
│         ├─┬ through2@0.6.5 
│         │ └── readable-stream@1.0.33 
│         └── unique-stream@2.2.0 
├─┬ gulp@3.9.0
│ ├─┬ gulp-util@3.0.7
│ │ └── object-assign@3.0.0 
│ └─┬ vinyl-fs@0.3.14
│   ├─┬ glob-stream@3.1.18
│   │ └─┬ through2@0.6.5 
│   │   └── readable-stream@1.0.33 
│   └─┬ through2@0.6.5 
│     └── readable-stream@1.0.33 
├─┬ gulp-clean@0.3.1
│ └─┬ through2@0.4.2
│   └── readable-stream@1.0.33 
├─┬ gulp-concat@2.6.0
│ └─┬ through2@0.6.5 
│   └── readable-stream@1.0.33 
├─┬ gulp-cssmin@0.1.7
│ └─┬ gulp-util@2.2.20
│   └─┬ through2@0.5.1
│     └── readable-stream@1.0.33 
├─┬ gulp-html-replace@1.5.5
│ ├── object-assign@4.0.1 
│ └── readable-stream@2.0.4 
├─┬ gulp-imagemin@2.4.0 
│ ├─┬ imagemin@4.0.0 
│ │ ├─┬ buffer-to-vinyl@1.1.0
│ │ │ ├── readable-stream@2.0.4 
│ │ │ └── vinyl@1.1.0 
│ │ ├─┬ concat-stream@1.5.1
│ │ │ └── readable-stream@2.0.4 
│ │ ├─┬ imagemin-gifsicle@4.2.0 
│ │ │ └─┬ through2@0.6.5 
│ │ │   └── readable-stream@1.0.33 
│ │ ├── imagemin-jpegtran@4.3.2 
│ │ ├─┬ imagemin-optipng@4.3.0 
│ │ │ └─┬ through2@0.6.5 
│ │ │   └── readable-stream@1.0.33 
│ │ ├── imagemin-svgo@4.2.0 
│ │ ├── readable-stream@2.0.4 
│ │ ├─┬ stream-combiner2@1.1.1
│ │ │ └── readable-stream@2.0.4 
│ │ └─┬ vinyl-fs@2.2.1 
│ │   ├─┬ duplexify@3.4.2
│ │   │ └── readable-stream@2.0.4 
│ │   ├─┬ glob-stream@5.2.0 
│ │   │ ├── extend@3.0.0 
│ │   │ ├─┬ ordered-read-streams@0.3.0
│ │   │ │ └── readable-stream@2.0.4 
│ │   │ ├─┬ through2@0.6.5 
│ │   │ │ └── readable-stream@1.0.33 
│ │   │ └── unique-stream@2.2.0 
│ │   ├─┬ gulp-sourcemaps@1.6.0
│ │   │ └── vinyl@1.1.0 
│ │   ├─┬ merge-stream@1.0.0
│ │   │ └── readable-stream@2.0.4 
│ │   └── vinyl@1.1.0 
│ ├── object-assign@4.0.1 
│ └─┬ plur@2.1.1 
│   └── irregular-plurals@1.1.0 
├─┬ gulp-minify-css@1.2.2
│ ├── object-assign@4.0.1 
│ └── readable-stream@2.0.4 
├─┬ gulp-uglify@1.5.1
│ └─┬ through2@2.0.0
│   └── readable-stream@2.0.4 
└─┬ gulp-usemin@0.3.16
  ├─┬ gulp-concat@2.4.3
  │ └─┬ gulp-util@3.0.7
  │   ├── object-assign@3.0.0 
  │   └─┬ through2@2.0.0
  │     └── readable-stream@2.0.4 
  └─┬ through2@0.5.1
    └── readable-stream@1.0.33 

npm WARN EPACKAGEJSON projeto@1.0.0 No description
npm WARN EPACKAGEJSON projeto@1.0.0 No repository field.

Qual versão do Node você tem instalada????????????????

Tem que ver o máximo a versão V4.X. Se você baixou a versão 5, pode ter problemas. Apenas as versões pares do Node.js tem suporte de 18 meses, as versões ímpares, apesar de estáveis, pode ter problema porque estão na crista da onda.

Você removeu o "use strict"?

Sim. Removi o "use strict". Mesmo assim, não funcionou.

Minha versão do Node é a v0.12.7 e a do NPM é 3.3.12.

Acabei de testar em dois Linux aqui da empresa e funcionou. Bizarro, não?

Então, sabiamente fui lá no repositório do gulp-imagemin para ver se há alguma issue. E olhe o que encontrei:

https://github.com/sindresorhus/gulp-imagemin/issues/45

Tem uma galerinha que usa Linux que encontra um problema igual ao seu (desde 2014). A galera de lá não descobriu a causa, mas deu uma sugestão para resolver o problema nessas distribuições Linux problemáticas.

var formatos = ['src/img/**/*.png', 'src/img/**/*.jpg'];

gulp.task('imagemin', function () {
  gulp
    .src(formatos )
    .pipe(imagemin())
    .pipe(gulp.dest('src/img'));
});

Veja que você tem que passar em uma array todos os formatos que o imagemin deve trabalhar, no lugar de passar o Glob pattern para qualquer imagem.

Só me tira uma dúvida: as imagens que estão dentro da pasta do projeto são as do projeto, certo? Você não adicionou nada lá diferente, ou adicionou?

Mas de qualquer maneira, tente essa solução.

Se ainda não funcionar, tente migrar para a versão V.4 do Node.js.

Em outro site, pesquisando o seu problema, vi que pode ser uma permissão no npm que não tem permissão para instalar os arquivos corretamente.

Você instalou o imagemin com sudo?

Ok, I was having this very same issue, was super frustrated, but after hours of research I finally figured it out.

As @pagoenka suggested in his comment, a npm permission issue prevents some grunt-contrib-imagemin dependencies to install correctly. Here's what I did to fix it:

Fix npm permissions by following their own instructions: 

https://docs.npmjs.com/getting-started/fixing-npm-permissions

Delete project's node_modules/ folder

Restart

Reinstall node modules by running npm install at the projects folder.

Hope this helps.

Cheers!

Veja que ele dá um link para corrigir as permissões do npm. Mas antes disso, sugiro instalar o Node v4 para ver se ele já resolve o problema.

Bom, não sei mais o que fazer. Os linux que tenho aqui todos funcionam, deve ser algo bem específico da distro.

Então...

Já estive em vários sites, em várias issues (muitas já dadas como fechadas, inclusive) e nada.

Já estava certo de que não haviam problemas com o gulpfile.

O que me passa pela cabeça é ter alguma relação com o fato de eu estar atrás de um proxy corporativo... Mas o SO está devidamente configurado e, mesmo a partir da linha de comando, tudo funciona normalmente passando pelo proxy (npm install, bower install, git push, apt-get install, wget, curl...).

Vou testar no Mac OS X e depois dou um feedback.

Eu uso OSX e funciona. Nos linux aqui também. Esse do proxy, hum... bom você ter falado. Mas o estranho é que se ele baixou outros pacotes, teria que ter baixado as dependências do imagemin também.

Eu vou deixar sua dúvida aberta até que você veja que no OSX funciona normalmente.

Eu fico muito chateado e bolado com essa situação. Por que as vezes o código depende de alguma coisa da plataforma do aluno e quando dá problema fica complicado descobrir o que está de errado.

Eu vou continuar pesquisando, até porque, pode haver outro aluno com o mesmo problema que o seu nessa distribuição específica.

Aguardo seu feedback do teste.

Qual versão do seu Ubuntu?

Uso o Ubuntu 15.04.

Realmente não acredito ser problema com o proxy, visto que o sistema está totalmente configurado.

Um detalhe interessante é que o grunt-imagemin funciona perfeitamente.

Até pelo monte de relatos de problemas parecidos que andei lendo, estou acreditando que há algum conflito relacionado à combinação entre as versões de tudo o que está envolvido no processo: SO, node, gulp, dependências, etc, etc...

O que chateia mais é que, apesar de gostar bastante de javascript, as informações de log de problemas dificilmente ajudam de verdade na solução dos problemas.

Essas mensagens de log não me dizem nada.

Enfim...

Assim que testar, aviso.

Sim, uma crítica à plataforma Node.js são as mensagens de erro. Porém, no Node. V4 melhorou muito. Por isso, tente com essa versão no seu Linux para ver se resolve.

Instalei o node v4.2.3 através de nvm.

Não mudou muito...

gulp imagemin
[15:25:37] Using gulpfile ~/projetos/lennon/Alura/gulp/01-capitulo/projeto/gulpfile.js
[15:25:37] Starting 'imagemin'...
[15:25:37] Finished 'imagemin' after 11 ms

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: spawn /home/lennonjesus/projetos/lennon/Alura/gulp/01-capitulo/projeto/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin/vendor/optipng ENOENT
    at exports._errnoException (util.js:874:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:441:9)
    at process._tickCallback (node.js:355:17)

Droguinha, então vou aguardar seu teste no MAC. Aqui funciona certinho, até linux. Se funcionar em outro micro, eu sugiro você omitir a parte da otimização de imagens e continuar o curso até a gente descobrir como resolver esse caso tão específico.

Já omiti há muito tempo. =D

O vilão na sua máquina parece ser a compilação do optipng usado pelo imagemin.

Última solução que encontrei:

npm cache clean gulp-imagemin
rm -rf node_modules/gulp-imagemin
npm install gulp-imagemin

Limpar do cache e instalar novamente (sem definir a versão, o mais novo mesmo). Se não funcionar, só nos resta mesmo é trocar de sistema operacional. Não faço ideia do problema na sua distribuição.

Eiiiiiiiiiiiii, espere um pouco! Você está usando um plugin que eu não pedi para usar no treinamento:

,minifycss = require('gulp-minify-css')

Você tinha que ter me avisado. Por que não usou o que eu peço no treinamento?

 ,cssmin = require('gulp-cssmin');

Aparentemente não tem nenhuma relação, mas se ele depende de algo comum de outra dependência pode acontecer algum problema.

Você alterou mais alguma coisa????????????????????

Outra coisa, vi que você fez o treinamento de Angular antigo. Você já fez o novo? O que eu apareço no vídeo? Se não fez, aproveita para fazer.. o treinamento foi refeito do zero! :)

Flávio,

Já havia testado o clean cache, sem sucesso. :(

O problema com o imagemin começou antes de eu evoluir o gulpfile até esse nível.

Sendo mais específico, como o imagemin está no início do seu treinamento, ele já deu erro logo de cara. O omiti e segui adiante.

A mudança para o gulp-minify-css foi para alguns testes mais avançados. :p

Beleza. Aguardo seu feedback do teste em outra plataforma ou outro linux.

Abraço

A notícia boa é que, como eu já esperava, testei no Mac OS X e funcionou normalmente, sem que eu precisasse sequer atualizar minha versão do Node.

A notícia ruim é que continua não funcionando no Linux.

Amanhã devo testar numa outra máquina Linux para ver o resultado.

Aguardo seu teste em outro linux.

Oi Lennon, estou em outra distribuição Linux?

solução!

Flávio,

Testei em outro Ubuntu e obtive o mesmo problema.

Como esse Linux também está atrás de um proxy corporativo, acho que vou ficar na explicação de que algum problema com o proxy faz com que a instalação do imagemin ou uma de suas dependências não ocorra com sucesso, apesar de o log não acusar nada especificamente.

Abraços.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software