برمجة وتصميم المواقع دورات تدريبية غير مصنف كيف

تعلم Gulp للمبتدئين

  • بواسطة
  • 1 أكتوبر، 2018

تعلم Gulp للمبتدئين

Gulp هي أداة تساعدك على القيام بالعديد من المهام عندما يتعلق الأمر بتطوير الويب. غالبًا ما يتم استخدامه لتنفيذ مهام البرمجية مثل: تشغيل  خادم الويب الافتراضي للمصمم والمبرمج  ، إعادة تحميل المتصفح تلقائيًا عند حفظ الملفاستخدام معالجات مسبقة مثل Sass أو LESS ، تحسين الملفات  مثل CSS وجافا سكريبت والصور

Gulp هي أداة تساعدك على القيام بالعديد من المهام عندما يتعلق الأمر بتطوير الويب. غالبًا ما يتم استخدامه لتنفيذ مهام البرمجية مثل:
Gulp هي أداة تساعدك على القيام بالعديد من المهام عندما يتعلق الأمر بتطوير الويب. غالبًا ما يتم استخدامه لتنفيذ مهام البرمجية

هذه ليست قائمة شاملة بكل  الأشياء التي يمكن ل Gulp القيام بها. إذا كنت مجنونا بما فيه الكفاية ، يمكنك حتى بناء مولد موقع ثابت مع Gulp (لقد فعلت ذلك!). لذا نعم ، إن Gulp قوية للغاية ، ولكن عليك ان  تتعلم كيفية استخدام Gulp إذا كنت ترغب في إنشاء عمليات البناء المخصصة الخاصة بك.

هذا المقال. إنه يساعدك على الحصول على معلومات جيدة مع أساسيات Gulp التي يمكنك البدء في استكشاف كل شيء آخر لنفسك.قبل أن نتعمق في العمل مع Gulp ، دعونا نتحدث عن سبب رغبتك في استخدام Gulp بدلاً من الأدوات الأخرى المشابهة.

لماذا Gulp ؟

غالبًا ما يشار إلى أدوات مثل Gulp بأنها “أدوات بناء” لأنها أدوات لتشغيل المهام لإنشاء موقع ويب. أكثر أدوات البناء شيوعًا في الوقت الحالي هما Gulp و Grunt. (يوجد لدى Chris منشور حول البدء باستخدام Grunt هنا). ولكن هناك آخرون بالطبع. يركز البروكلي على تجميع الملفات ، وهو أحد أكثر أدوات أداة البناء شيوعًا.

هناك بالفعل عدة مقالات تغطي الفرق بين Grunt و Gulp ولماذا قد تستخدم واحدة على أخرى. يمكنك الاطلاع على هذه المقالة أو هذه المقالة أو هذا إذا كنت مهتمًا بمعرفة المزيد.  Brunch  في تركيزها على الملفات ، وتتجمع في بعض المهام الأكثر شيوعًا مثل الخادم ومراقب الملفات.

والفرق الرئيسي هو كيفية تكوين سير عمل معاً تمثل تكوينات Gulp إلى أن تكون أقصر وأبسط بكثير عند مقارنتها بـ Grunt. غالب أيضا يميل إلى تشغيل أسرع.

دعنا الآن نتحرك ونكتشف كيفية إعداد سير عمل Gulp.

ما  الذي نقوم بإعداده

تشغيل  خادم الويب الافتراضي المصمم والمبرمج
إعادة تحميل المتصفح تلقائيًا عند حفظ الملف
استخدام معالجات مسبقة مثل Sass أو LESS
تحسين الملفات  مثل CSS وجافا سكريبت والصور

ستتعلم أيضًا كيفية تجميع المهام المختلفة معًا في أوامر بسيطة يسهل فهمها وتنفيذها.

لنبدأ بتثبيت Gulp على جهاز الكمبيوتر الخاص بك.

تثبيت Gulp

تحتاج إلى تثبيت Node.js   على جهاز الكمبيوتر الخاص بك قبل أن تتمكن من تثبيت Gulp.

ذا لم يكن لديك Node مثبتة بالفعل ، يمكنك الحصول عليها عن طريق تنزيل مثبت الحزمة من موقع Node.

$ sudo npm install gulp -g

 

 

