مینیفای کردن HTML و CSS در جکیل (Jekyll)

برای بالا بردن سرعت لود وب سایت ها از تکنیک مینیفای کردن محتوای وب سایت استفاده میشه. مینیفای کردن محتوا به این معنیه که خروجی HTML وب سایت، فایل های CSS و JS ای که در سورس وب سایت قرار دارن رو با حذف فاصله های اضافی (whitespace) و سایر فنون (نمیخوام وارد جزییاتش بشم چون از حوصله این مطلب خارجه :دی) به کمترین حجم ممکنش میرسونن.

برای اینکار روی بلاگ (ورژن قدیم) پول ریکوئست دنبال راه حل میگشتم. اولش این راه به نظرم رسید که محیط کاری پروژه (Project Workflow) رو ببرم روی گرانت (Grunt). با اینکار میتونستم هم از مینیفای کردن است (Asset) های CSS و JS استفاده کنم و هم اینکه مثلا این استها رو ورژن بندی کنم تا کش مرورگرها رو کنترل کنم و هم اینکه عکس ها رو بهینه سازی کنم و …

اما از ابتدا تصمیم گرفتم پروژه رو به هیچ تسک اتومیتری مثل گرانت یا گالپ وابسته نکنم چون کار با جکیل به ذات ساده اس و نمیخواستم پیچیده اش کنم. :پی

اگه با جکیل کار کرده باشین حتما میدونین که جکیل برای کنترل محتوا از مفهومی به اسم لی اوت استفاده میکنه. با استفاده از لی اوت های جکیل میشه انواع مختلفی از صفحات رو ساخت. مشابه همین کار رو توی وردپرس مفهوم Custom Page داره انجام میده. اما تفاوتش با جکیل در اینه که توی جکیل، هر لی اوت مثل یه Pure Function عمل میکنه. محتوا (یا بخشی از محتوا) رو میگیره و تحت منطقی که میتونین براش تنظیم کنین، خروجی میده.

با جستجوی بیشتر به دنبال راه حل برای مینیفای کردن محتوای خروجی در جکیل، یه پروژه ای پیدا کردم که یه لی اوت ساخته و توی اوت لی اون محتوا رو دستکاری کرده و مثلا WhiteSpace ها رو حذف کرده.

البته تنظیمات این لی اوت دست شماست و API کوچیکی برای سفارشی کردنش بهتون داده.

برای دیدن مستندات پروژه میتونین از لینک دسترسی به پروژه jekyll-compress-html استفاده کنین.

روش استفاده

کافیه فایل لی اوت رو توی پوشه _layouts پروژه اتون قرار بدید و در بالاترین و اصلی ترین لی اوت بلاگتون (به صورت پیشفرض این همون layout: default هست)، ریفرنسی به لی اوت Compress بدید. مثلا FrontMatter لی اوت اصلی بلاگ پول ریکوئست این شکلیه:

---
layout: compress
---

<!DOCTYPE html>
<html>

با اینکار خروجی اصلی بلاگتون میرسه به لی اوت کامپرس و اونو مینیفای شده به عنوان سورس وب سایت خروجی میده. برای دیدن نمونه لایو ازین کار میتونید سورس صفحه فعلی رو توی مرورگرتون ببینین. :دی

سورس مینیفای شده پول ریکوئست
سورس مینیفای شده پول ریکوئست


همیشه برای هرکاری نیاز به پلاگین نیست. گاهی اوقات ابزار هست فقط باید ازشون درست استفاده کنیم.