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

htmlmin - minificando html no usemin

Ola!

No final do curso, sem ter nenhum grande problema, tentei adicionar o modulo de minificação do html

lendo adocumentação do usemin, vi que seria possivel adicionar algo seguindo o padrão feito para js e css:

gulp.task('usemin', function() {
  return  gulp.src('dist/**/*.html') 
    .pipe(usemin({
      js: [uglify],
      css: [autoprefixer({ browsers: ['last 2 versions']}), cssmin],        
     html: [htmlmin]
    }))
    .pipe(gulp.dest('dist'));
});

Ao testar ( npm run gulp ) nao houve erros de compilação, porem, somente um arquivo foi minificado.

Criei para teste uma task exclusiva para o modulo htmlmin e a chamei na minha task default:

gulp.task('htmlmin',['usemin'], function() {
   gulp.src('dist/**/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});

Funcionou sem problemas, fazendo eu concluir, dando a impressao que o processo de htmlmin ocorreu em paralelo aos outros processos ( inclusive o único arquivo que era minificado com htmlmin, variava cada vez que eu executava a task default).

Existe alguma forma de sinalizar o fim de um processo para iniciar outro dentro dos parametros do usemin? Estou fazendo algo errado?

Esta tudo funcionando com uma task isolada, mas nao deveria funcionar dentro do usemin? ( até pq na documentação tem esse exemplo usando uma versao mais antiga (minifyHtml) : https://www.npmjs.com/package/gulp-usemin )

obrigado pela ajuda!

4 respostas
solução!

Oi Márcio. Ao que tudo indica você encontrou um bug no usemin. Concordo com você que deveria funcionar. Inclusive você seguiu o que esta na documentação e não teve sucesso, o que reforça essa hipótese.

Salve !

Outra pequena dúvida: O Gulp sempre roda todas as Tasks em paralelo?

Para garantir que um task rode após outra temos sempre que usar as dependencias nas tasks?

O Grunt tem essa caracteristica de tasks paralelas ou todas as tarefas sao sempre sequenciais? Seria essa a principal diferença entre Gulp e Grunt?

Tive alguns problemas implantando o Gulp em alguns projetos antigos... A maioria das vezes era executado o gulp.js pelo NPM sem apresentar qualquer erro, porem ao visualizar os arquivos, eles nao eram minificados nem concatenados em alguns casos. O fato de nao ser apresentado nehum erro dificultou bastante o processo de entendimento do que estava errado.

Após trabalhar com dependencias encadeadas, alterando a task default, isso foi resolvido, porem minha task default ficou apenas com 2 tasks ( a de compactacao de imagem img e uma de minificacao encadeada com todas as outras).

Esse procedimento resolveu o problema, mas ficou péssima a leitura e entendimento do documento, pois o encadeamento de dependencias, ao meu ver, dificulta a leitura e entendimento do arquivo.

Existe alguma outra maneira de organizar isso de uma forma mais "verbosa"?

Muito obrigado!

Gulp sempre roda em paralelo por padrão, por isso é mais performático e mais complicado (além disso ele gera as transformações em memória através de streamings). Tem como ser serial, você aprendeu colocando uma dependência na task. Esse é o jeito do Gulp, não há outra forma.

Grunt roda tudo serialmente, por isso é menos performático e mais previsível (cada task do Grunt grava no disco e a próxima lê do disco, isso tem menos performance). Tem como ser async, mas você precisa de ganbiarra e outros módulos.

Sucesso e bom estudo Márcio!

Salve Flavio!!! Acho que achei o pulo do gato!!!

Estou colocando aqui caso alguém da comunidade queira sequenciar as task sem ser pelas dependencias!

tem um modulo pa gerenciar isso!!

https://www.npmjs.com/package/gulp-sequence

Abracao!!

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