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

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

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

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

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

Instalamos SSDs da Samsung em nossos Notebooks Dell (Veja se Performance Melhora) // Vlog #93
Vídeos
1,655 compartilhamentos6,809 visualizações
Vídeos
1,655 compartilhamentos6,809 visualizações

Instalamos SSDs da Samsung em nossos Notebooks Dell (Veja se Performance Melhora) // Vlog #93

Thais Cardoso de Mello - 18 de abril de 2019

Resolvemos mostrar pra vc o passo a passo do que fizemos na troca do HD para o SSD, incluindo a transferência automatizada dos dados e do sistema operacional, ou seja, não foi necessário reinstalar nada.

Como corrigir problemas de ERR_CONNECTION_TIMED_OUT no navegador
Dicas
8 visualizações
Dicas
8 visualizações

Como corrigir problemas de ERR_CONNECTION_TIMED_OUT no navegador

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

Mensagem de erro indica que estourou o tempo limite entre o navegador e o servidor do site. Há formas de contornar o problema.

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 uma Resposta para Diego Tavares Cancelar resposta

Your email address will not be published.

Mais publicações

O influenciador digital está morto?
Artigos
7 visualizações
7 visualizações

O influenciador digital está morto?

Carlos L. A. da Silva - 17 de abril de 2019
SaaS // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,816 visualizações
1,655 compartilhamentos6,816 visualizações

SaaS // Dicionário do Programador

Thais Cardoso de Mello - 15 de abril de 2019
Promoções de Jogos do Final de Semana (12/04)
Notícias
9 visualizações
9 visualizações

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

Carlos L. A. da Silva - 12 de abril de 2019
A cientista da computação que decifrou o buraco negro
Artigos
21 visualizações
21 visualizações

A cientista da computação que decifrou o buraco negro

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