gulp.js

📅 آخر تحديث: ٢٣ يوليو ٢٠٢٦
✍️ نُشر في: ٢٣ يوليو ٢٠٢٦
📷 يحتوي على 1 صور
الموسوعة الحرة

gulp عبارة عن مجموعة أدوات JavaScript مفتوحة المصدر ، تُستخدم كنظام بناء متدفق (على غرار Make الذي يركز بشكل أكبر على الحزم ) في تطوير واجهات المستخدم الأمامية للويب .

هو برنامج تشغيل مهام مبني على Node.js و npm ، ويستخدم لأتمتة المهام التي تستغرق وقتًا طويلاً والمتكررة في تطوير الويب مثل التصغير ، والدمج، وإلغاء ذاكرة التخزين المؤقت، واختبار الوحدة ، والتحقق من الأخطاء ، والتحسين، وما إلى ذلك. [ 6 ]

يستخدم Gulp منهجية كتابة التعليمات البرمجية بدلاً من التكوين لتحديد مهامه، ويعتمد على إضافاته الصغيرة ذات الغرض الواحد لتنفيذها. يضم نظام Gulp البيئي أكثر من 3500 إضافة من هذا النوع. [ 7 ]

ملخص

gulp [ 8 ] أداة بناء مكتوبة بلغة JavaScript، تعتمد على Node Streams . تُسهّل هذه التدفقات ربط عمليات الملفات عبر مسارات المعالجة . [ 9 ] يقرأ gulp نظام الملفات، ثم يُمرّر البيانات من مُلحق مُخصّص إلى آخر عبر المُشغّل .pipe()، مُنفّذًا مهمة واحدة في كل مرة. لا تتأثر الملفات الأصلية حتى تتم معالجة جميع الملحقات. يُمكن تهيئته إما لتعديل الملفات الأصلية أو لإنشاء ملفات جديدة. يُتيح ذلك إمكانية تنفيذ مهام مُعقّدة من خلال ربط ملحقاته العديدة. كما يُمكن للمستخدمين كتابة ملحقاتهم الخاصة لتحديد مهامهم. [ 10 ] على عكس مُشغّلات المهام الأخرى التي تُنفّذ المهام عن طريق التهيئة، يتطلب gulp معرفة بلغة JavaScript والبرمجة لتحديد مهامه. gulp نظام بناء، ما يعني أنه بالإضافة إلى تشغيل المهام، فهو قادر أيضًا على نسخ الملفات من موقع إلى آخر، والتجميع ، والنشر ، وإنشاء الإشعارات، واختبار الوحدات، والتدقيق اللغوي، إلخ. [ 1 ]

الحاجة إلى برنامج لتنفيذ المهام

تعتمد أدوات تشغيل المهام مثل Gulp و Grunt على Node.js بدلاً من npm، لأن نصوص npm الأساسية غير فعالة عند تنفيذ مهام متعددة. ورغم أن بعض المطورين يفضلون نصوص npm لبساطتها وسهولة استخدامها، إلا أن هناك العديد من الجوانب التي يتفوق فيها Gulp وGrunt على بعضهما البعض وعلى النصوص الافتراضية. [ 11 ] يُشغّل Grunt المهام عن طريق تحويل الملفات وحفظها كملفات جديدة في مجلدات مؤقتة، ويُستخدم ناتج كل مهمة كمدخل لمهمة أخرى، وهكذا حتى يصل الناتج إلى مجلد الوجهة. يتطلب هذا عددًا كبيرًا من عمليات الإدخال/الإخراج وإنشاء العديد من الملفات المؤقتة. بينما لا يحتاج Gulp، الذي يمرر البيانات عبر نظام الملفات، إلى أي من هذه المواقع المؤقتة، مما يقلل من عدد عمليات الإدخال/الإخراج، وبالتالي يُحسّن الأداء. [ 12 ] يستخدم Grunt ملفات التكوين لتنفيذ المهام، بينما يتطلب Gulp كتابة ملف البناء الخاص به. في Grunt، يجب تهيئة كل إضافة لمطابقة موقع إدخالها مع مخرجات الإضافة السابقة. أما في gulp، فتتم معالجة الإضافات تلقائيًا عبر سلسلة من العمليات. [ 9 ]

عملية

تُشغَّل مهام Gulp من واجهة سطر الأوامر (CLI) [ 11 ] وتتطلب ملفين: ملف `gulpfile` package.json، الذي يُستخدم لسرد مختلف الإضافات الخاصة بـ Gulp، وملف `gulp.task` gulpfile.js(أو ببساطة gulpfile`gulp.task`). ووفقًا لاتفاقية أدوات البناء، غالبًا ما يوجد هذان الملفان في الدليل الجذر لشفرة مصدر الحزمة . يحتوي ملف `gulpfile` على معظم المنطق الذي يحتاجه Gulp لتشغيل مهام البناء. أولًا، يتم تحميل جميع الوحدات النمطية الضرورية، ثم تُعرَّف المهام في ملف `gulpfile`. تُدرج جميع الإضافات الضرورية المحددة في ملف `gulpfile` في قسم `devDependencies` من ملف `gulp.task` package.json. [ 13 ] تُشغَّل المهمة الافتراضية بواسطة $gulp`gulp.task`. يمكن تعريف المهام الفردية بواسطة `gulp.task` ويتم تشغيلها بواسطة `gulp.task` gulp <task> <othertask>. [ 14 ] تُعرَّف المهام المعقدة عن طريق ربط الإضافات باستخدام .pipe()عامل التشغيل `gulp.task`. [ 15 ]