ملاحظة: يحتاج مستخدمو Mac فقط إلى الكلمة الرئيسية sudo. (انظر التعليق الأول من Pawel Grzybek إذا كنت لا ترغب في استخدام sudo). وتذكر أن “$” في الرمز أعلاه يرمز فقط إلى موجه الأوامر. هذا ليس في الواقع جزء من الأمر الذي تقوم بتشغيله.

إن الأمر npm install الذي استخدمناه هنا هو أمر يستخدم مدير حزمة الحزم (npm) لتثبيت Gulp على جهاز الكمبيوتر الخاص بك.

تخبر العلامة -g  في هذا الأمر npm بتثبيت Gulp عالميًا على جهاز الكمبيوتر الخاص بك ، مما يسمح لك باستخدام الأمر gulp في أي مكان على نظامك.

يحتاج مستخدمو Mac إلى الكلمة الرئيسية  sudo الإضافية في الأمر لأنهم يحتاجون إلى حقوق المسؤول لتثبيت Gulp عالميًا.

الآن بعد تثبيت Gulp ، دعنا نجعل مشروعًا يستخدم Gulp.

أولاً ، سننشئ مجلدًا باسم Project to server كجذر لمشروعنا أثناء تنقلنا عبر هذا البرنامج التعليمي. قم بتشغيل الأمرnpm init 

من داخل المجلد :

# … from within our project folder

$ npm init

 

 

 

يقوم الأمر init npm بإنشاء ملف package.json لمشروعك الذي يخزن معلومات حول المشروع ، مثل التبعيات المستخدمة في المشروع (Gulp هو مثال على اتباعه ). 

