13 Compartilhamentos 494 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

5 fatos que todo departamento de TI pode aprender com Fortnite
Artigos
7 visualizações
Artigos
7 visualizações

5 fatos que todo departamento de TI pode aprender com Fortnite

Carlos L. A. da Silva - 1 de julho de 2019

O Departamento de TI de uma empresa não é apenas um lugar onde os caras jogam Fortnite o dia inteiro. Grandes desastres podem vir de lá também...

HTML // Dicionário do Programador
Vídeos
2 visualizações
Vídeos
2 visualizações

HTML // Dicionário do Programador

Thais Cardoso de Mello - 1 de julho de 2019

Começou a 3ª temporada do Dicionário do Programador do Codigo Fonte TV e já largamos com um tema muito presente e essencial em nossas vidas, o HTML!

Promoções de Jogos do Final de Semana (28/06)
Notícias
8 visualizações
Notícias
8 visualizações

Promoções de Jogos do Final de Semana (28/06)

Carlos L. A. da Silva - 28 de junho de 2019

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

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

FIREBASE Database na Prática com JAVASCRIPT PURO // Mão no Código #14
Vídeos
1,655 compartilhamentos6,806 visualizações
1,655 compartilhamentos6,806 visualizações
Como baixar o novo Windows Terminal
Dicas
18 visualizações
18 visualizações

Como baixar o novo Windows Terminal

Carlos L. A. da Silva - 26 de junho de 2019
Libra: o que sabemos sobre a criptomoeda do Facebook
Artigos
12 visualizações
12 visualizações

Libra: o que sabemos sobre a criptomoeda do Facebook

Carlos L. A. da Silva - 25 de junho de 2019
WebAssembly // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,811 visualizações
1,655 compartilhamentos6,811 visualizações

WebAssembly // Dicionário do Programador

Thais Cardoso de Mello - 24 de junho de 2019