تشريح ملف gulpfile

ملف gulpfile هو المكان الذي تُعرّف فيه جميع العمليات في gulp. يتكون الهيكل الأساسي لملف gulpfile من المكونات الإضافية المطلوبة المُضمنة في الأعلى، وتعريف المهام، ومهمة افتراضية في النهاية. [ 16 ]

الإضافات

يجب إضافة أي إضافة مثبتة مطلوبة لأداء مهمة ما في أعلى ملف gulpfile كاعتمادية بالصيغة التالية. [ 14 ] [ 15 ]

// إضافة التبعيات var gulp = require ( 'gulp' );

المهام

بعد ذلك، يمكن إنشاء المهام. يتم تعريف مهمة Gulp بواسطة gulp.task ، وتأخذ اسم المهمة كمعامل أول ودالة كمعامل ثانٍ.

يوضح المثال التالي كيفية إنشاء مهمة في Gulp. المعامل الأول taskName إلزامي ويحدد الاسم الذي يمكن من خلاله تنفيذ المهمة في سطر الأوامر. [ 17 ]

gulp.task ( 'taskName' , function () { // قم بتنفيذ شيء ما } ) ;

بدلاً من ذلك، يمكن إنشاء مهمة تؤدي عدة وظائف محددة مسبقاً. يتم تمرير هذه الوظائف كمعامل ثانٍ على شكل مصفوفة.

function fn1 () { // قم بشيء ما }function fn2 () { // قم بشيء ما }// مهمة تحتوي على مصفوفة من أسماء الدوال gulp.task ( ' taskName' , gulp.parallel ( fn1 , fn2 ) );

المهمة الافتراضية

يُحدد الإجراء الافتراضي في نهاية ملف gulpfile. ويمكن تشغيله باستخدام gulpالأمر في سطر الأوامر. في الحالة الموضحة أدناه، لا يقوم الإجراء الافتراضي بأي شيء. [ 15 ]

// مهمة Gulp الافتراضية gulp.task ( 'default' , fn );

تُستخدم المهمة الافتراضية في Gulp لتشغيل أي عدد من المهام الفرعية التابعة المحددة أعلاه بترتيب تسلسلي تلقائيًا. كما يمكن لـ Gulp مراقبة ملفات المصدر وتشغيل المهمة المناسبة عند إجراء تغييرات عليها. تُذكر المهام الفرعية كعناصر في المصفوفة في المعامل الثاني. يمكن بدء العملية ببساطة عن طريق تشغيل المهمة الافتراضية باستخدام gulpالأمر. [ 16 ]

أمثلة على المهام

مهمة الصورة

يمكن أن يكون تعريف الوحدة في البداية على Gulpfile.jsالنحو التالي:

var imagemin = require ( 'gulp-imagemin' );

تقوم مهمة معالجة الصور اللاحقة بتحسين الصور. gulp.src()تسترجع جميع الصور ذات الامتداد .png أو .gif أو .jpg في الدليل ' images-orig/'.

.pipe(imagemin())تُمرر القنوات الصور التي تم العثور عليها، عبر عملية التحسين، .pipe(gulp.dest())ويتم حفظ الصور المُحسّنة في مجلد "images/" . بدون gulp.dest()هذه القنوات، سيتم تحسين الصور، ولكنها لن تُخزن. [ 18 ] وبما أن الصور المُحسّنة تُخزن في مجلد آخر، فإن الصور الأصلية تبقى دون تغيير. [ 15 ]

// مهمة الصور gulp.task ( ' images ' , function () { return gulp.src ( ' images/*.{png,gif,jpg}' ) . pipe ( imagemin ( )) . pipe ( gulp.dest ( ' dist /images/' )); });

مهمة كتابة البرامج النصية

في المثال التالي، يتم تحسين جميع ملفات جافا سكريبت الموجودة في المجلد scripts/،.pipe(uglify()) ويتم gulp.dest('scripts/')استبدال الملفات الأصلية بالناتج. [ 19 ] وللقيام بذلك، يجب أولاً الرجوع إلى إضافة gulp-uglify المطلوبة [ 20 ] في مُثبِّت حزم npm ، وفي بداية ملف gulpfile ، يجب تعريف الوحدة.

// مهمة البرمجة النصية gulp.task ( 'scripts' , function ( ) { return gulp.src ( ' scripts / *.js' ) . pipe ( uglify ( ) ) .pipe ( gulp.dest ( 'scripts/' )); } );

مهمة الساعة

تُستخدم مهمة المراقبة للتفاعل مع التغييرات في الملفات. في المثال التالي، يتم استدعاء المهمتين المسماة " scripts" و "images" عند تغيير أي من ملفات جافا سكريبت أو الصور في الدلائل المحددة. [ 21 ]

// إعادة تشغيل المهمة عند تغيير ملف gulp.task ( 'watch' , function ( cb ) { gulp.watch ( ' scripts/js/**' , scripts ) ; gulp.watch ( ' images/**' , images ) ; cb (); });

علاوة على ذلك، من الممكن تحديث محتوى المتصفح باستخدام مهام المراقبة. [ 22 ] ولتحقيق ذلك، تتوفر العديد من الخيارات والإضافات.

انظر أيضاً

مراجع

  1. 1 2 جيد ماو؛ ماكسيميليان شميت؛ توماش ستريجوسكي؛ كاري كانتري هولت؛ ويليام لوبيلسكي (2014). تطوير حافة الابتلاع (  الطبعة الأولى). دار بليدينغ إيدج للنشر. ISBN 978-1-939902-14-6.
  2. ↑ "تاريخ إصدار النسخة 1.0.0" . تم الاطلاع عليه بتاريخ 31 ديسمبر 2020 .
  3. ↑ "الإصدارات · gulpjs/gulp" . GitHub . تم الاطلاع عليه بتاريخ 31-12-2020 .
  4. ↑ "ملف الترخيص على GitHub" . GitHub . تم الاطلاع عليه بتاريخ 31-12-2020 .
  5. ↑ "حقل الترخيص من gulp - npm" . تم الاسترجاع في 31 ديسمبر 2020 .
  6. ↑ "البناء بجرأة - مجلة سماشينغ" . Smashingmagazine.com . 11 يونيو 2014. تم الاطلاع عليه بتاريخ 14 ديسمبر 2016 .
  7. ↑ "سجل إضافات gulp.js" . Gulpjs.com . تم الاطلاع عليه بتاريخ 14-12-2016 .
  8. ↑ "gulpjs/gulp" . GitHub . تم الاسترجاع في 22-09-2016 .
  9. 1 2 "دليل substack/stream: كيفية كتابة برامج Node باستخدام التدفقات" . GitHub . تم الاسترجاع في 14 ديسمبر 2016 .
  10. ↑ "gulpjs/gulp" . GitHub . تم الاسترجاع في 22-09-2016 .
  11. 1 2 "gulpjs/gulp" . GitHub . تم الاسترجاع في 23-09-2016 .
  12. ↑ "Gulp للمبتدئين" . CSS-Tricks. 2015-09-01 . تم الاطلاع عليه بتاريخ 2016-12-14 .
  13. ↑ "تثبيت | وثائق npm" . docs.npmjs.com . تم الاطلاع عليه بتاريخ 22-09-2016 .
  14. 1 2 "gulpjs/gulp" . GitHub . تم الاسترجاع في 23-09-2016 .
  15. 1 2 3 4 ماينارد، ترافيس (2015). البدء باستخدام Gulp . Packt Publishing Ltd. ISBN 9781784393472.
  16. 1 2 "مقدمة إلى Gulp.js - SitePoint" . 10-02-2014 . تم الاطلاع عليه بتاريخ 23-09-2016 .
  17. ↑ "gulp/API.md at 4.0 · gulpjs/gulp · GitHub" . GitHub. 2016-05-12 . تم الاطلاع عليه بتاريخ 2016-12-14 .
  18. ^ "Durchstarten mit Gulp.js – تحسين مواقع الويب، Arbeitsabläufe automatisieren" . Magazin.phlow.de . 2014-05-25. مؤرشف من الأصل بتاريخ 16-06-2017 . تم الاسترجاع 2016/12/14 .
  19. ↑ "Front-end Workflow mit Gulp - Liechtenecker" . Liechtenecker.at . 2015-05-29 . تم الاطلاع عليه بتاريخ 2016-12-14 .
  20. ↑ "gulp-uglify" . Npmjs.com . تم الاطلاع عليه بتاريخ 14-12-2016 .
  21. ↑ "gulp-watch" . Npmjs.com . تم الاطلاع عليه بتاريخ 23-09-2016 .
  22. ↑ "Browsersync + Gulp.js" . Browsersync.io . تم ​​الاطلاع عليه بتاريخ 14-12-2016 .

الأدب

  • جيد ماو؛ ماكسيميليان شميت؛ توماش ستريجوسكي؛ كاري كانتري هولت؛ ويليام لوبيلسكي (2014). تطوير حافة الابتلاع (  الطبعة الأولى). دار بليدينغ إيدج للنشر. رقم ISBN 978-1-939902-14-6.
  • دين أوديل (2014). "أدوات البناء والأتمتة". تطوير جافا سكريبت الاحترافي: البرمجة، والقدرات، والأدوات . دار نشر أبريس. رقم ISBN 978-1-4302-6268-8.
  • ماينارد، ترافيس (2015). البدء باستخدام Gulp . دار نشر Packt المحدودة. رقم ISBN 9781784393472.