שימוש ב-Imagemin עם גראנט

Katie Hempenius
Katie Hempenius
X

הגדרת הפלאגין 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

  1. לוחצים על הלחצן כלים.
  2. לאחר מכן לוחצים על הלחצן Console.
  3. מריצים את Graunt על ידי הקלדת הפקודה הבאה במסוף:
grunt

בסיום התהליך, אמורה להופיע הודעה כזו במסוף:

Minified 6 images (saved 667 kB - 66.5%)

מעולה! התוצאות האלה הרבה יותר טובות.

לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים נוצרה. המאמר "מקודד ביעילות תמונות" של Lighthouse סקירת הביצועים תאפשר לכם אם התמונות בפורמט JPEG בדף דחוסות באופן אופטימלי.

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.
  • יש להריץ את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) ב- את הגרסה הפעילה של התקלה ולוודא שהפעולה "מקודדים ביעילות תמונות" הבדיקה עברה.

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

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