Imagemin Grunt 플러그인 설정
이 글리치에는 이미 grunt
, grunt-cli
, grunt-contrib-imagemin
이(가) 포함되어 있습니다.
사용할 수 있습니다. Imagemin 구성을 추가하려면
gruntfile.js
파일.
- 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
gruntfile.js
에서//Add configuration here
주석을 다음 코드 블록으로 변경합니다.
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
이 코드 블록은 Grunt에 Imagemin으로 압축해야 하는 파일을 알려줍니다.
dynamic
는 압축할 파일 목록이 동적임을 나타냅니다. 파일 이름을 지정된 파일 패턴과 비교하여 생성됩니다.파일 패턴
{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
images/
디렉터리에 있는 모든 JPEG 및 PNG 이미지와 일치합니다.
- 다음 코드 바로 앞에 다음 줄을 추가하여 Imagemin 작업을 로드합니다.
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- 마지막으로
/* list plugins here */
주석을'imagemin'
로 바꿔 Imagemin을 기본 Grunt 작업으로 추가합니다. 이제 줄이 다음과 같이 표시됩니다.
grunt.registerTask('default', ['imagemin']);
✔︎ 체크인
이제 전체 gruntfile.js
파일은 다음과 같습니다.
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']);
Imagemin 구성 맞춤설정
imagemin-pngquant
는 압축 품질 수준을 지정하는 플러그인입니다.
package.json
에 있는 이 프로젝트에 이미 imagemin-pngquant
을(를) 추가했습니다.
파일을 압축하는 데 사용할 수 있습니다. 사용하려면 플러그인을 선언하세요.
Gruntfile에 압축 품질 수준을 지정하세요.
- 다음 줄을 페이지의 맨 위에 추가하여
imagemin-pngquant
플러그인을 선언합니다.gruntfile.js
:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
options
속성을imagemin
객체.options
속성은 다음과 같습니다.
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
이 코드는 Imagemin에 Pngquant 플러그인을 사용하여 PNG를 압축하도록 지시합니다. 이
quality
필드는 min
및 max
범위의 값을 사용하여
압축 수준이며 0이 가장 낮고 1이 가장 높습니다. 모든 이미지를
50% 품질로 압축되어야 하는 경우 0.5
를 최솟값과 최댓값으로 모두 전달합니다.
✔︎ 체크인
이제 gruntfile.js
파일이 다음과 같이 표시됩니다.
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']);
그렇다면 JPEG는 어떨까요? 프로젝트에는 JPEG 이미지도 있으므로 압축됩니다
Imagemin 구성 맞춤설정 (계속)
이미 설치되어 있는 imagemin-mozjpeg
플러그인을 사용하여 다음을 수행합니다.
압축하는 것입니다.
- 다음 줄을 페이지의 맨 위에 추가하여
imagemin-mozjpeg
플러그인을 선언gruntfile.js
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- 다음으로,
options
객체의 배열에mozjpeg({quality: 50})
를 추가합니다. 이 배열은 이제 다음과 같이 표시됩니다.
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔︎ 체크인
이제 gruntfile.js
파일이 다음과 같이 표시됩니다.
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']);
Grunt 실행 및 Lighthouse로 결과 확인
- 도구 버튼을 클릭합니다.
- 그런 다음 콘솔 버튼을 클릭합니다.
- 콘솔에 다음 명령어를 입력하여 Grunt를 실행합니다.
grunt
Grunt가 완료되면 콘솔에 다음과 같은 메시지가 표시됩니다.
Minified 6 images (saved 667 kB - 66.5%)
축하합니다. 이러한 결과는 훨씬 좋습니다.
마지막으로, Lighthouse를 사용하여 방금 수행한 변경사항을 확인하는 것이 좋습니다. 있습니다. Lighthouse의 '효율적으로 이미지 인코딩' 실적 감사를 통해 페이지의 JPEG 이미지가 최적으로 압축되었는지 확인합니다.
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
- Lighthouse 성능 감사 (Lighthouse > 옵션 > 성능)를 다음에서 실행합니다. Glitch의 라이브 버전을 확인하고 이미지" 통과했습니다
완료되었습니다. Imagemin을 사용하여 페이지의 이미지를 최적으로 압축했습니다.