freeCodeCamp/guide/arabic/developer-tools/gulp/index.md

---
title: Gulp
localeTitle: بلع
---
## بلع

`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` .

```javascript
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" بعد حفظها.

```javascript
gulp.watch('css')
  .on('change', ['css']);
``` 

### تبعيات المهام

افتراضيا سيتم تشغيل جولبول جميع المهام المحددة في نفس الوقت وانتظر شيئا. لتشغيل مهمة متعددة بالترتيب الصحيح ، يمكنك إضافة مهمة كتوابع إلى مهمة أخرى.

```javascript
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});
``` 

مع رمز المقتطف أعلاه، مهمة `two` سيتم تشغيل فقط بعد مهمة `one` اكتمال.

يمكن أن يكون لـ Gulpfiles مهام متعددة لكل ملف ، كما يمكن تقسيم المهام إلى ملفات متعددة للمؤسسة. هذا ، إلى جانب 100 من الإضافات المتاحة جعله إطارًا مرنًا ومفيدًا جدًا لمطوري جافا سكريبت.

#### معلومات اكثر:

[موقع غالب](https://gulpjs.com/)

[Gulp مستودع جيثب](https://github.com/gulpjs/gulp)

[دليل begginers غولب](https://css-tricks.com/gulp-for-beginners/)