📘 جلسه اول – شروع کار با Pug (نصب و راه‌اندازی)

خلاصه‌جزوه

✅ ۱. معرفی Pug

• یک Template Engine برای تولید HTML به‌صورت سریع و کوتاه.
• در Pug از indent (تو‌رفتگی) برای مشخص کردن ساختار استفاده می‌شود.
• خبری از {} و <> نیست؛ کدها کوتاه‌تر و خواناتر می‌شوند.

✅ ۲. نصب Pug

نصب لوکال :

npm install pug --save-dev 

نصب CLI (برای اجرای دستورات):

npm install pug-cli -g

✅ ۳. تبدیل خودکار Pug به HTML (Watch Mode)

دستور Watch

npx pug -w ./ -o ./html -P 

معنی پارامترها:

• -w → مشاهده خودکار تغییرات
• ./ → مسیر فایل‌های .pug
• -o ./html → خروجی HTML به پوشه html
• -P → تولید HTML خوانا (Pretty)

✅ ۴. ساختار Pug و خروجی HTML

کد نمونه Pug:

doctype html
html
    head
    body
        h1#title Hello VittoAmir
        p.text.
            some text for sample
            project
        ul.nav
            li item

✅ ۵. نکات مهم جلسه

• indent در Pug = فاصله ابتدای خط با Space یا Tab
• ساختار HTML فقط با تو‌رفتگی‌ها مشخص می‌شود.
• #id و .class دقیقاً مثل CSS نوشته می‌شوند.
• متن چندخطی داخل Pug با . بعد از نام تگ نوشته می‌شود.
• برای جلوگیری از مشکلات PowerShell بهتر است از npx استفاده شود.