حان الوقت الآن للانتقال إلى الجزء الثاني من تمرين «غولب».
سنستمر في القيام بخطوات مماثلة كما فعلنا في
الجزء الثاني من تمرين البرنامج النصي للآلية الوقائية الوطنية والممارسة الحالية.
لذا، سنقوم بترتيب حذف مجلد التوزيع ثم نسخ الخطوط،
ثم أيضًا إعادة إنشاء مجلد التوزيع،
باستخدام وحدات عقدة مشابهة
لما استخدمناه في Grant وكذلك نصوص NPM.
الخطوة التالية هي إعداد المهام لحذف
مجلد التوزيع وأيضا نسخ الخطوط في مجلد التوزيع.
لذلك دعونا إعداد عدد قليل من وحدات العقدة.
أول واحد سوف نقوم بإعداده يسمى ديل.
يسمح لك نموذج العقدة هذا بحذف مجلد.
ودعونا نمضي قدما ونقوم بإعداد مهام Gulp.
مع Gulp، لحسن الحظ، لسنا بحاجة إلى تثبيت وحدة أخرى من أجل النسخ
لأن تيارات Gulp تسمح لنا بالقيام بنسخ الملفات مع القليل من الجهد.
الذهاب إلى ملف غولب،
وأنا ذاهب لتقديم وحدة غولب المختلطة،
والتي سأقول، ديل.
ومن ثم تتطلب وحدة ديل هنا.
لذلك بمجرد أن نطلب وحدة ديل هناك،
يمكننا المضي قدما وإعداد المهام.
لذا، سنقوم بإعداد المهمة النظيفة أولاً هنا.
لذلك بعد المهمة الافتراضية مباشرة،
سأقوم بإعداد المهمة النظيفة.
لذلك سأقول، مهمة Gulp نظيفة.
وكما ترون،
يتم إعداد هذا كوظيفة هناك.
وداخل ذلك نود أن نقول, العودة ديل.
ثم المعلمة المقدمة هي مجلد التوزيع هنا.
لذلك سيؤدي هذا إلى إعداد المهمة النظيفة.
وبمجرد تشغيل هذه المهمة،
فسيتم حذف مجلد التوزيع.
مهمتنا التالية هي نسخ الخطوط في مجلد التوزيع الخاص بهم.
لذلك، أود أن أقول، نسخ الخطوط.
وكما ترون،
قمنا بإعداد وظيفة هناك ومن ثم إغلاق وظيفة.
ثم هنا، أود أن أقول ببساطة،
مصدر غولب
ووحدات العقدة، الخط رهيبة، الخطوط.
يمكنك أن تراني أستخدم الأنماط العالمية، هناك.
وبعد ذلك بمجرد أن نختار جميع الملفات المصدر،
نقوم فقط بتوصيلها إلى ملف الوجهة.
لذلك، لاحظت أننا لسنا بحاجة إلى
وحدة محددة لترتيب نسخ الملفات.
نحن ببساطة نستخدم تدفقات مصدر Gulp والوجهة
لتكون قادرة على توجيه الملفات من موقع المصدر إلى موقع الوجهة.
لذلك، فإن هذين إعداد نظيفة ونسخة الخطوط المهمة.
بعد ذلك، سنقوم بإعداد وحدة الآلية الوقائية الوطنية لمهمة imagemin.
وبالتالي فإن تصغير وضغط الصور.
لذلك، للقيام بذلك إضافة نوع موجه غولب إيماجيمين.
هذا هو البرنامج المساعد غولب المقابلة لوحدة عقدة إيماجيمين.
لذلك قمنا بتثبيت البرنامج المساعد غولب،
وهو أيضا وحدة العقدة.
لذلك بمجرد اكتمال التثبيت،
دعونا إعداد هذه المهمة إيماجيمين.
الذهاب إلى ملف غولب لدينا،
سنقوم بإعداد مهمة إيماجيمين هنا.
لذلك سنقوم بإعداد مهمة imagemin كدالة.
كما ترون، فإن هيكلة التعليمات البرمجية
لتعريف مهمة Gulp هو معيار إلى حد كبير.
لذا، أنت تَقُولُ مصدر غولب.
نحدد الملفات المصدر هناك وملفات المصدر في
مجلد الصور ملفات JPG و
GIF و PNG من هناك.
ومن ثم توجيه لهم من خلال مهمة إيماجيمين.
ثم سأقوم بإعداد بعض المعلمات هنا.
لذلك، سأقوم بإعداد
مستوى التحسينات إلى ثلاثة، تقدمية كما صحيح.
لذا، سيؤدي ذلك إلى تحويلها إلى صور تقدمية ومتشابكة.
لذلك بمجرد إعداد هذا،
فإن الخطوة التالية هي توجيههم إلى وجهتهم.
والوجهة هنا كما ترون هي مجلد الصورة في مجلد التوزيع.
لذلك مع هذا يتم إعداد مهمة imagemin الآن.
الآن، سنقوم ببناء مهمة البناء هنا.
لذلك، اسمحوا لي إعداد مهمة البناء.
لذلك لبناء المهمة،
ما تريد القيام به هو
تنفيذ المهمة النظيفة أولاً قبل
تنفيذ المهام المتبقية
لأننا نريد أولاً تنظيف مجلد التوزيع.
ويجب أن يكتمل ذلك قبل الانتهاء من المهام المتبقية.
مع غولب، يتم تنفيذ المهام بالتوازي تلقائيا.
وهكذا قد يحدث ذلك أنه
إذا قمت بتنفيذ المهمة النظيفة بالتوازي مع المهمة المتبقية،
قد ينتهي الأمر بالمهمة النظيفة في وقت لاحق
ثم حذف بعض العمل الذي تم القيام به من قبل المهام المتبقية.
لذلك، لهذا السبب عند تحديد مهمة Gulp،
إذا قمت بتحديد نظيفة كأول واحد في،
كمعلمة ثانية هنا،
فهذا يعني أنه سيتم إكمال هذه المهمة أولاً.
ثم سيتم تنفيذ المهام المتبقية.
لذا، أنا أَقُولُ جولب يَبْدأُ
مع بداية Gulp،
سيتم تنفيذ جميع المهام التي نحددها هنا بالتوازي.
لذا، سأقوم بتنفيذ مهمة خطوط النسخ وكذلك مهمة imagemin معًا.
في وقت لاحق، سنقوم بإعداد مهمة usemin ثم
تنفيذ ذلك أيضا جنبا إلى جنب مع خطوط النسخ و imagemin.
الشيء الأخير الذي أحتاج إلى إضافته قبل المضي قدما وتنفيذ
المهام هو الصعود هنا ومن ثم تتطلب إيماجيمين.
أود أن أقول إيماجيمين تتطلب جلب إيماجيمين.
ثم حفظ التغييرات.
دعونا الآن المضي قدما والتحقق من مهمة البناء.
في موجه، إذا كان نوع الخاص بك غولب بناء،
ثم يجب أن تنفذ جميع المهام الثلاث.
لذلك سترى أنه يبدأ المهمة النظيفة
ويكملها ثم يبدأ مهمة البناء الفعلية.
لذلك، يمكنك أن ترى أنه من خلال تحديد
النظيف يجب أن تكتمل قبل حدوث الإنشاء الفعلي،
ثم تأكد من أنك تقوم أولاً بتنظيف مجلد التوزيع
ثم مهمة الإنشاء التي تضم خطوط النسخ و imagemin،
سيتم تنفيذ كل منهم إكمال بالتوازي بعد ذلك.
الذهاب إلى المحرر،
سترى أنه في مجلد التوزيع،
نرى أن الخطوط قد تم نسخها وتم نسخ الصور بشكل صحيح.
الخطوة الأخيرة هي تعيين مهمة usemin من أجل بناء مجلد التوزيع.
لإعداد أنها تستخدم مهمة،
وأنا ذاهب لتثبيت عدد قليل من الإضافات غولب لذلك أود أن أقول الآلية الوقائية الوطنية تثبيت.
ثم أود تثبيت البرنامج المساعد ملف uglify Gulp،
والذي من الواضح أنه أيضًا وحدة عقدة.
ثم سأقوم بتثبيت وحدة عقدة usemin ثم وحدة عقدة rev.
وحدة عقدة Gulp rev تشبه البرنامج المساعد لمنحة الملف الذي رأيناه في وقت سابق.
انها مختلفة قليلا عن ملف الملف الذي رأيناه في وقت سابق،
ولكن يخدم نفس الغرض.
لذلك، غولب ريف، ثم سأقوم بإعداد غالب CSS نظيفة ثم غولب فلاتماب.
سترى السبب في ذلك
ونحن إعداد مهمة usemin لدينا، لذلك،
و gulp-html دقيقة ونحن نمضي قدما وتثبيت هذه الوحدات هنا.
مرة واحدة يتم تثبيت وحدات،
دعونا المضي قدما وتتطلب هذه الوحدات في gulpfile لدينا ومن ثم إعداد مهمة usemin.
الذهاب إلى gulpfile لدينا الحق في الجزء العلوي،
وأنا ذاهب إلى تتطلب الوحدات التي أنا فقط تثبيت الآن.
لذلك، القبيح القبيح قبيح.
لذا فإن المهمة uglify ثم مهمة
usemin gulp usemin،
ثم بعد ذلك
القس ثم،
نسيت هناك، فاصلة هناك.
كن حريصا جدا على عدم تفويت هذه الفواصل هناك.
لذا تتطلب gulp css نظيفة، ثم flatmap، و htmlmin.
لذلك هذه هي وحدات غولب
التي قمنا بتثبيتها،
لذلك دعونا حفظ التغييرات ومن ثم سوف نذهب إلى أسفل وإعداد مهمة usemin.
القادمة إلى الجزء السفلي من gulpfile،
هناك الحق سوف أقوم بإعداد مهمة usemin.
لذا، ماذا تفعل مهمة usemin؟
لذا فإن مهمة usemin تأخذ
htmlfiles ثم تبحث عن كتل CSS و
JavaScript في htmlfiles، تجمع، وتسلسل، وتصغير الملفات ثم
تستبدلها باستخدام الملف المتسلسل في مجلد التوزيع.
لذلك للبدء،
أود أن أبدأ أولا بتحديد مصدر غولب.
إذن أين هي ملفات المصدر؟
وبالتالي فإن الملفات المصدر هي htmlfiles في المجلد الحالي.
لذا جلبة. /start.html، ثم أنا ذاهب إلى
الأنابيب هذا gulpfiles من خلال هذه الوحدة غولب تسمى flatmap.
ماذا تفعل الخريطة المسطحة؟
يأخذ Flatmap هذه htmlfiles متعددة ثم
يبدأ خطوط أنابيب متوازية لكل واحد من هذه htmlfiles.
كل واحد منهم يمر من خلال نفس مجموعة من الخطوات ثم أخيرا،
تقارب ونسخه في المجلد الوجهة.
حتى كما ترون في المجلد الحالي لدينا،
لدينا contactus.html، aboutus.html، و index.html.
كل ثلاثة منهم تحتاج إلى معالجتها.
لذلك، فإن مخطط يسمح لنا لمعالجة هذه في موازاة ذلك،
بدءا من نفس مجموعة من الأنابيب لكل من هذه الملفات،
لذلك لهذا السبب أنا الاستفادة من مخطط هناك.
لذلك، flatmap، ثم داخل flatmap أحتاج إلى تحديد الوظيفة،
والمعلمتين؛ تيار، ملف.
لذا، يأخذ الملف بشكل أساسي كل ملف من ملفات المصدر التي حددناها هناك،
ثم يعاملها بنفس مجموعة الوظائف هنا،
ثم يبدأ دفق منفصل لكل واحد منهم.
لذلك، سوف أعود تيار،
وبعد ذلك سوف الأنابيب كل واحد من هذه من
خلال مهمة usemin التي هي نفسها،
تتكون من css
و uglify جافا سكريبت و html المهمة.
لذا بالنسبة لـ css، سأقوم بإجراء جزء المراجعة.
لذا من الواضح أن جزء css سيقوم بالتسلسل والتصغير وما
إلى ذلك، ثم يطبق المرجع على ذلك
بحيث يعمل على سلسلة 20 بت إلى ملف main.css هناك.
لذلك بالنسبة لـ css قمت بإعداد ذلك،
ثم لـ html،
لأن لدي ملفات html متعددة،
أحتاج إلى تحديد هذا كدالة،
وداخل هذه الوظيفة أود أن أقول إرجاع htmlmin.
ثم داخل هناك سأعطيها المعلمة colapseWhiteSpace،
وسيتم تعيين هذه المعلمة إلى true.
وهكذا هذا يكمل أساسا جزء أتش تي أم أل منه.
ثم التالي هو جزء js منه،
جزء جافا سكريبت منه،
والذي أحتاج إلى القيام به uglify ثم المراجعة له.
وبعد ذلك، إذا كان لدي
أي شفرة جافا سكريبت مضمنة، فأنا بحاجة إلى تطبيق
مهمة uglify لذلك،
ومن ثم لرمز inlinecss،
سأستخدم مهمة CleanCss هناك مع concat كمعلمة هناك.
لذلك مع هذا، قمت بإعداد مهمة usemin الخاصة بي.
لذلك سوف تلبي كل هذه الإجراءات المختلفة نيابة عني.
وبعد ذلك بمجرد الانتهاء منها
في النهاية، سيتم
نقل التدفقات الناتجة إلى مجلد التوزيع.
لذلك مع هذا، مهمة usemin هي الآن كل مجموعة الإعداد.
اسمحوا لي أن حفظ التغييرات.
ثم سأنزل إلى مهمة البناء ثم بعد imagemin سأقوم أيضًا
بإضافة usemin كواحدة من المهام التي يجب تنفيذها بواسطة مهمة البناء.
لذلك، مع هذه التغييرات، لذلك،
قمنا بتعديل مهمة البناء،
دعنا نمضي قدما ثم تحقق ما إذا كان مجلد التوزيع مبنيًا بشكل صحيح أم لا.
الذهاب إلى المطالبة، اسمحوا لي أن اكتب في
بناء gulp ثم انتظر gulp لبناء جميع المهام المختلفة.
سيستغرق الأمر بعض الوقت ليكمل usemin عمله،
وعندما يتم الانتهاء من إكمال التحويل،
فيجب أن يكون مجلد التوزيع الخاص بي جاهزًا الآن للعرض.
الذهاب إلى المحرر يمكنك الآن أن ترى أن مجلد التوزيع قد تم
إعداده هنا ويمكنك ان ترى الفهرس، كونتاكتوس، وحول us.htmlfile.
يمكنك أن ترى أنه عند فتح index.htmlfile،
تم ضغطه.
وقد تم تنفيذ
htmlmin، على وجه الخصوص ملاحظة كيف تم استبدال ملف css
بـ cs/main- ثم سترى سلسلة طويلة there.css.
لذلك هذا هو تماما مثل ملف rev الذي رأيته في النخر مع وحدة gulp rev،
وهذا هو ما يفعله لاسم الملف.
لذلك إذا نظرت إلى css، يمكنك أن ترى أن اسم الملف هو الواصلة الرئيسية
ثم بعض السلسلة هناك نقطة css وبالمثل لـ javascriptfile.
لذلك، هذا هو ما تفعله وحدة القس غولب،
ومن ثم يتم إعداد كل هذه الملفات الثلاثة.
دعونا نلقي نظرة على هذه الملفات في المتصفح.
الذهاب إلى المتصفح أستطيع أن أرى أن هناك ملفات المصدر يتم حفظها بشكل صحيح.
اسمحوا لي أن تحقق من مجلد التوزيع.
حتى في مجلد التوزيع،
index.html التي تم إعدادها من قبل
مهمة بناء غولب يبدو أن تعمل بشكل صحيح.
اسمحوا لي أيضا التحقق من صفحة حول,
ويمكننا أن نرى أن حول الصفحة بنيت أيضا بشكل صحيح,
وأيضا صفحة الاتصال.
حتى الآن يمكنك أن ترى أن مهمتنا الجولب قد اكتملت.
لذلك مع هذا، نكمل هذا التمرين.
في هذا التمرين، قمنا بإعداد تنظيف
ونسخ ملفات الخط إلى مجلد التوزيع الخاص بنا،
قمنا بمهمة imagemin ثم قمنا أخيراً بإعداد
مهمة usemin لبناء مجلد التوزيع الخاص بنا.
مع هذا نكمل هذا التمرين.
قد يكون هذا وقتًا مناسبًا لك للقيام بتعليق جيد مع الرسالة Gulp الجزء الثاني.