يقوم الأمر init npm بإنشاء ملف package.json لمشروعك الذي يخزن معلومات حول المشروع ، مثل التبعيات المستخدمة في المشروع (Gulp
يقوم الأمر init npm بإنشاء ملف package.json لمشروعك الذي يخزن معلومات حول المشروع ، مثل التبعيات المستخدمة في المشروع (Gulp

 

بمجرد إنشاء ملف package.json ، يمكننا تثبيت Gulp في المشروع باستخدام الأمر التالي:

$ npm install gulp –save-dev

 

 

سترى أن الكلمة الرئيسية sudo غير مطلوبة لأننا لا نثبّت Gulp عام ، لذا لا يلزم أيضًا. لقد أضفنا -save-dev ، والذي يخبر الكمبيوتر بإضافة gulp باعتباره تبعية dev في package.json. في هذه المرة ، نقوم بتركيب Gulp في المشروع بدلاً من تثبيته على مستوى العام ، وهذا هو سبب وجود بعض الاختلافات في الامر.

سترى أن الكلمة الرئيسية sudo غير مطلوبة لأننا لا نثبّت Gulp في الغالب ، لذا لا يلزم أيضًا. لقد أضفنا -save-dev ، الذي يخبر الكمبيوتر بإضافة gulp باعتباره تبعية dev في package.json.

هذه المرة ، نقوم بتركيب Gulp في المشروع بدلاً من تثبيته على مستوى العام ، وهذا هو سبب وجود بعض الاختلافات في الأمر.
هذه المرة ، نقوم بتركيب Gulp في المشروع بدلاً من تثبيته على مستوى العام ، وهذا هو سبب وجود بعض الاختلافات في الأمر.

 

إذا قمت بفحص مجلد المشروع عندما ينتهي الأمر من التنفيذ ، يجب أن تشاهد أن Gulp قام بإنشاء مجلد node_modules. يجب أيضًا أن تشاهد مجلد gulp داخل node_modules.

إذا قمت بفحص مجلد المشروع عندما ينتهي الأمر من التنفيذ ، يجب أن تشاهد أن Gulp قام بإنشاء مجلد node_modules. يجب أيضًا أن تشاهد مجلد gulp داخل node_modules.
إذا قمت بفحص مجلد المشروع عندما ينتهي الأمر من التنفيذ ، يجب أن تشاهد أن Gulp قام بإنشاء مجلد node_modules. يجب أيضًا أن تشاهد مجلد gulp داخل node_modules.

نحن على استعداد تقريبا لبدء العمل مع Gulp. قبل أن نفعل ذلك ، يجب أن نكون واضحين في كيفية استخدام Gulp للمشروع ، وجزء من ذلك هو اتخاذ قرار بشأن بنية الدليل.

نحن على استعداد تقريبا لبدء العمل مع Gulp. قبل أن نفعل ذلك ، يجب أن نكون واضحين في كيفية استخدام Gulp للمشروع ، وجزء من ذلك هو اتخاذ قرار بشأن بنية الدليل.
نحن على استعداد تقريبا لبدء العمل مع Gulp. قبل أن نفعل ذلك ، يجب أن نكون واضحين في كيفية استخدام Gulp للمشروع ، وجزء من ذلك هو اتخاذ قرار بشأن بنية الدليل.

في هذا الجذر ، سنستخدم مجلد التطبيق لأغراض التطوير ، بينما يستخدم المجلد dist (كما في “التوزيع”) لاحتواء الملفات المحسنة لموقع المشروع.

نظرًا لاستخدام التطبيق لأغراض التطوير ، سيتم وضع جميع الرموز في التطبيق.

يجب أن نضع بنية المجلد هذه في الاعتبار عندما نعمل على تكوينات Gulp الخاصة بنا. الآن ، لنبدأ بإنشاء مهمة جلب الأول في gulpfile.js ، التي تخزن جميع تكوينات  فى الغالب

كتابة المهمة الأولى Gulp

الخطوة الأولى لاستخدام Gulp هي أن تطلب ذلك في gulpfile.

الخطوة الأولى لاستخدام Gulp هي أن تطلب ذلك في gulpfile.
الخطوة الأولى لاستخدام Gulp هي أن تطلب ذلك في gulpfile.

تخبر العبارة المطلوبة Node للنظر في مجلد node_modules لحزمة تسمى gulp. بمجرد العثور على الحزمة ، نقوم بتعيين محتوياتها إلى gulp متغير.

يمكننا الآن البدء في كتابة مهمة gulp مع هذا المتغير gulp. البنية الأساسية لمهمة gulp هي

Gulp Task
Gulp Task

يشير اسم المهمة إلى اسم المهمة ، والتي سيتم استخدامها عندما تريد تشغيل مهمة في Gulp. يمكنك أيضا تشغيل نفس المهمة في سطر الأوامر بكتابة gulp task-name.

لاختباره ، دعنا ننشئ مهمة مرحبًا تقول Hello Zell!

دعنا ننشئ مهمة مرحبًا تقول Hello Zell!
دعنا ننشئ مهمة مرحبًا تقول Hello Zell!

يمكننا تشغيل هذه المهمة مع gulp hello في سطر الأوامر.

 

termainel
termainel

سوف يقوم سطر الأوامر بإرجاع سجل يقول Hello Zell !.

سوف يقوم سطر الأوامر بإرجاع سجل يقول Hello Zell !.
سوف يقوم سطر الأوامر بإرجاع سجل يقول Hello Zell !.

 

Gulp المهام عادة ما تكون أكثر تعقيداً من هذا. عادةً ما يحتوي على طريقتين Gulp إضافيتين ، بالإضافة إلى مجموعة متنوعة من ملحقات Gulp.

إليك ما تبدو عليه المهمة الحقيقية:

gulp.src and gulp.dest
gulp.src and gulp.dest

كما ترون ، تأخذ مهمة حقيقية في طريقتين من ملفات  gulp.src و gulp.dest.

gulp.src يخبر مهمة Gulp ما الملفات التي ستستخدمها للمهمة ، بينما gulp.dest يخبر Gulp بمكان إخراج الملفات بمجرد اكتمال المهمة.

دعونا نحاول إنشاء مهمة حقيقية حيث نقوم بتحويل  ملفات Sass الي ملفات CSS.

المعالجة المسبقة مع Gulp

يمكننا تجميع Sass إلى CSS في Gulp بمساعدة مكون إضافي يسمى gulp-sass. يمكنك تثبيت gulp-sass في مشروعك باستخدام الأمر npm install like we did for gulp.

كما نرغب أيضًا في استخدام علامة -save-dev لضمان إضافة gulp-sass إلى devDependencies في package.json

افتح الكوماند للين لدين وقم بتسطيب

$ npm install gulp-sass –save-dev

 

 

 

علينا أن نطلب من gulp-sass من مجلد node_modules مثلما فعلنا مع gulp قبل أن نتمكن من استخدام البرنامج المساعد.

require gulp-sass
require gulp-sass

يمكننا استخدام gulp-sass عن طريق استبدال aGulpPlugin () مع sass (). بما أن الهدف من المهمة هو تجميع Sass في CSS ، دعنا نسميها.

compile Sass into CSS
compile Sass into CSS

سنحتاج إلى توفير مهمة sass بالملفات المصدر ووجهة للمهمة حتى تعمل ، لذلك دعنا ننشئ ملف styles.scss في مجلد التطبيق / scss. سيتم إضافة هذا الملف إلى مهمة sass في gulp.src.

نريد إخراج ملف styles styles.css إلى المجلد `app / css` ، والذي سيكون وجهة gulp.dest.

styles.css
styles.css

سوف ترغب  في اختبار أن مهمة sass تعمل كما نريدها. للقيام بذلك ، يمكننا إضافة وظيفة Sass داخل styles.scss.

sass
sass

إذا قمت بتشغيل gulp sass في سطر الأوامر ، فيجب أن تكون الآن قادرًا على رؤية أن ملف styles.css قد تم إنشاؤه في التطبيق / css. بالإضافة إلى ذلك ، يحتوي على الكود حيث تم تقييم النسبة المئوية (5/7) إلى 71.42857٪.

gulp sass
gulp sass

 

هكذا نعرف أن مهمة sass تعمل!

نحتاج أحيانًا إلى القدرة على ترجمة أكثر من ملف .scss إلى CSS في نفس الوقت. يمكننا القيام بذلك بمساعدة Node globs.

لمعلوماتك: يستخدم Gulp-sass LibSass لتحويل Sass إلى CSS. إنها أسرع بكثير من الطرق القائمة على روبي. إذا كنت تريد ، لا يزال بإمكانك استخدام أساليب Ruby مع Gulp باستخدام gulp-ruby-sass أو gulp-compass بدلاً من ذلك.

Glob هي أنماط مطابقة للملفات التي تسمح لك بإضافة أكثر من ملف واحد إلى gulp.src. إنها مثل التعبيرات العادية ، ولكن بشكل خاص لمسارات الملفات.

عند استخدام glob ، يقوم الكمبيوتر بفحص أسماء الملفات والمسارات الخاصة بالنمط المحدد. إذا كان النمط موجودًا ، فسيتم مطابقة الملف.

معظم مسارات العمل مع Gulp تميل إلى أن تتطلب فقط 4 أنماط مختلفة من الغلوبلة:

* .scss: نمط * هو حرف بدل يتطابق مع أي نمط في الدليل الحالي. في هذه الحالة ، نطابق أي ملفات تنتهي بـ .scss في المجلد الجذر (المشروع).
** / * scss: هذه نسخة أكثر تطرفًا من * النمط الذي يطابق أي ملف ينتهي بـ .scss في المجلد الجذر وأي أدلة تابعة.
! not-me.scss: The! يشير إلى أن Gulp يجب أن يستبعد النمط من مبارياته ، وهو أمر مفيد إذا كان عليك استبعاد ملف من نموذج متطابق. في هذه الحالة ، سيتم استبعاد not-me.scss من المباراة.
*. + (scss | sass): زائد + والأقواس () يسمح لـ Gulp بمطابقة أنماط متعددة ، مع أنماط مختلفة مفصولة بالأنبوبة | حرف. في هذه الحالة ، سيقوم Gulp بمطابقة أي ملف ينتهي بـ .scss أو .sass في المجلد الجذر.
نظرًا لأننا نعرف الآن عن التغلب على المشكلة ، يمكننا استبدال التطبيق / scss / styles.scss بنمط scss / ** / *. scss ، الذي يطابق أي ملف بامتداد .scss في التطبيق / scss أو دليل تابع.

 

Globbing in Node
Globbing in Node

أي ملف ساس آخر موجود داخل app / scss سيتم تضمينه تلقائيًا في مهمة sass مع هذا التغيير. إذا أضفت ملف print.scss إلى المشروع ، فسترى أن print.css سيتم إنشاؤه في التطبيق / css.

sass task with this change
sass task with this change

لقد نجحنا الآن في ترجمة جميع ملفات Sass إلى ملفات CSS باستخدام أمر واحد. والسؤال هو ، ما هو جيد يفعل إذا كان لدينا لتشغيل sulp sul يدوياً في كل مرة نريد تجميع Sass في CSS؟

لحسن الحظ ، يمكننا أن نقول لـ Gulp لتشغيل مهمة sass تلقائيًا عند حفظ الملف من خلال عملية تسمى “مشاهدة”.

مشاهدة ملفات Sass للتغييرات

يقدم Gulp طريقة مراقبة تتحقق لمعرفة ما إذا كان الملف قد تم حفظه أم لا. صيغة بناء الجملة هي:

 

watch all Sass
watch all Sass
watch all Sass
watch all Sass

وفي أغلب الأحيان ، سنحتاج إلى مشاهدة أكثر من نوع واحد من الملفات في وقت واحد. للقيام بذلك ، يمكننا تجميع عمليات المراقبة المتعددة معًا في مهمة واحدة:

gulp watch
gulp watch

إذا قمت بتشغيل الأمر gulp watch الآن ، سترى أن Gulp يبدأ بالمشاهدة على الفور

gulp watch
gulp watch

والات يتم تشغيل مهمة sass تلقائيًا عند حفظ ملف .scss.

watch-compile
automatically runs

لنأخذ خطوة أخرى إلى الأمام ونجعل من Gulp إعادة تحميل المتصفح عندما نقوم بحفظ ملف .scss بمساعدة Browser Sync.

إعادة تحميل مباشر باستخدام Browser Sync

يساعدك Browser Sync في جعل تطوير الويب أسهل من خلال تدعيم خادم ويب يساعدنا على إعادة التحميل المباشر بسهولة. لديها ميزات أخرى ، مثل مزامنة الإجراءات عبر أجهزة متعددة ، كذلك.

سنقوم أولاً بتثبيت Browser Sync:

$ npm install browser-sync –save-dev

 

 

ربما لاحظت أنه لا يوجد بادئة gulp- عند تثبيت Browser Sync. هذا لأن Browser Sync يعمل مع Gulp ، لذلك ليس علينا استخدام مكون إضافي.

لاستخدام Browser Sync ، سيتعين علينا طلب Browser Sync.

To use Browser Sync
To use Browser Sync

نحتاج إلى إنشاء task  browserSync لتمكين Gulp من تدوين خادم باستخدام Browser Sync. نظرًا لأننا ندير خادمًا ، نحتاج إلى السماح لـ Browser Sync بمعرفة مكان وجود خادم الخادم. في حالتنا ، إنه مجلد `التطبيق`:

create a browserSync task
create a browserSync task

يجب علينا أيضًا تغيير task  sass قليلاً حتى يتمكن Browser Sync من حقن أنماط CSS جديدة (تحديث CSS) في المتصفح كلما تم تشغيل مهمة sass.

تعلم Gulp للمبتدئين
change our sass task slightly

لقد انتهينا مع تكوين Browser Sync. الآن ، يجب علينا تشغيل كل من مهام الساعة والمتصفح sync في نفس الوقت لإعادة التحميل المباشر.

سيكون من المرهق أن تفتح نافذتي سطر الأوامر وتدير gulp browserSync و gulp watch بشكل منفصل ، لذلك دعونا نجلب Gulp لتشغيلها معًا عن طريق إخبار مهمة المراقبة التي يجب إكمال المتصفح Sync قبل السماح بتشغيل الساعة.

يمكننا القيام بذلك عن طريق إضافة وسيطة ثانية لمهمة المراقبة. الصيغة هي:

gulp.task(‘watch’, [‘array’, ‘of’, ‘tasks’, ‘to’, ‘complete’,‘before’, ‘watch’], function (){ // … })

وفي هذه الحالة ، نضيف مهمة browserSync.

adding the browserSync task
adding the browserSync task

سنرغب أيضًا في التأكد من أن sass يعمل قبل

make sure sass runs before watch
make sure sass runs before watch

 

لذا فإن CSS ستكون بالفعل الأحدث كلما قمنا بتشغيل أمر Gulp.

الآن ، إذا قمت بتشغيل watch  gulp في سطر الأوامر ، يجب أن تبدأ Gulp في كل من مهام sass و browserSync بشكل متزامن. عند الانتهاء من كلا المهمتين ، سيتم تشغيل watch.

gulp watch in the command line
gulp watch in the command line

 

في الوقت نفسه ، تظهر نافذة المتصفح التي تشير إلى app / index.html أيضًا. إذا قمت بتغيير ملف styles.scss ، فسترى أن المتصفح يعيد تحميله تلقائيًا.

browserSync.reload function when a file gets saved
browserSync.reload function when a file gets saved

شكراً لوقتك نرجوا ان تكون قد اعجبك المقال  … قريبا سوف يتم كتابة الدرس الثانى للمقال 

لا يوجد تعليق فى هذا الموضوع كن اول من يضع تعليق