استخدام Imagemin مع Grunt

"كاتي هيمبينيوس"

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخلل في علامة تبويب ثانية.

إعداد المكوّن الإضافي Imagemin Grunt

تحتوي هذه الميزة "نظرة سريعة" على 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/.

ملاحظة: هل لديك أسئلة أخرى حول هذا الموضوع؟ يمكنك الاطّلاع على مزيد من المعلومات حول كائن ملف Grunt هنا.

• قم بتحميل مهمة Imagemin عن طريق إضافة هذا السطر قبل grunt.registerTask(...) مباشرةً:

grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);

• أخيرًا، يمكنك إضافة Imagemin كمهمة Grunt التلقائية عن طريق استبدال تعليق /* 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. لاستخدام المكوّن الإضافي، حدد مستوى جودة الضغط في Gruntfile.

• يُرجى تعريف المكوّن الإضافي 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']);

شغِّل Grunt وتحقّق من النتائج باستخدام Lighthouse

1. انقر على الزرّ أدوات.
2. ثم انقر على الزر وحدة التحكم.
3. شغِّل Grunt من خلال كتابة الأمر التالي في وحدة التحكّم:

grunt

عند اكتمال Grunt، من المفترض أن تظهر لك رسالة مثل هذه في وحدة التحكم:

Minified 6 images (saved 667 kB - 66.5%)

رائع! هذه النتائج أفضل بكثير.

أخيرًا، من الأفضل استخدام Lighthouse للتحقق من التغييرات التي أجريتها للتو. سيتيح لك تدقيق أداء "ترميز الصور بكفاءة" من أداة Lighthouse معرفة ما إذا كان قد تم ضغط صور JPEG على صفحتك على النحو الأمثل.

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
• عليك إجراء تدقيق الأداء في Lighthouse (الضوء > الخيارات > الأداء) على الإصدار المباشر من تأثير Glitch والتحقّق من اجتياز عملية تدقيق "ترميز الصور بكفاءة".

اكتمال عملية النقل بنجاح لقد استخدمت Imagemin لضغط الصور على صفحتك على النحو الأمثل.