الآن بعد أن منحنا ما يكفي،
حان الوقت لجلب.
سنحاول تنفيذ نفس النوع من
المهام التي قمنا بها مع كل من البرامج النصية NPM و Grunt،
ولكن الآن سنحاول أن تفعل الشيء نفسه باستخدام Gulp و Gulp Plug-ins.
للبدء، دعونا أولا تثبيت غولب كوحدة عالمية.
لذلك، للقيام بذلك، في موجه،
اكتب npm -g install gulp،
سيؤدي ذلك إلى تثبيت Gulp كوحدة نمطية عالمية
وجعلها متاحة للاستخدام على سطر الأوامر.
بعد إكمال هذا،
فإن الخطوة التالية هي تثبيت Gulp محليًا في مشروعنا.
لذلك للقيام بذلك، في موجه،
اكتب npm install gulp - save-dev.
بمجرد الانتهاء من هذين،
حان الوقت للمضي قدما وتكوين مهام غولب لدينا.
قبل أن نفعل ذلك، خطوتنا التالية،
سنقوم بتثبيت المكون الإضافي Gulp Sass حتى نتمكن من
تكوين Sass لنرى كمهمة تحويل في ملف Gulp الخاص بنا.
لذلك، للمضي قدما والقيام بذلك،
اكتب npm تثبيت
sass gulp - save-dev.
أيضًا أثناء وجودنا في ذلك،
قد نقوم أيضًا بتثبيت مهمة Gulp Sync Browser أيضًا،
حتى نتمكن من تكوين كل من هذا تلو الآخر.
لذلك، سأقوم بتثبيت، npm تثبيت المتصفح sync - save-dev.
مرة واحدة يتم تثبيت هذين،
ثم دعونا المضي قدما وإنشاء ملف غولب لدينا ومن ثم تكوين لدينا غولب المهام هنا.
الذهاب إلى مجلد المشروع لدينا،
دعونا إنشاء ملف جديد ومن ثم تسمية ذلك gulpfile.js،
وفي هذا الملف، ونحن في طريقنا لتكوين لدينا غولب المهام.
لذا، بمجرد أن يكون gulpfile.js جاهزًا
، قم بتكوين مهام Gulp هنا أولاً
بالبدء بـ «استخدام صارم» ثم var gulp.
لذلك، نحن بحاجة إلى طلب وحدات عقدة غولب،
وأيضا بينما نحن في ذلك،
ونحن سوف تتطلب وحدة عقدة ساس.
كما ذكرت في التمرين السابق،
سيصبح أكثر وضوحًا لك لماذا يتم كتابة الشفرة مثل هذا،
بمجرد فهم المزيد عن وحدات العقدة في دورة لاحقة.
BrowserSync، لذلك ما قمنا به هو تضمين
وحدات عقدة Gulp Contrance و Bowsersync في ملف Gulp الخاص بنا.
وبمجرد الانتهاء من ذلك،
فقد حان الوقت لتكوين مهام Gulp الخاصة بنا.
كما تعلمنا سابقا،
Gulp هو رمز قائم على طريقة تكوين
المهام على عكس Grunt الذي يعتمد أكثر على تكوين المهام.
لذلك، في حالة Gulp،
سيقوم الطفل بإعداد مهامنا لكتابة
gulp.task ثم دعونا إعداد اسم المهمة «sass»،
ومن ثم لهذه المهمة،
سنقوم بإعداد هذا كدالة،
وهذه هي الطريقة التي يتم بها إعداد التعليمات البرمجية.
لذا، وظيفة Gulp Tasks Sass وهنا،
نقوم بإعداد مهام Gulp،
لذلك سنقوم بكتابة gulp.src ('. /css/*.scss') كما علمنا،
Gulp هو أداة قائمة على التعليمات البرمجية على التكوين.
لذلك، سنقوم بإعداد هذه المهمة على هذا النحو.
لذلك، ترى أننا حددنا Gulp مصدر الأنابيب ساس على،
ثم هنا، خطأ.
لذلك، في حالة حدوث خطأ،
سنستخدم طريقة ساس لتسجيل الخطأ ثم توجيه هذا
من خلال gulp.dest ('. /css ')،
ويكمل تكوين مهام Gulp Sass.
يجب أن تتساءل لماذا نكتب رمز مثل هذا.
تقول مصدر gulp ثم حدد شيئًا هناك،
ثم يقول التالي الأنبوب ثم يقول التالي الأنبوب.
دعونا نفهم طريقة غولب للقيام بالأشياء بمزيد من التفصيل.
للمساعدة في شرح سبب تكوين المهام من هذا القبيل،
لدي شرح لما نسميه Gulp Streams.
الطريقة التي يعمل بها Gulp هي مثل أخذ مجموعة من الملفات وتحدد مجموعة
الملفات عن طريق قول مصدر gulp كما فعلنا مع مهام Sass هناك.
حتى هنا، هذه هي الوظيفة التي تأخذ الملفات.
يمكنك حتى تحديد الملفات باستخدام أنماط globbing التي تعلمناها في Grunt،
ومن ثم إنشاء دفق من الكائنات التي تمثل هذه الملفات.
الآن، بمجرد إنشاء الدفق
، يمكن توصيل الدفق عبر مجموعة من
الوظائف واحدًا تلو الآخر من أجل تحويل هذه الملفات.
ثم أخيرا، يمكن وضع الملفات المحولة الناتجة في موقع الوجهة.
لذلك هذا هو السبب في أننا نحدد مصدر غولب،
ثم نحدد الأنابيب.
لذلك، فإن الأنبوب يسمح للتدفق أن يكون الأنابيب من خلال وظيفة،
وهكذا، وهذا هو السبب في أننا قلنا نقطة الأنابيب،
وبعد ذلك قلنا gulp.
ثم قلنا ساس على الخطأ.
ثم التالي يقول أنبوب غولب ديست.
وهكذا، يحدد gulp dest وجهة الملفات التي تمت معالجتها.
لذا، هذه هي الطريقة التي يتم بها تحديد مهمة نموذجية في gulp لأنه يعمل gulp على التدفقات.
لذلك، ملفات الدفق الخاصة بك من خلال الأنابيب حتى
يتم نقلها ومن ثم سيتم إيداعها في وجهة محددة.
لذلك، سترى بنية مماثلة لكثير من المهام غولب التي
كنا تكوين في هذا التمرين وممارسة المقبل.
الآن بعد أن فهمت قليلاً حول كيفية عمل gulp مع التدفقات وكيف
تستخدم مهمة gulp الأنبوب لمعالجة الملفات من خلال مجموعة من الوظائف،
ويصبح أكثر وضوحًا لك لماذا نقوم بإعداد مهمة sass هذه كما هو موضح في هذا الرمز هنا.
وتسمى المهمة التالية التي سنقوم بتكوين gulp،
وسنقوم بتكوين هذه المهمة كساعة sass.
لذا، هذه مهمة مشاهدة سنقوم بتهيئتها،
ومن ثم ستحدد الوظيفة.
وهكذا هنا،
مهمة المشاهدة الخاصة بالجولب ساس،
ما نقوم به هو تحديد الملفات التي سنراقبها.
لذلك، نستخدم مهمة مشاهدة gulp لمشاهدة الملف.
لذا، تم بالفعل دمج الساعة في gulp.
لذلك، سوف يستغرق ساعة gulp ثم نحدد الملفات هناك *.SCSS.
لذا، كما ترون، ستشاهد ساعة gulp
هذه الملفات ثم عند حدوث أي تغييرات على هذه الملفات،
ستقوم بتشغيل مهمة sass،
التي حددناها سابقًا.
لذلك، هذه هي الطريقة التي يتم بها إعداد مهمة مشاهدة ساس.
الآن بعد أن قمنا بهذين،
دعونا إعداد مهمة مزامنة المتصفح هذه بعد ذلك.
لذا، أغلق ذلك باستخدام الفاصلة المنقوطة ثم
المهمة التالية التي سنقوم بإعدادها هي مهمة مزامنة المتصفح.
لذلك، سأحدد مهمة مزامنة المتصفح هناك.
ثم بالنسبة لمهمة مزامنة المتصفح،
سأحدد هذه الوظيفة.
مرة أخرى، لاحظ الهيكل الذي نكتب فيه التعليمات البرمجية،
مهمة gulp ثم قمت بتحديد شيء يتبع ولكن مع وظيفة.
الآن مرة أخرى كما قلت،
ونحن نتعلم وحدات العقدة في الدورة الأخيرة من هذا التخصص،
وسوف تصبح أكثر وضوحا بالنسبة لك لماذا لا وحدات مكتوبة مع هذا الهيكل،
ولماذا يتم كتابة وظائف مثل هذا.
لذلك، نقول gulp مزامنة متصفح المهام.
هنا، سأقوم بتعريف متغير،
متغير جافا سكريبت يسمى الملفات،
وهو لا شيء سوى في الصفيف،
وأنه داخل هذه الملفات مجموعة أود تحديد جميع الملفات التي
إذا تم تعديل مزامنة المتصفح يحتاج
إلى التسبب في إعادة التحميل أو الملف.
لذا، ملفات html، ملفات CSS في مجلد CSS،
ثم سأشاهد أيضًا ملفات الصور وملفات
JavaScript.
كل هذه الملفات إذا تغير أي منها.
لذلك، بعد ذلك، سأقوم بتكوين مزامنة المتصفح هنا.
لذلك، سأقول مزامنة المتصفح.
لقد قمنا بالفعل بتعريف هذا المتغير المسمى مزامنة المتصفح في وقت سابق.
لذلك، يجب علينا تهيئة مزامنة المتصفح،
وهكذا، فإن المعلمة الأولى لذلك
هي الملفات التي ستحتاج إلى مراقبتها،
ثم تحدد المعلمة الثانية الخيارات التي نعطيها للمتصفح.
لذا، فإن الخيار الذي أقوم بتحديده هو للخادم.
سأحدد الدليل الأساسي كدليل الحالي،
ثم يكمل مواصفات مهمة مزامنة المتصفح.
لذلك، مع هذا، أكملنا تحديد مهمة مزامنة المتصفح هنا.
لذلك، يمكنك أن ترى أن كيف قمنا بتكوين مهمة مزامنة المتصفح،
حددنا الملفات ثم حفظ
مزامنة المتصفح فيه وتوفير الملفات كمعلمة الأولى.
المعلمة الثانية هي خيارات المكون الإضافي للمزامنة للمتصفح.
ثم أخيرا، سنقوم جدولة أو
سنقوم بتكوين المهمة المسماة الافتراضي.
مثلما لدي المهمة الافتراضية في Grunt،
يمكننا أيضًا الحصول على مهمة افتراضية مماثلة محددة لـ gulp.
لذلك، هنا نقول gulp مهمة مزامنة المتصفح الافتراضي،
ومن ثم تحديد وظيفة.
وداخل هناك سوف نحدد بداية الجولب.
لذا، يحدد هذا أنه يجب أن أبدأ
هذه المهمة الأخرى التي يجب أن تبدأ مهمة مشاهدة sass. مهمة الساعة sass يجب أن تبدأ.
تأكد من تشغيل مهمة مزامنة المستعرض قبل بدء تشغيل مهمة مشاهدة sass.
لذلك، هذا هو بناء الجملة لتحديد ذلك في غولب.
لذلك، مع هذا، قمنا بتكوين كل ما نحتاجه في ملف gulp.
لذا، بالعودة مرة أخرى،
هناك خطوات قمنا بها.
استخدمنا لأول مرة تتطلب تضمين جميع الإضافات الخاصة بهم gulp هناك،
ثم قمنا بتكوين مهمة sass،
ثم حددنا مهمة مشاهدة sass.
هذا هو المكان الذي نستخدم فيه ساعة gulp المتوفرة لنا مثل من gulp.
ثم حددنا مهمة مزامنة المتصفح ثم أخيرًا
إعادة جدولة المهمة الافتراضية مع المتصفح Sync وبدء gulp بساعة sass.
الآن، دعونا نرى التغييرات،
ومن ثم سنمضي قدما وتنفيذ ملف gulp إضافة،
ونوع موجه gulp.
سترى أن gulp يبدأ بمزامنة المتصفح وبدء تشغيل مهمة مشاهدة sass،
ثم ستبدأ مزامنة المتصفح في تقديم الملفات.
إذا قمت بعرض موقع الويب الخاص بك باستخدام متصفح،
فستتمكن من رؤية موقع الويب الذي يتم عرضه في المتصفح. و
اسمحوا لي أيضا أن أوضح أداء مهمة المراقبة.
لذلك، سأسحب style.css
وأحاول فقط حفظ التغيير وستلاحظ أنه على الجانب الأيسر،
يتم استدعاء مهمة ساس على الفور
وسيقوم بإعادة ترجمة ملف.scss style.ss في ملفات CSS.
ومن ثم سيتم إعادة تحميل هذا المتصفح في هذه المرحلة.
مع هذا نكمل الجزء الأول من ممارسة الجولب.
في الجزء الثاني، سنقوم بإعداد مجلد التوزيع.
هذا هو الوقت المناسب بالنسبة لك للقيام git-commit مع الرسالة Gulp الجزء 1.