كيفية تصغير 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
