Coding

PurgeCSS

အားလုံးပဲ မဂၤလာပါခင္ဗ်။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ ေမာင္ေက်ာ္စိုးႏိုင္ ျဖစ္ပါတယ္ခင္ဗ်။
ဒီတစ္ပတ္မွာေတာ့ web development လုပ္ရာမွာ အသုံးမျပဳတဲ့ css ေတြ ဖယ္ရွားေပးတဲ့ tool တစ္ခုျဖစ္ေသာ PurgeCSS အသုံးျပဳပုံနဲ႔ ပတ္သက္ၿပီး ကြၽန္ေတာ္ ေလ့လာမိသေလာက္ မွ်ေဝေပးသြားမွာ ျဖစ္ပါတယ္။

What is PurgeCSS?
အသုံးမျပဳတဲ့ css ေတြကို ပိုင္းျခားစိတ္ျဖာဖယ္ရွားေပးၿပီး အသုံးျပဳထားတဲ့ css ေတြကိုဘဲ result တစ္ခုအေနျဖင့္ ျပသေပးၿပီး css file size ကို အနည္းဆုံးျဖစ္ေအာင္ လုပ္ေဆာင္ေပးႏိုင္ေသာ tool တစ္ခု ျဖစ္ပါတယ္။

How to Use PurgeCSS?
PurgeCSS ကို အသုံးျပဳမယ္ဆိုရင္ ေအာက္ပါနည္းလမ္းအတိုင္း npm ကေနတဆင့္ install လုပ္ထားရန္ လိုအပ္ပါတယ္။

Installation

npm install purgecss -g

PurgeCSS ကို လက္ေတြ႕စမ္းသပ္ အသုံးျပဳႏိုင္ရန္
ပထမဆုံးအေနျဖင့္ PurgeCSS  folder တစ္ခုကို create လုပ္ၿပီး cmd ကေနတဆင့္ PurgeCSS ကို install ျပဳလုပ္ထားပါမည္။

ေနာက္တဆင့္အေနျဖင့္ PurgeCSS folder ထဲမွာ index.html ႏွင့္ style.css ဆိုၿပီး create လုပ္ထားပါမည္။

index.html file ထဲမွာ container, ttl_h2, txt_detail ျဖင့္class name 3ခု ေပးၿပီး web page တစ္ခုကို create လုပ္ထားပါမည္။

style.css ထဲမွာ class name (၃) ခုကို အသုံးျပဳၿပီး design အတြက္ css ကိုေအာက္ပါပုံအတိုင္း ေရးထားပါမည္။

PurgeCSS ကိုအသုံးျပဳၿပီး မလိုအပ္တဲ့ css ေတြကို ဖယ္ရွားဖို႔အတြက္ အသုံးမျပဳတဲ့ css ေလးကို ေအာက္ပါအတိုင္း ေရးထားပါမည္။

index.html မွာခ်ိတ္ဆက္ထားေသာ style.css မွာ မလိုအပ္တဲ့ css ေတြကို ဖယ္ရွားဖို႔လိုအပ္ပါတယ္။ ဒါေၾကာင့္ မလိုအပ္တဲ့ css ေတြကို ဖယ္ရွားၿပီး ရလာေသာ css ေတြကို သိမ္းထားရန္ result folder တစ္ခုကို manual ေဆာက္ထားပါမည္။

Result folder ေဆာက္ၿပီးသြားရင္ ေအာက္ပါအတိုင္း cmd မွာ run ဖို႔ လိုအပ္ပါတယ္။

purgecss --css style.css  --content index.html --output result

Result folder ထဲမွာရွိေသာ style.css မွာ ေအာက္ပါအတိုင္း မသုံးထားတဲ့ css ေတြကို ဖယ္ရွားေပးသြားတာကိုေတြ႕ရပါလိမ့္မည္။

Website နဲ႔ပတ္သက္ၿပီး ေလ့လာေနေသာ developer ေတြ အတြက္ PurgeCSS ကိုအသုံးျပဳၿပီး မလိုအပ္တဲ့ css ေတြကို ဖယ္ရွားႏိုင္လိမ့္မယ္လို႔ ေမွ်ာ္လင့္မိပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

 

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *