הגדרת הפלאגין 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 */]);
- לסיום, כדי להוסיף את Imagemin כמשימת ברירת המחדל של Graunt, צריך להחליף את התגובה
/* list plugins here */
ב-'imagemin'
. עכשיו השורה הזו אמורה להיראות כך:
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. כדי להשתמש בו, צריך להצהיר על הפלאגין
ולציין את רמת האיכות של הדחיסה בקובץ Graunt.
- יש להצהיר על הפלאגין
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 (המשך)
שימוש בפלאגין imagemin-mozjpeg
, שכבר הותקן עבורך, כדי
לדחוס תמונות בפורמט JPEG.
- צריך להצהיר על הפלאגין
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']);
ריצה ו-Gunt אימות התוצאות באמצעות Lighthouse
- לוחצים על הלחצן כלים.
- לאחר מכן לוחצים על הלחצן Console.
- מריצים את Graunt על ידי הקלדת הפקודה הבאה במסוף:
grunt
בסיום התהליך, אמורה להופיע הודעה כזו במסוף:
Minified 6 images (saved 667 kB - 66.5%)
מעולה! התוצאות האלה הרבה יותר טובות.
לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים נוצרה. המאמר "מקודד ביעילות תמונות" של Lighthouse סקירת הביצועים תאפשר לכם אם התמונות בפורמט JPEG בדף דחוסות באופן אופטימלי.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
.
- יש להריץ את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) ב- את הגרסה הפעילה של התקלה ולוודא שהפעולה "מקודדים ביעילות תמונות" הבדיקה עברה.
הצלחת! השתמשתם ב-Imagemin כדי לדחוס את התמונות בדף בצורה אופטימלית.