Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2021

Modo escuro

Otimize suas imagens com Gulp e gulp-imagemin

Logo

Olá pessoal, hoje vamos continuar com o uso do Gulp, utilizando o plugin gulp-imagemin que comprimi as imagens, bastante útil para melhorar o carregamento do blog.

Abra terminal e crie a estrutura de diretórios com o comando abaixo:

mkdir -p ~/servidor/src/img

Entre no diretório servidor:

cd servidor

Crie o arquivo package.json:

npm init -y

Adicione o gulp como dependência de desenvolvimento do projeto:

npm install gulp --save-dev

Adicione gulp-imagemin como dependência de desenvolvimento do projeto:

npm install gulp-imagemin --save-dev

Crie o arquivo gulpfile.js na raiz do projeto e adicione o conteúdo abaixo:

const { src, dest} = require('gulp');
const imagemin = require('gulp-imagemin');

function minifyImage(cb) {
  src('src/**/*').pipe(imagemin({verbose: true})).pipe(dest('dist'));

  cb();
}

exports.default = minifyImage;

Acesse o site do Unsplash, realize o download de algumas imagens, após adicione as imagens no diretório src/img.

Visualize a estrutura de diretórios como ficou:

.
├── gulpfile.js
├── package.json
└── src
    └── img
        ├── ben-kelsey-ZAjoPssESXg-unsplash.jpg
        ├── docusign-e4lD50CCekA-unsplash.jpg
        ├── gabe-pierce-BV_ULiZFdxI-unsplash.jpg
        ├── good-faces-yliYi-2s9qg-unsplash.jpg
        ├── kasper-rasmussen-gdY2Ty37xX0-unsplash.jpg
        ├── maria-vojtovicova-7cfAzY0mj9w-unsplash.jpg
        ├── michael-oxendine-KGGwZZ7e9F4-unsplash.jpg
        ├── ricardo-gomez-angel-lqFM73nWnf8-unsplash.jpg
        ├── sebastian-cyrman-p43NEFmcWkI-unsplash.jpg
        ├── sirisvisual-posjE6NacVc-unsplash.jpg
        ├── stepan-kulyk-bdj6umLdzyo-unsplash.jpg
        ├── xps-6uneKLGrJPs-unsplash.jpg
        ├── xps-kLfkVa_4aXM-unsplash.jpg
        └── xps-uWFFw7leQNI-unsplash.jpg

2 directories, 16 files

Execute o comando abaixo para comprimir as imagens:

npx gulp-cli

Plugin gulp-imagemin em execução

Podemos perceber que foi criado um diretório dist com as imagens comprimidas:

.
├── dist
│   └── img
│       ├── ben-kelsey-ZAjoPssESXg-unsplash.jpg
│       ├── docusign-e4lD50CCekA-unsplash.jpg
│       ├── gabe-pierce-BV_ULiZFdxI-unsplash.jpg
│       ├── good-faces-yliYi-2s9qg-unsplash.jpg
│       ├── kasper-rasmussen-gdY2Ty37xX0-unsplash.jpg
│       ├── maria-vojtovicova-7cfAzY0mj9w-unsplash.jpg
│       ├── michael-oxendine-KGGwZZ7e9F4-unsplash.jpg
│       ├── ricardo-gomez-angel-lqFM73nWnf8-unsplash.jpg
│       ├── sebastian-cyrman-p43NEFmcWkI-unsplash.jpg
│       ├── sirisvisual-posjE6NacVc-unsplash.jpg
│       ├── stepan-kulyk-bdj6umLdzyo-unsplash.jpg
│       ├── xps-6uneKLGrJPs-unsplash.jpg
│       ├── xps-kLfkVa_4aXM-unsplash.jpg
│       └── xps-uWFFw7leQNI-unsplash.jpg
├── gulpfile.js
├── package.json
└── src
    └── img
        ├── ben-kelsey-ZAjoPssESXg-unsplash.jpg
        ├── docusign-e4lD50CCekA-unsplash.jpg
        ├── gabe-pierce-BV_ULiZFdxI-unsplash.jpg
        ├── good-faces-yliYi-2s9qg-unsplash.jpg
        ├── kasper-rasmussen-gdY2Ty37xX0-unsplash.jpg
        ├── maria-vojtovicova-7cfAzY0mj9w-unsplash.jpg
        ├── michael-oxendine-KGGwZZ7e9F4-unsplash.jpg
        ├── ricardo-gomez-angel-lqFM73nWnf8-unsplash.jpg
        ├── sebastian-cyrman-p43NEFmcWkI-unsplash.jpg
        ├── sirisvisual-posjE6NacVc-unsplash.jpg
        ├── stepan-kulyk-bdj6umLdzyo-unsplash.jpg
        ├── xps-6uneKLGrJPs-unsplash.jpg
        ├── xps-kLfkVa_4aXM-unsplash.jpg
        └── xps-uWFFw7leQNI-unsplash.jpg

4 directories, 30 files

Pronto aprendemos como comprimir as imagens, valeu pessoal 😎✌!!

#Compartilhe

Recomendado para você