4.4 KiB
| title | localeTitle |
|---|---|
| Gulp | بلع |
بلع
Gulp هو برنامج تشغيل مهام جافا سكريبت المستخدم لأتمتة المهام المختلفة التي تعد أجزاء من سير عمل تطوير جافا سكريبت. يتم استخدامه لتشغيل المهام التي قمت ببرمجتها ، وحالة الاستخدام الرئيسية الخاصة به هي تنفيذ الإجراءات المتكررة التي يتم استخدامها كمسار لعملية الإنشاء لمشروع JavaScript.
لماذا غالب هو مفيد
غالبًا ما تتضمن هذه المهام أشياء مثل code minification (إزالة مسافة بيضاء من ملفات html وتقصر أسماء المتغيرات لجعل حجم الملف أصغر حجمًا) و css bundling (تحويل ملفات CSS متعددة في واحد للتوزيع مع تطبيقك) ، والتي تكون مطلوبة لتحسين الكود للتحميل بسرعة في متصفح الويب.
السبب في أن Gulp مفيد في الحالات المذكورة أعلاه هو أن عملية التعزيز والتجميع يجب أن تحدث مع كل تغيير. لن يكون من المفيد القيام بذلك يدويًا مع كل تغيير ، حيث تكون أداة مثل Gulp ، التي تقوم بذلك تلقائيًا بمثابة أداة رائعة لمطوري جافا سكريبت.
بالإضافة إلى الأمثلة البسيطة نسبيًا ، تحتوي Gulp على المئات من المكونات الإضافية لتمكينها من أتمتة المهام الأكثر تعقيدًا. يمكن أن تتضمن هذه المهام أشياء مثل:
- تعمل اختبارات وحدة التشغيل لاختبار شفرتك بشكل صحيح.
- قم بتحديث متصفح الويب الخاص بك في أي وقت يتم فيه حفظ الملف ، مما يسمح بمشاهدة التغييرات الخاصة بك على الفور.
- تحويل
SASS/LESSإلىCSS، بحيث يمكن استخدامه في المستعرض. - تحسين الصور لإنشاء إصدارات متوافقة مع
web friendlyبأحجام ملفات أقل للسرعة.
كيفية استخدام Gulp
لبدء استخدام Gulp ، فإن الخطوة الأولى هي تثبيته باستخدام npm . بعد تثبيته ، يجب إنشاء ملف gulpfile.js . ملف gulpfile هذا هو ملف يحتوي على جميع مهام Gulp التي يجب تشغيلها كجزء من العملية التلقائية. تتم كتابة المهام في JavaScript. في ما يلي مثال بسيط جدًا gulpfile ، والذي يأخذ أي ملفات CSS من مجلد client/templates ، ويقللها ويضع الملف المُصغر في المجلد build/css .
`var gulp = require('gulp'); var minifyCSS = require('gulp-csso');
gulp.task('css', function(){ return gulp.src('client/templates/*.css') .pipe(minifyCSS()) .pipe(gulp.dest('build/css')) }); `
لتشغيل مهمة gulp هذه ، كل ما عليك فعله هو كتابة gulp css في مطراف في جذر مشروعك.
لمشاهدة ملفات CSS لأية تغييرات وتشغيل مهمة "css" بعد حفظها.
gulp.watch('css') .on('change', ['css']);
تبعيات المهام
افتراضيا سيتم تشغيل جولبول جميع المهام المحددة في نفس الوقت وانتظر شيئا. لتشغيل مهمة متعددة بالترتيب الصحيح ، يمكنك إضافة مهمة كتوابع إلى مهمة أخرى.
gulp.task('two', ['one'], function() { // task 'one' is done now });
مع رمز المقتطف أعلاه، مهمة two سيتم تشغيل فقط بعد مهمة one اكتمال.
يمكن أن يكون لـ Gulpfiles مهام متعددة لكل ملف ، كما يمكن تقسيم المهام إلى ملفات متعددة للمؤسسة. هذا ، إلى جانب 100 من الإضافات المتاحة جعله إطارًا مرنًا ومفيدًا جدًا لمطوري جافا سكريبت.