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

8 jogos que foram cancelados para surgirem jogos diferentes
Artigos
4 visualizações
Artigos
4 visualizações

8 jogos que foram cancelados para surgirem jogos diferentes

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

Na indústria de jogos, às vezes, uma porta que se fecha é apenas uma oportunidade ali na frente.

Flutter // Dicionário do Programador
Vídeos
3 visualizações
Vídeos
3 visualizações

Flutter // Dicionário do Programador

Thais Cardoso de Mello - 17 de junho de 2019

HOSTGATOR→ https://codft.me/HGXkEA4xT34jg Você já ouviu falar em Flutter? E a dobradinha com a linguagem Dart? Você sabia que ele é um SDK Open Source criado pelo Google para o desenvolvimento de aplicativos Mobile de forma nativa, Desktop e também Web? Conheça mais dessa ótima ferramenta e o que ela é capaz de fazer nesse vídeo […]

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

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

Carlos L. A. da Silva - 14 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 uma Resposta para Diego Tavares Cancelar resposta

Your email address will not be published.

Mais publicações

Firebase na Prática com o Realtime Database // Mão no Código #13
Vídeos
4 visualizações
4 visualizações
Como se proteger do ataque BlueKeep
Dicas
6 visualizações
6 visualizações

Como se proteger do ataque BlueKeep

Carlos L. A. da Silva - 10 de junho de 2019
Websocket // Dicionário do Programador
Notícias
1,655 compartilhamentos6,808 visualizações
1,655 compartilhamentos6,808 visualizações

Websocket // Dicionário do Programador

Thais Cardoso de Mello - 10 de junho de 2019
Promoções de Jogos do Final de Semana (07/06)
Notícias
12 visualizações
12 visualizações

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

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