Gulp عبارة عن أداة لبناء التعليمات البرمجية قائمة على التدفق في عملية تطوير الواجهة الأمامية، وهي عبارة عن مشغل مهام تلقائي يعتمد على Nodejs، ولا يمكنها تحسين موارد موقع الويب فحسب، بل يمكنها أيضًا إكمال الاختبار والفحص والدمج والضغط والتنسيق تلقائيًا من كود الواجهة الأمامية، وتحديث المتصفح تلقائيًا، وإنشاء ملفات النشر، ومراقبة الملفات لتكرار الخطوات المحددة بعد التغييرات. باستخدامه، لا يمكننا كتابة التعليمات البرمجية بسعادة فحسب، بل يمكننا أيضًا تحسين كفاءة عملنا بشكل كبير.
بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 7، إصدار Nodejs 16، كمبيوتر DELL G3.
1. ما هو اللب؟
Gulp هي أداة لبناء التعليمات البرمجية قائمة على التدفق في عملية تطوير الواجهة الأمامية، وهي أداة لبناء مشاريع آلية، ولا يمكنها تحسين موارد موقع الويب فحسب، بل يمكن أيضًا إكمال العديد من المهام المتكررة أثناء عملية التطوير تلقائيًا باستخدام المهام الصحيحة الأدوات المستخدمة، لا يمكنها كتابة التعليمات البرمجية بسعادة فحسب، بل يمكنها أيضًا تحسين كفاءة عملنا بشكل كبير.
Gulp هو مشغل مهام تلقائي يعتمد على Nodejs ويمكنه إكمال الاختبار والفحص والدمج والضغط وتنسيق كود الواجهة الأمامية والتحديث التلقائي للمتصفح وإنشاء ملف النشر ومراقبة الملفات لتكرار الخطوات المحددة بعد التغييرات.
2. ما هو التدفق؟
قم بالتدفق، والتدفق، ومقارنة الملفات بالأنهار، ثم يتدفق نهر واحد للخارج ويتدفق نهر آخر للداخل. هذه هي الطريقة التي يعمل بها gulp على تدفقات الملفات، ويتم استخدام مخرجات إحدى العمليات كمدخل لعملية أخرى، مثل هذا
تشبه هذه العملية إلى حد ما عملية سلسلة jQuery: $("").html("gg").css({}).parent().find("a").......; عند استخدام المجاري ، يقوم gulp بإزالة الملفات المتوسطة ويكتب فقط الإخراج النهائي على القرص، مما يجعل العملية برمتها أسرع.
3. تركيب اللب
يعتمد Gulp على بيئة العقدة. تأكد أولاً من تثبيت العقدة.
بعد تثبيت العقدة، يتم أيضًا تثبيت npm [(node package manager) Nodejs package manager، المستخدم لإدارة المكونات الإضافية للعقدة (بما في ذلك التثبيت وإلغاء التثبيت وإدارة التبعية وما إلى ذلك)] تلقائيًا.
نظرًا لأنه يتم تنزيل المكون الإضافي لتثبيت npm من خادم أجنبي، فإنه يتأثر بشكل كبير بالشبكة وقد يتسبب في حدوث خلل، لذا من الأفضل استخدام cnpm المقدم من Taobao لتثبيت المكون الإضافي للعقدة.
تثبيت cnpm: http://npm.taobao.org/
بعد التثبيت، تحقق من إصدار cnpm للتأكد من نجاح التثبيت
بعد ذلك، يمكنك تثبيت gulp. قم أولاً بتثبيت gulp عالميًا: cnpm install -g gulp
ثم انتقل إلى سطح المكتب التجريبي/bbs2.0/src، وأدخل إلى بيئة bash، واستخدم cnpm install gulp لتثبيت gulp في الدليل الحالي.
بعد التثبيت الناجح، سيظهر مجلد Node_modules، ثم قم بإنشاء package.json من خلال cnpm init (ملف تكوين مشروع العقدة: نظرًا لأن حزمة المكونات الإضافية للعقدة كبيرة نسبيًا، لم يتم تضمين إدارة الإصدار. اكتب معلومات التكوين في الحزمة .json وإضافته إلى إدارة الإصدارات ويمكن للمطورين الآخرين تنزيله وفقًا لذلك)
أدخل كل الطريق وسيتم إنشاء ملف package.json إلى المجلد الحالي. في هذا الوقت، إذا حاولت استخدام gulp لبدء gulp، فستجد أنه سيتم الإبلاغ عن خطأ.
وفقا لرسالة الخطأ، نحن بحاجة إلى إنشاء ملف gulpfile.js
ثم قم بتشغيل بلع
ستجد أن كلمة "موافق" التي نحتاجها قد تمت طباعتها، ويمكن أن يعمل gulp بشكل طبيعي هنا.
4. استخدام المكونات الإضافية شائعة الاستخدام في بلع
1) ضغط الملفات المدمجة
قم بإنشاء ملف Index.html جديد
قم بإنشاء ملفين JS جديدين في دليل JS
قم بتحرير ملف gulpfile. على النحو التالي:
نظرًا لأننا نستخدم مكونين إضافيين، gulp-uglify و gulp-concat، فيجب علينا أولاً تثبيت هذين المكونين الإضافيين في الدليل الحالي.
عند تثبيت المكون الإضافي، استخدم --save-dev لإضافته إلى package.json، ويمكننا التحقق من كتابة الملف بنجاح إلى package.json.
حسنًا، نعم، ثم نواصل تثبيت gulp-concat في الدليل، وبعد اكتمال التثبيت، نضغط علىnode_modules وسنجد أن المكون الإضافي قد تم تثبيته بنجاح
حسنًا، إذا لم يتم الإبلاغ عن أي خطأ، فهذا يعني نجاح العملية. بعد ذلك، تحقق من الملف واكتشف أن هناك ملفات all.min.js ضمن src ونريد ضغطها ودمجها.
2) بلع ساس
لتثبيت sass، عليك أولاً تثبيت روبي والدخول إلى البرنامج التعليمي sass
انقر فوق "تثبيت" وسيتم إعطاؤك تعليمات حول كيفية تثبيت sass وروبي.
بعد تثبيت روبي بنجاح، تحقق من إصدار روبي
بعد النجاح، قم بتثبيت sass من خلال الأحجار الكريمة
إذا كنت بحاجة إلى استخدام البوصلة (العلاقة بين البوصلة وsass تعادل jQuery وjs)، فقم بتثبيت البوصلة بالمناسبة.
ما يجب ملاحظته هنا هو أن هناك مشكلة في مصدر الجوهرة، مما سيؤدي إلى فشل التثبيت: سيتم الإبلاغ عن خطأ: تم إرجاع SSL_connect=1 errno=0 State=SSLv3 قراءة شهادة الخادم B: فشل التحقق من ce rtificate . يمكنك تغيير مصدر الجوهرة إلى https://ruby.taobao.org/. إذا كان لا يزال لا يعمل، قم بتغييره إلى http://gems.ruby-china.org/ إذا لم يعمل، فهو كذلك قضية شخصية.
استخدم بعد ذلك إنشاء البوصلة لإنشاء مشروع ساس
بعد الإنشاء الناجح، سيتم إنشاء ثلاثة ملفات، sass، وأوراق الأنماط، وconfig.rb تلقائيًا.
افتح أي ملف في sass وقم بتحريره
ثم قم بتحرير ملف gulpfile
ثم قم بتثبيت gulp-sass و gulp-compass على الدليل الحالي
بعد بدء عملية gulp، تحقق من الملفات المقابلة في أوراق الأنماط
حسنًا، لقد تم تجميع sass بنجاح في ملف css
3) ضغط ملف CSS من خلال gulp-minify-css
بعد بدء المضغ
4) استخدم gulp-load-plugins لمساعدتنا في تحميل المكونات الإضافية
يمكن للمكون الإضافي gulp-load-plugins تحميل المكونات الإضافية gulp تلقائيًا في ملف package.json نيابةً عنك.
نحتاج فقط إلى طلب ('gulp-load-plugins')(); في ملف gulpfile.
ما عليك سوى استخدام البرنامج المساعد.** أدناه (يتم تسمية كلمات متعددة في حالة الجمل)
5) gulp-imagemin وimagemin-pngquant ضغط الصور
6) gulp-livereload لتحديث صفحات الويب تلقائيًا
قم أولاً بتثبيت gulp-livereload: cnpm install gulp gulp-livereload، هنا يتم ضغط الأعمدة بتنسيق HTML وتجميعها وضغطها.
ثم في ملف gulp
لتحقيق أي تحديث بنجاح
1. أنت بحاجة أيضًا إلى دعم التحميل المباشر للمكون الإضافي من Chrome، لذا تجاوز الحائط.
2. افتح صفحة الويب في بيئة الخادم