كيفية تصغير CSS الخاص بك باستخدام gulp

في هذه المقالة ، سأعرض طريقة بسيطة لتصغير ملفات CSS تلقائيًا باستخدام gulp. ؟

لتبدأ - ما هو الجلب؟

Gulp هو برنامج تشغيل مهام JavaScript يتيح لك أتمتة المهام مثل ...

  • تجميع وتصغير المكتبات وأوراق الأنماط.
  • تحديث المستعرض الخاص بك عند حفظ ملف.
  • إجراء اختبارات الوحدة بسرعة.
  • تشغيل تحليل الكود.
  • أقل / ساس لتجميع CSS.
  • وأكثر بكثير!

يعمل سير عمل Gulp على النحو التالي:

يمكننا إنشاء المهام التي نرغب في إنجازها. في هذه المهام نقوم بتحميل الملفات التي نريد أن يعمل gulp عليها (بالتعديل أم لا) ، ثم نعيدها إلى مجلد الإرجاع.

انه سهل.

في هذا البرنامج التعليمي الصغير ، سأعلمك كيفية إنشاء مهمة لتصغير جميع ملفات CSS في مجلدك. ثم ضع الصور المصغرة في مجلد آخر.

لنبدأ

في هذا البرنامج التعليمي ، تأكد من تثبيت أحدث إصدار من حزمة npm على جهازك. إذا لم يكن لديك ، يمكنك تنزيله هنا .

بمجرد تثبيت npm ، سنقوم بتثبيت gulp في الدليل الأساسي لمشروعك باستخدام هذه الأوامر:

npm install gulp-cli -g

npm install gulp -D

سنستخدم أيضًا مكون gulp الإضافي لتقليل CSS المسمى gulp-clean-css ، لذا قم بتثبيته في نوع المشروع:

npm install gulp-clean-css --save-dev

جيد جدًا ، الآن مع التبعيات المثبتة في المشروع ، لنقم بإنشاء ملف يسمى Gulpfile.js . سيكون هذا الملف مسؤولاً عن مهامنا.

سننشئ مجلدين في هذا المستودع أيضًا. سيطلق على أحدهما أنماط حيث ستبقى ملفات الأنماط الخاصة بنا ، والآخر يسمى dist حيث سيتم نقل الملفات المصغرة.

في النهاية ، سيكون لمشروعنا هذا الهيكل:

في Gulpfile.js

في بداية الملف ، نجري استدعاءات الحزم التي سنستخدمها.

مع استدعاء الحزم ، سننشئ المهمة المسؤولة عن طريق تصغير ملفاتنا.

قد تتساءل - هل أنت قادر بالفعل على تصغير ملفاتك؟ نعم ، بتنفيذ أمر gulp في المحطة متبوعًا باسم المهمة.

لكن تشغيل هذا الأمر طوال الوقت أمر مزعج بعض الشيء ، أليس كذلك؟ يمكننا إنشاء طريقة لمراقبة التغييرات على الملفات في مجلد الأنماط.

بهذه الطريقة ، سينتظر تشغيل أمر gulp التغييرات في الملفات المحددة لتنشيط مهمة minify-css.

استنتاج

هذه مجرد طريقة صغيرة يمكن أن تساعدنا بها gulp في تطوير تطبيقاتنا.

يمكنك العثور على الكود الخاص بهذا المشروع في هذا المستودع على GitHub.

شكرا على القراءة ، لا تتردد في ذلك؟ ومساعدة الآخرين في العثور عليه.

اراك قريبا. ؟

المراجع

gulp.js

من خلال تفضيل الكود على التكوين ، وأفضل ممارسات العقدة ، والحد الأدنى من سطح واجهة برمجة التطبيقات - يجعل gulp الأمور بسيطة مثل ... gulpjs.com gulp -clean-css

تصغير css باستخدام clean-css. www.npmjs.com