إضافة Pug إلى Angular CLI

بالطبع، إليك دليل سريع لإضافة Pug إلى Angular CLI. يعد Pug أداة قوية لتوليد HTML بشكل أكثر قراءة وفهمًا، ويمكنك الاستفادة منها بشكل كبير في تطوير تطبيقات Angular. دعني أشرح الخطوات بشكل مفصل:

1. أولاً وقبل كل شيء، تأكد من أنك قمت بتثبيت Angular CLI بنجاح وأن لديك مشروع Angular جاهز للعمل.

2. قم بتثبيت مكتبة Pug عبر npm. يمكنك القيام بذلك بفتح محطة الأوامر (Command Prompt) أو تيرمينال وتنفيذ الأمر التالي:

   cssCopy code
   npm install pug --save
   

3. بعد تثبيت Pug بنجاح، قم بتكوين Angular CLI لاستخدام Pug كمحرّر للقوالب.

4. قم بفتح ملف angular.json في مجلد مشروع Angular الخاص بك. هذا الملف يحتوي على إعدادات مشروع Angular الخاص بك.

5. ابحث عن المفتاح "builder" في ملف angular.json والذي يحدد المُنشئ (Builder) المستخدم لبناء المشروع. عادةً ما يكون المُنشئ "builder" هو @angular-devkit/build-angular:browser.

6. ضمن المُنشئ، ابحث عن مفتاح "options" ومن ثم "aot"، وقم بإضافة "assets" داخل "options" إذا لم يكن موجودًا بالفعل.

7. بعد ذلك، قم بإضافة "pugLoader" إلى مفتاح "assets" الذي أضفته سابقًا داخل المُنشئ. يجب أن تكون القيمة له مسارًا نحو المجلد الذي تحتوي فيه ملفات Pug. على سبيل المثال، إذا كانت ملفات Pug موجودة في مجلد src/app, فقم بتعيين المسار كالتالي:

   cssCopy code
   "pugLoader": {
     "input": "src/app",
     "output": "app"
   }
   

   حيث "input" هو المسار إلى مجلد ملفات Pug الخاص بك، و "output" هو المسار الذي ستتم فيه عملية البناء لتوليد الملفات HTML المقابلة.

8. بعد القيام بذلك، يمكنك الآن بدء استخدام ملفات Pug في مشروع Angular الخاص بك. قم بإنشاء ملفات قوالب جديدة بامتداد .pug بدلاً من .html، وستقوم Angular CLI بتحويلها إلى HTML عند عملية البناء.

بهذا، يكون قد تم إعداد Angular CLI لاستخدام Pug كمحرّر للقوالب. الآن يمكنك البدء في كتابة قوالب Pug الخاصة بك والتمتع بالتطوير السلس والفعّال في تطبيقات Angular الخاصة بك. إذا كانت هناك أي استفسارات إضافية، فلا تتردد في طرحها!

بالتأكيد، دعني أوسع شرحي للخطوات المذكورة لضمان فهم أعمق لكيفية إضافة Pug إلى Angular CLI.

أولاً، لنلقِ نظرة عامة على ما هو Pug ولماذا يمكن أن يكون مفيدًا في تطوير تطبيقات Angular.

Pug هو محرّر للقوالب يهدف إلى جعل كتابة HTML أكثر قراءةً وفهمًا. بدلاً من استخدام علامات HTML التقليدية مثل