הגדרת הפלאגין Imagemin Graunt
התקלה הזו כבר מכילה את 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}']}
יתאים לכל התמונות בפורמט JPEG ו-PNG בספרייהimages/
.
- כדי לטעון את המשימה של Imagemin, מוסיפים את השורה הזו מיד לפני
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- לסיום, יש להחליף את התגובה
/* list plugins here */
ב-'imagemin'
כדי להוסיף את Imagemin כמשימת ברירת המחדל של Graunt. עכשיו השורה אמורה להיראות כך:
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
הוא פלאגין לציון רמות איכות דחיסה.
כבר הוספנו את imagemin-pngquant
לפרויקט הזה בקובץ package.json
, כדי שתוכלו להשתמש בו כדי לדחוס את קובצי ה-PNG. כדי להשתמש בו, צריך להצהיר על הפלאגין
ולציין את רמת איכות הדחיסה בקובץ ה-Gruntfile.
- כדי להצהיר על הפלאגין
imagemin-pngquant
, מוסיפים את השורה הבאה בחלק העליון שלgruntfile.js
:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- מוסיפים הגדרות לדחיסת תמונות PNG על ידי הוספת מאפיין
options
לאובייקטimagemin
. נכסoptions
הזה אמור להיראות כך:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
הקוד הזה מורה ל-Imagemin לדחוס קובצי PNG באמצעות הפלאגין Pngquant. השדה 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 (המשך)
כדי לדחוס תמונות בפורמט JPEG, צריך להשתמש בפלאגין imagemin-mozjpeg
, שכבר הותקן.
- מצהירים על הפלאגין
imagemin-mozjpeg
על ידי הצבת השורה הזו בחלק העליון שלgruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- בשלב הבא, מוסיפים
mozjpeg({quality: 50})
למערך באובייקטoptions
. עכשיו המערך אמור להיראות כך:
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
- לוחצים על הלחצן כלים.
- לאחר מכן לוחצים על הלחצן מסוף.
- הפעל את Graunt על ידי הקלדת הפקודה הבאה במסוף:
grunt
בסיום ה-GRunt אמורה להופיע הודעה כזאת במסוף:
Minified 6 images (saved 667 kB - 66.5%)
מעולה! התוצאות האלה הרבה יותר טובות.
לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים שביצעתם. בדיקת הביצועים מסוג 'קידוד יעיל של תמונות' של Lighthouse תאפשר לכם לדעת אם תמונות ה-JPEG בדף דחוסות בצורה אופטימלית.
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- מפעילים את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה, ומוודאים שהביקורת 'קידוד תמונות יעיל' עברה.
זהו! השתמשת ב-Imagemin כדי לדחוס באופן אופטימלי את התמונות בדף.