13 Compartilhamentos 300 Views 1 Comments

Minificando arquivos JS no Gulp

28 de fevereiro de 2018

Automatizar algumas tarefas no durante o processo de desenvolvimento, principalmente as tarefas mais chatinhas, é o que o Gulp faz de melhor.

Eu uso (e abuso) do Gulp de diversas formas, uma das minhas favoritas é minificar/compactar meus scripts javascript em arquivos .min.js. Ou melhor ainda, juntar todos meus arquivos .js e um único .min.js automaticamente!

Mágica? Nada disso… Gulp!

Apresento então a vocês 2 tasks que costumo utilizar em meu gulpfile.js:

Importante: Vou tomar por base que o Gulp já está instalado no seu projeto. A intenção aqui é ser prático, OK?.

o primeiro exemplo pega todos os arquivos .js da pasta assets_dev/js e cria uma versão minificada na pasta assets/js.
Lembre-se que as pastas citadas são atribuidas nas seguintes variáveis: js_dev e js_dist. Mude à vontade, porém se a pasta for a mesma será necessário criar uma exceção para não minificar o próprio arquivo .min.js. Dá pra resolver isso usando o gulp-ignore, OK?

Nesta segunda task (que particularmente gosto mais), todos os arquivos .js da pasta assets_dev/js serão minificados em um único arquivo chamado scripts.min.js na pasta assets/js.

Isso sim que é praticidade.

Para executar as tarefas, basta ter o gulp instalado e também os modulos: gulp-plumber, gulp-uglify, gulp-rename e gulp-concat.

Depois execute o seguinte comando no seu terminal:

Melhor ainda se você adicionar a tarefa scripts no seu watch do Gulp, assim você não precisa se preocupar em ficar executando a tarefa a cada mudança em algum arquivo.

Depois, no terminal, digite:

Pronto, agora já dá pra ver a “mágica” acontecer.

Você pode se interessar

Manifesto Ágil: Retrospectivas Lúdicas
Artigos
7 visualizações
Artigos
7 visualizações

Manifesto Ágil: Retrospectivas Lúdicas

Plataformatec - 14 de janeiro de 2019

Há alguns anos, quando tive os meus primeiros contatos práticos com os métodos ágeis, conheci e participei pela primeira vez (como ouvinte) de um famoso evento do universo ágil: Retrospectivas. Após duas horas de reunião, entendi (equivocadamente, por sinal) que essa reunião tinha dois grandes objetivos: escutar as pessoas elogiando algumas características da última entrega do […]

Agile // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,805 visualizações
Vídeos
1,655 compartilhamentos6,805 visualizações

Agile // Dicionário do Programador

Thais Cardoso de Mello - 14 de janeiro de 2019

Agile é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (11/01)
Notícias
16 visualizações
Notícias
16 visualizações

Promoções de Jogos do Final de Semana (11/01)

Carlos L. A. da Silva - 11 de janeiro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

One Response

  1. Parabéns pelo artigo.
    Se puder, me tire uma dúvida.

    É possível criar um workflow independente da versão global do gulp?

    Digo isso porque projetos antigos, ao atualizar a versão do gulp, acabam tendo incompatibilidade, e gerando um retrabalho. As vezes acaba sendo necessário até atualizar os includes e sintaxe de plugin.

    Queria configurar de uma forma, que mesmo após 1 ano de feito a configuração, quando fosse necessário atualizar um sass ou js, não me desse algum erro ou conflito por causa de update.

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

God of War: segredos dos bastidores do melhor jogo de 2018
Artigos
15 visualizações
15 visualizações

God of War: segredos dos bastidores do melhor jogo de 2018

Carlos L. A. da Silva - 11 de janeiro de 2019
As 5 Melhores Linguagens para 2019 // Vlog #86
Vídeos
1,655 compartilhamentos6,813 visualizações
1,655 compartilhamentos6,813 visualizações

As 5 Melhores Linguagens para 2019 // Vlog #86

Thais Cardoso de Mello - 10 de janeiro de 2019
Como acessar fotos curtidas por qualquer usuário no Facebook
Dicas
17 visualizações
17 visualizações

Como acessar fotos curtidas por qualquer usuário no Facebook

Carlos L. A. da Silva - 9 de janeiro de 2019
O que Isaac Asimov imaginou para 2019?
Artigos
23 visualizações
23 visualizações

O que Isaac Asimov imaginou para 2019?

Carlos L. A. da Silva - 8 de janeiro de 2019