הגדרת הפלאגין Imagemin Gulp
התקלה הזו כבר מכילה את הפלאגין gulp
, gulp-cli
ואת הפלאגין gulp-imagemin
.
כדי להוסיף את התצורה של Imagemin, צריך לערוך את קובץ gulpfile.js
.
- לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
- קודם כול, מפעילים את הפלאגין
gulp-imagemin
על ידי הוספת הקוד הזה בחלק העליון שלgulpfile.js
:
const imagemin = require('gulp-imagemin');
- בשלב הבא, צריך להחליף את התגובה
//Add tasks here
שמופיעה במסמךgulpfile.js
בקוד הזה בלוק:
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
הקוד הזה מוסיף משימת Gulp שמשתמשת ב-Imagemin כדי לדחוס את התמונות
ספריית images/
. התמונות המקוריות מוחלפות ונשמרות
ספריית images/
.
✔✔צ'ק-אין
עכשיו קובץ gulpfile.js
אמור להיראות כך:
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
});
עכשיו יש לך gulpfile.js
שאפשר להשתמש בו לדחיסת תמונות.
לרוץ בגשם
- לוחצים על הלחצן כלים.
- לאחר מכן לוחצים על הלחצן Console.
- מריצים את Gulp כדי לדחוס את התמונות על-ידי הקלדת הפקודה הבאה בתג המסוף:
gulp
בסיום התהליך, אמורה להופיע הודעה כזו בטרמינל:
gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)
שיפור של 15% בגודל הקובץ הוא התחלה טובה. עם זאת, שיפורים נוספים עשויים באמצעות הגדרות דחיסה שונות.
התאמה אישית של תצורת Imagemin
imagemin-pngquant
הוא פלאגין לציון רמות איכות הדחיסה.
כבר הוספנו את imagemin-pngquant
לפרויקט הזה ב-package.json
כדי שאפשר יהיה להשתמש בו כדי לדחוס את קובצי ה-PNG. כדי להשתמש בו, צריך להצהיר על הפלאגין
ולציין את רמת האיכות של הדחיסה בקובץ ה-gulpfile.
- יש להצהיר על הפלאגין
imagemin-pngquant
. לשם כך, צריך להוסיף את השורה הזו לחלק העליון שלgulpfile.js
:
const pngquant = require('imagemin-pngquant');
- מוסיפים את הפלאגין
imagemin-pngquant
(ואת ההגדרות שלו) על ידי העברת הפקודה הבאה: מערך ל-ImageminPlugin()
:
[pngquant({quality: [0.5, 0.5]})]
הקוד הזה מנחה את Imagemin לדחוס קובצי PNG באמצעות הפלאגין Pngquant.
השדה quality
משתמש בטווח הערכים min
ו-max
כדי לקבוע
רמת הדחיסה – 0 היא הנמוכה ביותר ו-1 היא הגבוהה ביותר. כדי לאלץ את כל התמונות
דחוסים באיכות של 50%, מעבירים את 0.5
כערך המינימלי וגם כערך המקסימלי.
✔✔צ'ק-אין
עכשיו קובץ gulpfile.js
אמור להיראות כך:
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]})
]))
.pipe(gulp.dest('images/'))
});
אבל מה לגבי קובצי JPG? לפרויקט יש גם תמונות JPG; הן צריכות להיות גם דחוסים.
התאמה אישית של תצורת Imagemin (המשך)
צריך להשתמש בפלאגין imagemin-mozjpeg
, שכבר הותקן עבורך כדי לדחוס את הנתונים
תמונות JPG.
- צריך להצהיר על הפלאגין
imagemin-mozjpeg
ולהציב את השורה הזו בחלק העליון שלgulpfile.js
.
const mozjpeg = require('imagemin-mozjpeg');
- בשלב הבא מוסיפים את
mozjpeg({quality: 50})
למערך שמועבר אלImageminPlugin()
:
[
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
✔✔צ'ק-אין
עכשיו קובץ gulpfile.js
אמור להיראות כך:
const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]))
.pipe(gulp.dest('images/'))
});
הפעלה מחדש של Gulp & אימות התוצאות באמצעות Lighthouse
- הרצה מחדש של Gulp:
gulp
בסיום התהליך, אמורה להופיע הודעה כזו במסוף:
gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)
מעולה! התוצאות האלה הרבה יותר טובות.
לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים נוצרה.
המאמר "מקודד ביעילות תמונות" של Lighthouse ביקורת ביצועים יכולה להודיע לכם תמונות בפורמט JPEG בדף דחוסות באופן אופטימלי.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
- יש להריץ את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) ב- את הגרסה הפעילה של התקלה ולוודא שהפעולה "מקודדים ביעילות תמונות" הבדיקה עברה.
הצלחת! השתמשתם ב-Imagemin כדי לדחוס את התמונות בדף בצורה אופטימלית.