إعداد المكون الإضافي 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 (متابعة)
استخدِم المكوّن الإضافي 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 لضغط الصور على صفحتك على النحو الأمثل.