13 Compartilhamentos 477 Views 2 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: Como estruturar os processos e as práticas de times ágeis?
Artigos
9 visualizações
Artigos
9 visualizações

Manifesto Ágil: Como estruturar os processos e as práticas de times ágeis?

Plataformatec - 9 de abril de 2019

Confira as características que estruturam o time Ágil.

6 Startups brasileiras que estão contratando agora
Artigos
4 visualizações
Artigos
4 visualizações

6 Startups brasileiras que estão contratando agora

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

Procurando uma oportunidade para seu talento? Prepare seu currículo!

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

Firebase // Dicionário do Programador

Thais Cardoso de Mello - 8 de abril de 2019

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

2 Responses

  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
  2. No segundo exemplo há um erro, a variável “js_dist_name” não está referenciada corretamente no pipe.

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (05/04)
Notícias
9 visualizações
9 visualizações

Promoções de Jogos do Final de Semana (05/04)

Carlos L. A. da Silva - 5 de abril de 2019
Por que os CAPTCHAs existem e porque o fim deles está próximo
Artigos
8 visualizações1
8 visualizações1

Por que os CAPTCHAs existem e porque o fim deles está próximo

Carlos L. A. da Silva - 5 de abril de 2019
Travei! Não Consigo Programar! // Vlog #92
Vídeos
5 visualizações
5 visualizações

Travei! Não Consigo Programar! // Vlog #92

Thais Cardoso de Mello - 4 de abril de 2019
Como usar os Sticky Notes do Windows 10
Dicas
5 visualizações
5 visualizações

Como usar os Sticky Notes do Windows 10

Carlos L. A. da Silva - 3 de abril de 2019