דף זה תורגם על ידי Cloud Translation API.

שימוש ב-Imagemin עם Gulp

Katie Hempenius

הגדרת הפלאגין 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 > אפשרויות > ביצועים) ב- את הגרסה הפעילה של התקלה ולוודא שהפעולה "מקודדים ביעילות תמונות" הבדיקה עברה.

העברת ההגדרה 'קידוד יעיל של תמונות' ביקורת ב-Lighthouse

הצלחת! השתמשתם ב-Imagemin כדי לדחוס את התמונות בדף בצורה אופטימלית.