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

Windows 11 vem aí?!
Artigos
71 visualizações
Artigos
71 visualizações

Windows 11 vem aí?!

Carlos L. A. da Silva - 15 de junho de 2021

Depois de mais de cinco anos, há claros sinais de que o Windows 10 será substituído por uma próxima versão do sistema operacional da Microsoft.

As “gambiarras” que os desenvolvedores de jogos utilizam
Artigos
221 visualizações
Artigos
221 visualizações

As “gambiarras” que os desenvolvedores de jogos utilizam

Carlos L. A. da Silva - 6 de junho de 2021

Não seja tão duro com você mesmo! O caminho da programação está lotado de "gambiarras" e até jogos conhecidos apelam para alguns truques.

Qual framework de PHP é o melhor para 2021?
Artigos
330 visualizações
Artigos
330 visualizações

Qual framework de PHP é o melhor para 2021?

Carlos L. A. da Silva - 27 de maio de 2021

A Theme Selection fez um comparativo das opções disponíveis no mercado e você vai bater o martelo sobre qual é o melhor framework para suas necessidades.

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

Adeus a Mandic, um dos “pais” da internet brasileira
Artigos
437 visualizações
437 visualizações

Adeus a Mandic, um dos “pais” da internet brasileira

Carlos L. A. da Silva - 18 de maio de 2021
O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
555 visualizações
555 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021
Como planejar e construir um projeto de programação
Artigos
793 visualizações
793 visualizações

Como planejar e construir um projeto de programação

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