13 Compartilhamentos 1090 Views 3 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.

Carregando...

Você pode se interessar

Como cortar texto sem usar uma linha de script
Dicas
7 visualizações
Dicas
7 visualizações

Como cortar texto sem usar uma linha de script

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

Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.

Como começar a programar
Artigos
14 visualizações
Artigos
14 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021

Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.

Como cancelar qualquer conta online para sempre
Dicas
17 visualizações
Dicas
17 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020

Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?

3 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

Retrospectiva (positiva) de 2020
Artigos
20 visualizações
20 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020
O que seria internet quântica?
Artigos
20 visualizações
20 visualizações

O que seria internet quântica?

Carlos L. A. da Silva - 23 de dezembro de 2020
Como fazer uma árvore de Natal… com CSS!
Dicas
27 visualizações
27 visualizações

Como fazer uma árvore de Natal… com CSS!

Carlos L. A. da Silva - 21 de dezembro de 2020
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Notícias
31 visualizações
31 visualizações

Promoções de Jogos do Final de Semana (18/12) – Edição Natalina

Carlos L. A. da Silva - 18 de dezembro de 2020