Otimizando tempo de trabalho com o Gulp
- De: Rafael Matos
- 10 Nov, 2022
- Segurança e informação
A necessidade do desenvolvedor em se preocupar com a performance do site, além da otimização de imagens e outros critérios precisam ser visto. Deixar uma página web lenta significa ter uma perda resultante em número de acessos para o usuário final. Para isso não acontecer, hoje em dia existem algumas ferramentas que proporcionam um resultado rápido.
A ferramenta do Gulp.js proporciona ao desenvolvedor Front-end um ganho enorme de tempo com o seu kit de ferramentas projetas em JavaScript, para facilitar a compilação final. Simplesmente, o desenvolvedor programa a tarefa e roda o comando para executar, isso permite criar várias tarefas e executá-las de uma vez só. Como por exemplo um processo de execução em fila.
O Gulp.js é um automatizador de tarefas do nosso Front-end, com isso é responsável por fazer toda a parte que um desenvolvedor front-end deveria fazer antes de colocar o site no ar.
Algumas das possibilidades que o Gulp permite fazer:
— Otimizar imagens.
— Minificar arquivos CSS e JS.
— Compilar SASS.
— Trabalhar com modo de Desenvolvimento/Produção.
— Trabalhar com BrowserSync (Sincronizar as alterações em tempo real com o navegador).
— Minificar HTML.
— Juntar arquivos.
— Limpar arquivos.
Abaixo, vamos ver um exemplo prático de como otimizar imagens utilizando o Gulp.
Utilizando o Gulp para otimizar imagens
Inicialmente vamos começar criando o arquivo package.json, na sua IDE de preferência, abra o terminal e execute o seguinte comando:
npm initEsse comando é responsável por inicializar o pacote node, será perguntado algumas questões como por exemplo, nome do projeto, se possui Git, nome do autor, ficando a seu critério de resposta. Vale ressaltar que esse arquivo também será responsável por armazenar as dependências do seu projeto.
Após terminado, irá criar automaticamente na raíz do seu projeto um arquivo chamado package.json e logo em seguida vamos instalar o Gulp através do comando:
npm i gulp -g --save -devEsse comando é responsável por instalar a dependência oficial do Gulp.js, clicando aqui, você encontra mais detalhes de sua documentação.
Vamos instalar também dois plugins do Gulp para otimizar imagens.
npm i gulp-imagemin --save -dev
npm i gulp-webpO primeiro, busca minificar o tamanho das imagens, já o segundo tem como objetivo converter imagens PNG, JPEG, TIFF para WEBP, formato de imagem leve para navegadores. Também uma série de outros plugins disponíveis na comunidade do npm, como por exemplo para diminuir especificamente a qualidade de um arquivo PNG (gulp-pngquant) e ganhar em velocidade e compatibilidade para o iOS, com o objetivo de auxiliar o processo de conversão.
Agora, vamos propor que temos a seguinte estrutura de pastas com imagens dentro do nosso projeto:
|-- css/
|-- images/
-- banners/
-- banner.png
-- imagem01.png
-- imagem02.png
-- imagem03.png
|-- js/
|-- index.html
|-- gulpfile.js
|-- package.jsonCom a nossa estrutura de pastas definidas, vamos aplicar o seguinte código abaixo em um novo arquivo chamado gulpfile.js, para isso, crie na raíz do seu projeto.
var gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
const diretorio = { imagens: 'img/**/*' };
const destino = { imagens: 'dist/img' };
gulp.task('default', function(){
return gulp.src(diretorio.imagens)
.pipe(webp())
.pipe(imagemin())
.pipe(gulp.dest(destino.imagens))
});Para ver esse código funcionando, basta abrir o terminal de sua IDE e digitar o seguinte comando:
gulpContudo, esse trabalho poderá ser ainda melhorado explorando ainda mais, buscando informações com a ferramenta do Gulp e sua documentação. Para finalizar a entrega de um site, pensar também no SEO, se torna essencial passar por esse processo de otimização, tanto quanto scripts e arquivos de estilo visual também. Imagine só, ter que compilar vários arquivos e juntar todos de uma vez só e manualmente? Seria um processo extremamente lento e moroso. Por isso, o Gulp surgiu para facilitar a vida do desenvolvedor.
Notícias relacionadas
Aviso do uso de cookies no navegador e LGPD
14 Ago, 2022A importância de ter um aviso de cookies no navegador e afinal, o que o LGPD tem haver com isso?
Leia mais
Otimizando tempo de trabalho com o Gulp
10 Nov, 2022Uma ferramenta capaz de agilizar o tempo de trabalho do desenvolvedor front-end, além de pensar na parte de SEO e perfomance.
Leia mais
SEO na prática para desenvolvedores
20 Out, 2022Manter um site otimizado e ranqueado para o Google e sair na frente da concorrência passa também pelo desenvolvedor.
Leia mais