63 lines
4.4 KiB
Markdown
63 lines
4.4 KiB
Markdown
|
---
|
||
|
|
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` .
|
||
|
|
|
||
|
|
`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 من الإضافات المتاحة جعله إطارًا مرنًا ومفيدًا جدًا لمطوري جافا سكريبت.
|
||
|
|
|
||
|
|
#### معلومات اكثر:
|
||
|
|
|
||
|
|
[موقع غالب](https://gulpjs.com/)
|
||
|
|
|
||
|
|
[Gulp مستودع جيثب](https://github.com/gulpjs/gulp)
|
||
|
|
|
||
|
|
[دليل begginers غولب](https://css-tricks.com/gulp-for-beginners/)
|