فك شفرة أدوات بناء الواجهة الأمامية: دليل المطور الشامل

لطالما كانت أدوات بناء الواجهة الأمامية (Front-end Build Tools) مصدر حيرة للكثيرين، حتى للمطورين ذوي الخبرة. المفتاح لفك شفرتها يكمن في فهم كيفية عملها – وتكاملها – على مستوى مفاهيمي عميق. يقدم هذا المقال رؤيتي الشخصية والطريقة التي اتبعتها لاستيعاب هذه الأدوات. بدلاً من الغوص في تفاصيل الكود، سآخذك في جولة عبر نموذجي الذهني لكيفية عمل هذه الأدوات وما تنجزه.

لا تدع تعقيد الأدوات الحديثة يثبط عزيمتك

تُعد أدوات مثل Node، NPM، Grunt، Gulp، Bower، Webpack، Browserify، Yeoman، و Brunch مجرد غيض من فيض أدوات بناء الواجهة الأمامية المتاحة، وقد يبدو مواكبتها مستحيلاً. لكن السر يكمن في عدم الشعور بالرهبة. فجميع هذه المشاريع مصممة لتسهيل عملك. لفهم ماهية هذه الأدوات، سبب وجودها، وكيفية عملها، ما عليك سوى استيعاب بعض المفاهيم الأساسية.

المفهوم الأول: الثنائية الأساسية لأدوات البناء “التثبيت مقابل التنفيذ”

تقوم أدوات البناء بوظيفتين رئيسيتين:

• تثبيت المكونات (Install things)
• تنفيذ المهام (Do things)

السؤال الأول الذي يجب أن تطرحه على نفسك عند مواجهة أداة بناء جديدة هو: “هل هذه الأداة مخصصة لتثبيت المكونات لي، أم لتنفيذ المهام لي؟”

أدوات “التثبيت”

يمكن لأدوات “التثبيت” مثل npm، Bower، و Yeoman تثبيت أي شيء تقريباً. يمكنها تثبيت مكتبات الواجهة الأمامية مثل Angular.js أو React.js. كما يمكنها تثبيت خوادم لبيئة التطوير الخاصة بك، ومكتبات الاختبار. بل إنها تساعدك حتى في تثبيت أدوات بناء الواجهة الأمامية الأخرى. باختصار، تقوم بتثبيت معظم الأشياء المتعلقة بالكود التي يمكنك تخيلها.

أدوات “التنفيذ”

تُعد أدوات “التنفيذ” مثل Grunt، Webpack، Require.js، Brunch، و Gulp أكثر تعقيداً بكثير. الهدف من أدوات “التنفيذ” هو أتمتة جميع المهام الروتينية والمعرضة للأخطاء في تطوير الويب. تُسمى الأشياء التي تقوم بها هذه الأدوات أحياناً “مهام” (tasks). ولإنجاز هذه “المهام”، غالباً ما تستخدم نظامها البيئي الخاص من الحزم (packages) والمكونات الإضافية (plugins). وتكتب كل أداة المهام بطرق مختلفة.

لا تقوم جميع هذه الأدوات بنفس الشيء أيضاً. فبعض أدوات “التنفيذ” تحاول التعامل مع أي مهمة تُسند إليها (مثل Grunt و Gulp)، بينما تركز أخرى على شيء واحد، مثل التعامل مع تبعيات JavaScript (مثل Browserify و Require.js). في بعض الأحيان، ينتهي بك الأمر باستخدام العديد من هذه الأدوات في نفس المشروع.

إليك قائمة قصيرة بـ “المهام” التي قمت بأتمتتها باستخدام أدوات “التنفيذ” هذه:

• استبدال سلسلة نصية (string of text) في ملف.
• إنشاء مجلدات ونقل الملفات إليها.
• تشغيل اختبارات الوحدة (unit tests) بأمر واحد.
• تحديث المتصفح تلقائياً عند حفظ ملف.
• دمج جميع ملفات JavaScript في ملف واحد، وجميع ملفات CSS في ملف واحد.
• تصغير (Minifying) ملفات JavaScript و CSS المدمجة.
• تعديل موضع (modifying the placement) عناصر معينة.