הגדרת הפלאגין 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
שאפשר להשתמש בו כדי לדחוס תמונות.
הרצה של עיפרון
- לוחצים על הלחצן כלים.
- לאחר מכן לוחצים על הלחצן מסוף.
- הריצו את Gulp כדי לדחוס את התמונות על ידי הקלדת הפקודה הבאה במסוף:
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 (המשך)
כדי לדחוס תמונות JPG, צריך להשתמש בפלאגין imagemin-mozjpeg
, שכבר הותקן.
- להצהיר על הפלאגין
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, אמורה להופיע הודעה כמו זו במסוף:
gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)
מעולה! התוצאות האלה הרבה יותר טובות.
לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים שביצעתם.
בדיקת הביצועים מסוג 'קידוד יעיל של תמונות' של Lighthouse יכולה ליידע אתכם אם תמונות ה-JPEG בדף שלכם דחוסות בצורה אופטימלית.
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- מפעילים את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה, ומוודאים שהביקורת 'קידוד תמונות יעיל' עברה.
זהו! השתמשת ב-Imagemin כדי לדחוס באופן אופטימלי את התמונות בדף.