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 이미지와 일치합니다.
grunt.registerTask(...)
바로 앞에 다음 줄을 추가하여 Imagemin 작업을 로드합니다.
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
는 압축 품질 수준을 지정하는 플러그인입니다.
PNG 파일을 압축하는 데 사용할 수 있도록 이미 package.json
파일에서 이 프로젝트에 imagemin-pngquant
를 추가했습니다. 사용하려면 플러그인을 선언하고 Gruntfile에서 압축 품질 수준을 지정합니다.
- 다음 줄을
gruntfile.js
상단에 추가하여imagemin-pngquant
플러그인을 선언합니다.
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
imagemin
객체에options
속성을 추가하여 PNG 이미지를 압축하는 설정을 추가합니다.options
속성은 다음과 같이 표시됩니다.
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
이 코드는 Pngquant 플러그인을 사용하여 PNG를 압축하도록 Imagemin에 지시합니다. 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
플러그인을 사용하여 JPEG 이미지를 압축합니다.
- 다음 줄을
gruntfile.js
의 상단에 배치하여imagemin-mozjpeg
플러그인을 선언합니다.
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']);
Lighthouse로 Grunt 실행 및 결과 확인
- 도구 버튼을 클릭합니다.
- 그런 다음 콘솔 버튼을 클릭합니다.
- 콘솔에 다음 명령어를 입력하여 Grunt를 실행합니다.
grunt
Grunt가 완료되면 콘솔에 다음과 같은 메시지가 표시됩니다.
Minified 6 images (saved 667 kB - 66.5%)
축하합니다. 이러한 결과가 훨씬 더 좋습니다.
마지막으로 Lighthouse를 사용하여 방금 변경한 내용을 확인하는 것이 좋습니다. Lighthouse의 '효율적인 이미지 인코딩' 성능 감사를 통해 페이지의 JPEG 이미지가 최적으로 압축되었는지 확인할 수 있습니다.
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 을 누릅니다.
- Glitch의 실시간 버전에서 Lighthouse 성능 감사 (Lighthouse > 옵션 > 성능)를 실행하고 '이미지를 효율적으로 인코딩' 감사를 통과했는지 확인합니다.
완료되었습니다. Imagemin을 사용하여 페이지의 이미지를 최적으로 압축했습니다.