الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

The Dynamic Hugo Starter الجديد - إعداد Hugo Pipes مع الطرود.

لاحظ أن هذا الريبو معني فقط بإظهار مسار الأصول ولا يعتبر بداية كاملة. افعل ذلك كما يحلو لك، ولكن ضع في اعتبارك أن كل شيء هنا مصمم لسير العمل الداخلي لدينا.

نحن نستخدم سجل التغيير في جميع مشاريعنا. يرجى الاطلاع على هذا الملف للحصول على التحديثات.

أدوات

  • Hugo - إطار عمل موقع ويب للأغراض العامة - مكتوب بلغة Go - يقوم بإنشاء صفحات ويب ثابتة.
  • Parcel - حزمة تطبيقات ويب سريعة للغاية وبدون تكوين.
  • بوست سي إس إس | TailwindsCSS (مكتبة فئات CSS المستندة إلى JS) | PurgeCSS (إزالة CSS غير المستخدمة)
  • KyleAMathews/محارف (تحميل خطوط نظام التشغيل محليًا مع require صغير واحد)

خط أنابيب الأصول هوغو

يستخدم هذا الإعداد Parcel لـ Javascript ومعالجة الخطوط مفتوحة المصدر، وHugo Pipes + PostCSS لمعالجة CSS، و npm-run-all لتشغيل Parcel وHugo بالتوازي (انظر الملاحظة أدناه). نحن نستخدم مدير حزم Yarn، ولكن يمكنك استخدام NPM إذا أردت.

يمثل مسار الأصول هذا تحولًا بالنسبة لنا من استخدام Webpack لمعالجة JS/Fonts/CSS. Parcel عبارة عن أداة تجميع مثل Webpack، ولكن كمقايضة لمرونة أقل قليلاً، فهي تحتوي على تكوين أصغر وبصمة ملف ويتم إنشاؤها بشكل أسرع؛ في الواقع، لا يوجد ملف تكوين الطرود. يتيح التحول إلى استخدام Hugo لبناء CSS إمكانية تطوير مواقع Hugo خارج عملية البناء الخارجية. وهناك عيوب لهذا النهج، كما هو مبين أدناه.

ملحوظات:

  • تم بناء هذا التكوين على افتراض أن JS/Fonts تتم معالجتها في مرحلة التطوير، وليس في مرحلة الإنتاج، على الرغم من أن الأمر قد يستغرق أقل قدر من الجهد للقيام بذلك.
  • تتضمن البرامج النصية في package.json تحميل متغيرات البيئة باستخدام cross-env وهو أمر اختياري لبعض الأنظمة (وليس Windows) ويمكن إزالته بأمان. فقط استبدل cross-env NODE_ENV=development بـ NODE_ENV=development

شبيبة

  • يستخدم حزمة الطرود.
  • مخرجات الطرود إلى assets/output/index.js .
  • يتم استخدام Hugo لبصمات الأصابع وإجراء تجزئة آمنة لتكامل الموارد الفرعية.
    • إذا كان fileExists "./assets/output/index.js يقوم Hugo بإنشاء تجزئة لهذا الملف من layouts/_head/scripts.html .
  • يقوم Hugo بإخراج ملف JS المعالج إلى public/output/index.min.[hash].js .

CSS

  • يستخدم Hugo Pipes، باستخدام PostCSS. ملاحظة: نستخدم هذه الطريقة لأننا نستخدم CSS من فئة المنفعة. أوصي باستخدام Parcel لمعالجة CSS الخاص بك. راجع "كيفية التبديل إلى تشغيل PostCSS المستند إلى JS" أدناه.
  • يستخدم Parcel/PostCSS كإعداد افتراضي. راجع "كيفية التبديل إلى PostCSS المستند إلى Hugo" أدناه.

CSS عبر هوغو

  • يعالج Hugo assets/css/styles.css باستخدام assets/postcss.config.js ، باستخدام Imports وTailwindCSS وAutoprefixer وPurgeCSS.
  • إذا كان NODE_ENV=development موجودًا في أمر الإنشاء، فلن يقوم PostCSS بمعالجة الملف من خلال PurgeCSS.
  • يقوم Hugo بإخراج ملف CSS المعالج إلى public/css/styles.min.[hash].css .

CSS عبر الطرود

  • يعالج الطرود assets/css/styles.css باستخدام assets/postcss.config.js ، باستخدام Imports وTailwindCSS وAutoprefixer وPurgeCSS.
  • إذا كان NODE_ENV=development موجودًا في أمر الإنشاء، فلن يقوم PostCSS بمعالجة الملف من خلال PurgeCSS.
  • يقوم Hugo بإخراج ملف CSS المعالج إلى assets/output/index.[hash].css .

الخطوط

  • الخطوط مفتوحة المصدر عبر المحارف تستخدم Parcel Bundler.
  • يقوم الطرد بإخراج CSS إلى assets/output/index.css ويضع أيضًا ملفات الخطوط المجزأة في نفس الدليل.
  • تقوم Hugo Pipes بمعالجة الملفات في الدليل العام وإنشاء روابط الجلب المسبق.
    • إذا كان fileExists "./assets/output/index.css يقوم Hugo بإنشاء روابط الجلب المسبق من layouts/_head/stylesheets.html .
  • يقوم Hugo بإخراج الخطوط المعالجة وملف CSS إلى public/output/index.min.[hash].css و public/output/font-name.[hash].woff[2] .

الصور

  • الأصول المخزنة في حاوية S3 أو محلية في الريبو، ويتم تحويلها عبر Imgix.

المهام

  • حساب الموارد الموجودة في _header للتخزين المؤقت والتحميل المسبق (يمكن استخدام برنامج Scratch).
  • تأكد من إعداد أوامر package.json بشكل جيد.
  • تحديد سير العمل لإدارة الخطوط التي لم يتم استدعاؤها مع حزمة الطباعة (أي الخطوط التجارية).

إيجابيات وسلبيات استخدام Hugo لمعالجة PostCSS

الايجابيات

  • لا يتعين عليك تشغيل JS لتغيير CSS، مما يؤدي إلى التخلص من عدم التطابق في التوقيت أثناء إنشاء CSS.
  • التحديثات أسرع في التطوير.

سلبيات

  • يجب تثبيت وحدات Node فقط لتشغيل Hugo.
  • يجب تشغيل PostCSS (مع وحدات Node) لبناء الإنتاج على الخادم، وإنشاء CSS مع كل تغيير.
  • ينشئ ملف CSS منفصلاً للأنماط الرئيسية بصرف النظر عن أي ملفات CSS تم إنشاؤها للخطوط.

كيفية التبديل إلى تشغيل PostCSS المستند إلى Hugo

  • قم بإزالة ملف CSS الرئيسي إلى assets/index.js .
  • قم بتغيير عمليات استيراد Tailwind لاستدعاء Tailwind عبر @import، بدلاً من الاتصال المباشر.
  • قم بتغيير layouts/_head/stylesheets.html لاستخدام Hugo (انظر التعليقات في هذا الملف).
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل