Configurar o plug-in do Imagemin Grunt
Esse Glitch já contém grunt
, grunt-cli
e grunt-contrib-imagemin
plug-in. Para adicionar a configuração do Imagemin, é necessário editar o
gruntfile.js
.
- Clique em Remixar para editar para tornar o projeto editável.
- Em
gruntfile.js
, substitua o comentário//Add configuration here
por este bloco de código:
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
Esse bloco de código informa ao Grunt quais arquivos precisam ser compactados com o Imagemin.
dynamic
indica que a lista de arquivos a serem compactados será dinamicamente gerados pela correspondência dos nomes dos arquivos com o padrão de arquivo especificado.O padrão de arquivo
{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
corresponderá a todas as imagens JPEG e PNG no diretórioimages/
.
- Carregue a tarefa Imagemin adicionando esta linha imediatamente antes de
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Por fim, adicione o Imagemin como a tarefa Grunt padrão substituindo o comentário
/* list plugins here */
por'imagemin'
. A linha ficará assim:
grunt.registerTask('default', ['imagemin']);
✔︎ check-in
O arquivo gruntfile.js
completo ficará assim:
const grunt = require('grunt')
grunt.initConfig({
imagemin: {
dynamic: {
files: [{
cwd: 'images/'
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
Personalizar a configuração do Imagemin
O imagemin-pngquant
é um plug-in para especificar níveis de qualidade de compactação.
Já adicionamos imagemin-pngquant
a este projeto no package.json
para que você possa usá-lo na compactação dos seus PNGs. Para usá-lo, declare o plug-in
e especificar um nível de qualidade da compactação no Gruntfile.
- Declare o plug-in
imagemin-pngquant
adicionando esta linha à parte de cima dogruntfile.js
:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- Adicione configurações para compactar imagens PNG adicionando uma propriedade
options
à objetoimagemin
. Essa propriedadeoptions
vai ficar assim:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
Esse código instrui o Imagemin a compactar PNGs usando o plug-in Pngquant. A
O campo quality
usa um intervalo de valores min
e max
para determinar o
nível de compressão: 0 é o menor e 1 é o mais alto. Para forçar todas as imagens a
seja compactado com 50% de qualidade, transmita 0.5
como o valor mínimo e máximo.
✔︎ check-in
Seu arquivo gruntfile.js
ficou assim:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
imagemin: {
options: {
use: [
pngquant({quality: [0.5, 0.5]}),
]
},
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
Mas e os JPEGs? O projeto também tem imagens JPEG, então você deve especificar como mas também são comprimidos.
Personalizar a configuração do Imagemin (continuação)
Use o plug-in imagemin-mozjpeg
, que já foi instalado, para
compactam imagens JPEG.
- Declare o plug-in
imagemin-mozjpeg
colocando esta linha na parte de cima dagruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Em seguida, adicione
mozjpeg({quality: 50})
à matriz no objetooptions
. A matriz ficará assim:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔︎ check-in
Seu arquivo gruntfile.js
ficou assim:
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
imagemin: {
options: {
use: [
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
},
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);
Corrida Grunt & verificar resultados com o Lighthouse
- Clique no botão Ferramentas.
- Em seguida, clique no botão Console.
- Execute o Grunt digitando o seguinte comando no console:
grunt
Quando o Grunt for concluído, você verá uma mensagem como esta no console:
Minified 6 images (saved 667 kB - 66.5%)
Oba! Esses resultados são muito melhores.
Por fim, é uma boa ideia usar o Lighthouse para verificar as alterações que você acabou de feitas. "Codifique imagens com eficiência" de desempenho permite que você para saber se as imagens JPEG da página estão compactadas de forma ideal.
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia
- Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Desempenho) em a versão ativa do Glitch e verifique se a opção "Codificação imagens" foi aprovada.
Pronto. Você usou o Imagemin para compactar as imagens na sua página de maneira otimizada.