/لماذا لا يكتب مبرمجو Facebook أكوادًا نظيفة؟ – الجزء الثاني

لماذا لا يكتب مبرمجو Facebook أكوادًا نظيفة؟ – الجزء الثاني

في المقال السابق استعرضنا أبرز العمليات التي يحرص مطورو الويب علي تنفيذها علي ملفات مشاريعهم قبل رفعها وإتاحتها للمستخدمين.
في هذا المقال نستعرض أبرز الأدوات التي تتنافس في تقديم خدماتها للمطورين وتسعي إلي خلق أكبر مجتمع مطورين يعمل على تطوير هذه الأدوات وجعلها أفضل وأسهل في الاستخدام.
تتنافس أداتان أساسيتان يرتبط اسمهما معا بشكل كبير الأداة الأولي grunt والثانية gulp، في هذا المقال نستعرض الأداة الأولي وكيفية استخدامها وأبرز ما تقدمه.
وقد تم تطوير الأداتين علي أساس Node.js لذلك فإنه يجب استخدام node package manager وتعرف اختصارًا NPM لتثبيتهم.
وتعتبر كلتا الأداتين من الأدوات التي يتم استخدامهم عن طريق سطر الأوامر CLI ولا تتوفران في صورة رسومية GUI لذلك في البداية نقوم بتثبيت أداة grunt التي سنتعامل معها اليوم عن طريق الأمر التالي:

1

الأمر السابق يقوم بتثبيت الأداة لجميع المستخدمين، لذلك يجب تثبيت الأداة في المشروع المراد تنفيذ المهام علي ملفاته، قبل ذلك يجب إعداد ملف “package.json”، ويوضع في ملف المشروع، ومهمته هو تسجيل أسماء الملفات التي نقوم بتثبيتها بحيث لا نقوم بتكرار هذه العملية مرات أخرى وتكون صورته الأولية:

2

 الخطوة التالية هي تثبيت الأداة داخل ملف المشروع نفسه عن طريق الأمر التالي:

3

سنقوم أيضاً بتثبيت بعض من أبرز الملفات التي سنستعرض المهمات التي تقدمها في هذا المقال، حيث نقوم بكتابة هذه الأوامر:

إذا قمت بمراجعة ملف “package.json” ستلاحظ وجود الملفات التي قمت بتثبيتها تحت جزء الـ devDependencies.

عن طريق الخطوات السابقة نكون قد جهزنا ملف المشروع، والخطوة القادمة هي تجهيز ملف حيث سنكتب الأوامر، لذلك نقوم بإنشاء ملف بإمتداد “.js” واسمه “Gruntfile” حيث نقوم بكتابة الأوامر:

الخطوة التالية داخل الملف نقوم باستدعاء دالة يكون الـ parameter الرئيسي لها هو grunt وهو المسئول عن تنفيذ العمليات التي نكتبها داخل هذه الدالة:

في هذه الخطوة باستخدام دالة require نقوم بتحديد ملف “time-grunt” كأحد الملفات الأساسية قبل بدء العمليات المطلوبة، والذي قمنا بتثبيته مسبقًا، وذلك حتي يعطينا الوقت الذي استغرقته كل عملية والوقت الإجمالي للعمليات كلها:

باستخدام نفس الدالة نقوم بتحديد ملف “jit-grunt” وهذا الملف يقوم بالتأكد من استدعاء جميع الملفات التي ستقوم بتنفيذ المهام المطلوبة والتي قمنا بتنزيلها مسبقًا، كذلك نقوم  بتحديد العملية useminPrepare لاستخدام ملف “grunt-usemin” وهو المسئول عن توجيه ملف الـ html لاستخدام الملفات التي جرت عليها العمليات التي تحدثنا عنها في المقال السابق:

 الخطوة التالية نقوم بكتابة الإعدادات داخل دالة initConfig:

داخل دالة initConfig نقوم بقراءة ملف “package.json”:

داخل نفس الدالة نقوم بتحديد العملية الأولي وهي إنشاء ملف “dist” اختصارًا لكلمة “distribution” حيث سنضع الملفات التي تم تعديلها والتي سيتعامل معها المستخدم:

11

الخطوة التالية هي عملية useminPrepare حيث نقوم بتحديد ملفات الـ html المستخدمة في المشروع:

12

أما عملية الـ usemin نفسها:

13

نقوم بتجهيز عملية الـ concatination التي تحدثنا عنها في المقال السابق:

14

ونقوم أيضاً بتجهيز عمليتي الـ minification والـ uglification:

15

في المقال السابق تحدثنا أن العمليات التي يتم إجرائها علي ملفات الـ css والـ javascript تقوم بإنتاج ملف واحد فقط من كل نوع، لذا فعند كل تعديل نقوم به علي الملفات ونقوم بإجراء العمليات مرة أخرى ينتج لنا ملف جديد، لذلك نحتاج إلى ترقيم كل نسخة من الملفات الناتجة.
العملية التالية هي filerev وهي تتكفل بإعطاء ملف الـ css والـ javascript رقم معين لكل نسخة تقوم أنت بضبط إعداداته.
لذلك فإنه عند إجراء تعديل علي الملفات الأصلية وإجراء العمليات عليها مرة أخرى فإن الملفات الجديدة تأخذ رقم مسلسل جديد بحيث يتعامل المستخدم مع أحدث نسخة من الملفات.

16

نقوم بإعداد ملف “dist” لاستقبال الملفات بعد إجراء العمليات عليها:

17

يمكنك ملاحظة أن هذه العمليات لم يتم كتابتها بالترتيب، لذلك يجب علينا توجيه Grunt للعملية الرئيسية التي سيقوم بتنفيذها وترتيب العمليات، داخل الدالة الرئيسية نقوم بكتابة:

18

تعتبر هذه هي العملية الأساسية التي ستقوم الأداة بتنفيذها، وترتيب العمليات في التنفيذ سيكون كما تم ترتيبها بهذا الشكل.
التعديل الوحيد على ملفات الـ html الذي يجب أن تقوم به هو وضع ملفات الـ css والـ javascript بين تعليقين كالتالي:

19

20

بمجرد كتابة كلمة “grunt” في سطر الأوامر سيتم تنفيذ المهمة الأساسية التي قمنا بتحديدها default بنفس الترتيب الذي قمنا بإعداده.
الآن إذا أردت استخدام المهام التي قمت بضبط إعدادتها علي مشروع آخر يكفي أن تقوم بنسخ ملف “package.json” في ملف المشروع وتقوم بكتابة الأمر التالي:

21

حتي يبدأ تنزيل الملفات المطلوبة في ملف المشروع دون الحاجة لتثبيت كل ملف بشكل منفرد.
لا تعتبر هذه المهام هي التي يقوم بها grunt فقط، لكن هناك العديد من المهام الأخرى المهمة لمطوري الويب تقوم الأداة بتقديمها، يمكن أن نذكر من أهمها jsHint وهي أداة تقوم بفحص ملفات الـ javaScript والتأكد من خلوها من الأخطاء، وكذلك القيام بعملية compilation لملفات الـ “less” والـ “sass” إلى ملفات css يمكن استخدامها خلال المشروع، والعديد من المهام الأخرى المنتشرة التي تسهل عليك عملية إنشاء مشاريعك، حيث حرص مطورو الأداة على تكوين مجتمع مطورين واسع، يقومون بتطوير الأداة وإضافة مهام أخرى جديدة لها.

يمكنك الاطلاع على معلومات أكثر عن الأداة وطريقة استخدامها عن طريق موقعها الرسمي: gruntjs.com