gulp هو سر المبرمجين علشان يوصلوا بمواقعهم لأحسن سرعة في التحميل

عمرك فكرت قبل كده ازاى اسرع الموقع بتاعى، ازاى اخلى التحميل يبقى احسن واسرع من باقى المواقع، أو ازاى اقدر اوصل لعدد ثواني قياسى في التحميل.

سرعة الموقع ليه مية الف عامل مؤثر عليها، من أول اختيارك لحجم وجودة الصور اللي هتعرضها، مروراً بتحميل اجزاء كتير مخفية ملهاش لازمة تكون موجودة في الصفحة لغاية لما توصل للبرمجة نفسها.

أول عامل مؤثر في تحميل الصفحة هو الكود البرمجي اللي موجود على السيرفر واللي لازم يكتمل تنفيذه بالكامل علشان يقدر يوصل للـbrowser اللي هيعرض ناتج تنفيذ الكود ده، لو مبرمج نص كم اللي كاتب كود كبير وبياخد في التنفيذ وقت كتير، ده بالطبع عامل مؤثر على سرعة تحميل الصفحة.

بس انا هنا في الموضوع ده مش داخل اتكلم عن برمجة الويب أو الـ Server Side Scripgin Language ، لا أنا داخل اتكلم عن نقطة واحدة بس ألا وهي ازاي اظبط الـ front-end resources علشان متاخودش وقت كتير في التحميل.

قبل ما اكمل، معظم الناس اللي شغالة في مجال الويب يسمع عن الكام كلمة دول (jquery, bootstrap, jquery ui, font awesome ) و حاجات تانية من الحاجات المساعدة في اظهار شكل صفحة الويب كويس.

ما الفرق بين HTML و HTML5 وما هى مميزات HTML5؟

طيب بردو الناس عارفة اني اى حد محتاج يعمل load للملفات دي بيعمل load بالشكل ده

<link href="css/main.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/site.js"></script>
<script src="js/module1.js"></script>
<script src="js/module2.js"></script>

 شكل كتابة الكود بالمنظر ده بيقول يا browser روح حمل الملف الـ CSS الأولاني وبعد كده اللي بعده، وبعدين اللي بعده وهكذا، يعني الـ borswer في الحالة البسيطة هيعمل 6 requests على السيرفر علشان يحمل ملفات تانية، طبعا دا لسا غير الصور وهكذا وبالطبع ده هيجهد السيرفر في طلبات كتيرة.

إيه لزوم الـ gulp في مواقع الانترنت؟

الأفضل اننا نضم كل ملفات الـ css في ملف واحد ونفس الكلام مع ملفات السكربتات، بالطبع هيكون حجم الملف اصغير من حجم ملفين منفصلين عن بعض، والحاجة التانية الإضافية هي ان الملفات دى كمان ممكن تضغط فهتوفر حجم نقل الملف وبالتالي هتسرع تحميل صفحة الويب.

احد الحلول انها تكون يدوية بمعني اني امسك الملفين واضمهم جوا بعض، بس الإنسان مش هيكون بالمهارة الكافية انه يضم ملفين مع بعض، دا بالإضافة انه مش هيقدر يعمل ضغط للمفات دي.

الحل الاوتوماتيكي اننا نستخدم واحدة من الـ  task runners زي الـ gulp و الـ grunt ، دور الـ gulp الفعلي انه هيعمل الحاجات اللي جاية دي.

هل يستطيع المبرمجون الاستغناء عن الفلاش فى إظهار الجرافيكس فى مواقع الانترنت

الـ gulp يقدر يدمج اكتر من ملف في ملف واحد

زي ما اتفقنا من شوية، كتر الملفات اللي موجودة في الصفحة المفروض انها هتتقل الصفحة علشان هيضطر يعمل more requests ، الحل اننا ندمج الملفات دي مع بعض ، مش بس كده لأ كمان دا هيدمج الـ libraries مع بعض ، يعني هيحط الـjquery والـ bootstrap و الملفات السكربتات الخاصة بيك كمان في نفس الملف.

الـ gulp يقدر يعمل ضغط او minification

أهم حاجة بجد في الـ gulp ده انه بيعمل minification، والكلمة دي معناها إنه هيعمل نسخة مصغرة من الملفات عن طريق تغيير اسماء المتغيرات وتقليل المسافات بين السطور لكي يصبح الملف سطر واحد، النقطة دي بالذات علشان تبقى مفهومة معظم الناس بتشوف الـ jquery نفسه اسمه jquery.js ومرة jquery.min.js ، وعموما انت لازم تستخدم jquery.min.js علشان ده النسخة الـ minified.

ايه أحسن طريقة فى إدارة المشروعات؟

الخلاصة

في المقال ده إحنا اتكلمنا عن معنى الـ gulp وايه اهم مزاياه، دورك انت بقى تروح تنزله وتستخدمه في شغل حقيقي علشان تشوف ناتج تشغيله، وكمان لازم تكون عارف ان الـ gulp واحد من أشهر الـ task runers وفي زيه كتير زي grunt, browserify, and webpack.