استخدام Imagemin مع Gulp

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

إعداد المكون الإضافي 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 يمكن استخدامه لضغط الصور.

الجري

1. انقر على الزرّ أدوات.
2. ثم انقر على الزر وحدة التحكم.
3. قم بتشغيل 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 (متابعة)

استخدِم المكوّن الإضافي 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، من المفترض أن تظهر رسالة مثل هذه في الوحدة الطرفية:

gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)

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

أخيرًا، من الأفضل استخدام Lighthouse للتحقق من التغييرات التي أجريتها للتو.

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

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

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