ما هو Gulp.js و Pug.js وأهميتهم والبدائل المتاحة

Ziyad Al Maghribi · 22 سبتمبر 2023

ماهو Gulp.jsو Pug jsماهو وهل هم مهمين في الوقت الحالي وايش البديل لهم

تم التعديل في 24 سبتمبر 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

أسامة زيادة · 22 سبتمبر 2023

Gulp.js و Pug.js هما أدوات لتطوير الويب تُستخدم لأغراض محددة في تطوير المواقع وتطبيقات الويب.

Gulp.js

Gulp.js هو مهمل المهام (Task Runner) المستخدم في تطوير الويب. يتيح Gulp.js للمطورين تنفيذ مهام مختلفة أثناء عملية تطوير الويب مثل تجميع الملفات، وضغطها، وتحسينها للإنتاج.
يعتمد Gulp.js على JavaScript ويتيح للمطورين كتابة مهام مخصصة باستخدام سينتكس سهل الفهم.
بالرغم من أن Gulp.js لا يزال مفيدًا في تطوير الويب، إلا أنه قد يكون هناك بدائل حديثة أكثر شيوعًا مثل Webpack وParcel وVite التي تُجري تجميع وإدارة ملفات JavaScript و CSS بشكل أفضل وأكثر تقدمًا.

Pug.js (المعروف سابقًا باسم Jade)

Pug.js هو محرك قوالب (Template Engine) يستخدم لإنشاء هياكل HTML بشكل أكثر سهولة وإشرافًا باستخدام لغة تمثيل بيانات مبسطة.
يسمح Pug.js للمطورين بكتابة HTML بطريقة مبسطة وقريبة من الواقعية، وبذلك يمكن الحفاظ على هياكل HTML مرتبة ومنظمة.
على الرغم من أن Pug.js مفيد في بعض الحالات، إلا أنه أصبح أقل شيوعًا مع مرور الوقت، وتم استبداله في كثير من الأحيان بالعديد من محركات القوالب الأخرى مثل Handlebars وEJS وMustache.

بالنسبة للوقت الحالي، يمكن استخدام Gulp.js وPug.js إذا كانت تلبي احتياجات مشروعك بشكل ملائم. ولكن يجب مراعاة البدائل المتاحة والتي قد تكون أفضل لمشروعك وتلبي تطلبات التطوير الحديثة. بالتالي، البدائل تعتمد على المشروع ومتطلباته الخاصة.

اسماء محمد10 · 24 سبتمبر 2023

Gulp.js هو إطار عمل جافا سكريبت يستخدم لتجميع وإدارة ملفات جافا سكريبت و CSS و HTML بينما الPug.js هو لغة برمجة لواجهة المستخدم تعتمدعلي HTML. ويمكن استخدامها لإنشاء صفحات HTML ديناميكية.

والاثنين مهمين لاكن هناك بدائل اخري تستطيع استخدامها مثل:-

Webpack
Parcel
Vite

والافضل من بينهم هي vite لانها تتميز بالسرعة

Mustafa Suleiman · 24 سبتمبر 2023

ما هو Gulp.js

Gulp.js هو أداة (Task Runner) يستخدم في تطوير الويب،لتنفيذ مهام مثل تجميع وضغط ملفات CSS وJavaScript، وتحسين الصور، وتشغيل اختبارات الوحدات الأوتوماتيكية، وإدارة أنشطة تطوير الويب الأخرى، ويمكن لـ Gulp أن يعمل بشكل مستمر أو يُطلق يدويًا بمجرد الحاجة.، ويعتمد على JavaScript ويتيح للمطورين كتابة مهام مخصصة باستخدام سينتكس سهل الفهم.

وهناك أيضًا أدوات أخرى تُستخدم كـ Task Runners مثل Grunt وnpm scripts في عالم تطوير الويب والبرمجة، وتُسهل تلك الأدوات تنظيم وتنفيذ المهام الروتينية بشكل فعال وآلي، مما يساعد المطورين ومديري النظم على تحسين كفاءة العمل وتوفير الوقت والجهد.

ما هو Pug.js

أما Pug.js هو محرك قوالب HTML مفتوح المصدر مبني على JavaScript. يسهل عملية إنشاء HTML قصير وسهل القراءة وقابل للصيانة، ويدعم Pug.js العديد من الميزات المتقدمة، مثل الوسائط المتعددة المتكاملة، وإدارة الوسائط، وتعليقات التسمية التوضيحية.

وهو ليس مناسبًا لجميع المشاريع، خاصة المشاريع التي تتطلب دعمًا لتقنيات HTML المتقدمة.

مثال بسيط على Pug:

// ملف Pug
html
  head
    title Pug Example
  body
    h1 This is a Pug example
    p This is a simple Pug template that outputs an HTML page with a heading and a paragraph.

والكود السابق سينتج كود HTML التالي:

<html>
  <head>
    <title>Pug Example</title>
  </head>
  <body>
    <h1>This is a Pug example</h1>
    <p>This is a simple Pug template that outputs an HTML page with a heading and a paragraph.</p>
  </body>
</html>

وإليك مثال أكثر تعقيدًا على Pug:

// ملف Pug
html
  head
    title Pug Example
    link(rel='stylesheet', href='style.css')
  body
    .container
      h1 This is a Pug example
      p This is a more complex Pug template that outputs an HTML page with a heading, a paragraph, and a container element with a class of "container".
      ul
        li Item 1
        li Item 2
        li Item 3

والنتيجة هي:

<html>
  <head>
    <title>Pug Example</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>This is a Pug example</h1>
      <p>This is a more complex Pug template that outputs an HTML page with a heading, a paragraph, and a container element with a class of "container".</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </body>
</html>

أهمية Gulp.js و Pug.js في الوقت الحالي

لا يزال Gulp.js و Pug.js مهمين في الوقت الحالي، ولكن هناك أدوات حديثة حاليًا وأكثر شيوعًا وتقدمًا والتي منها:

Webpack هو الأكثر شيوعًا في الوقت الحالي، ويوفر مجموعة واسعة من الميزات، بما في ذلك تجميع ملفات JavaScript و CSS و HTML وإدارة التبعيات.
Parcel سهل الاستخدام يركز على السرعة والسهولة.
Vite المحزم الجديد الذي يهدف إلى تسريع عملية تطوير الويب ويستخدم بكثرة الآن وأنا أفضله عن Webpack.

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

وGulp.js لم يتم تطويره منذ 2019.

ما هو Gulp.js و Pug.js وأهميتهم والبدائل المتاحة

السؤال

Ziyad Al Maghribi

3 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

اسماء محمد10

Mustafa Suleiman

ما هو Gulp.js

ما هو Pug.js

والنتيجة هي:

أهمية Gulp.js و Pug.js في الوقت الحالي

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية