Përmbajtje
Drejtuesit e detyrave JavaScript si Grunt janë bërë jashtëzakonisht të popullarizuar tek zhvilluesit e përparmë. Kjo sepse ato ndihmojnë për të bërë një gjë që të gjithë duam të bëjmë në punët tona - kurseni kohë!
Por me më shumë se 5,000 (dhe duke numëruar) shtojca Grunt tani të disponueshme, mund të jetë e vështirë për zhvilluesit të gjejnë ato 'diamante në skaj'. Ne kemi hedhur një vështrim mbrapa në kohën tonë duke ngecur në Grunt për të gjetur recetën e përsosur të shtojcave Grunt që duhet të përdorni.
01. Uglify
Çdo zhvillues i përparmë me vlerë të kripës së tij di për avantazhet e minimizimit të skedarëve JavaScript, dhe kjo është pikërisht ajo që bën kjo shtojcë. E tillë është popullariteti i saj, është përfshirë në të vërtetë në Udhëzuesin për Fillimin e Grunt. Pavarësisht nga emri, kjo shtojcë mund të përdoret gjithashtu për të zbukuruar edhe kodin tuaj JavaScript - edhe pse kjo nuk është veçanërisht e dobishme për përdorimin e prodhimit.
02. Sass
Mund të ketë ndonjë debat për të cilin para-përpunuesi CSS me të vërtetë sundon detin, por këtu në Stickyeyes, ne kemi vendosur në Sass sesa rivalin e tij kryesor, Less. Kjo shtojcë na mundëson që të shkruajmë skedarët tanë Sass dhe t'i përpilojmë automatikisht në CSS. Meritat e përdorimit të një para-procesori CSS garantojnë një artikull të veçantë në vetvete, por është e sigurt të thuash që nëse nuk po e përdor një tashmë je shumë vonë në parti!
03. CSSMin
Kjo shtojcë është ekuivalenti i CSS i Uglify. Thjesht merr ndonjë skedar të specifikuar CSS dhe i minimizon ato. Sigurisht nëse do ta përdorni këtë së bashku me shtojcën Sass atëherë duhet të siguroheni që kjo detyrë të drejtohet pas detyrës Sass.
Ka shumë alternativa për CSSMin të cilat gjithashtu mund të zvogëlojnë madhësinë e skedarëve tuaj CSS duke përdorur teknika paksa të ndryshme; Nano CSS, cring CSS, tkurrje CSS, etj. Lexoni këtë pikë referimi të dobishme nëse jeni në atë lloj gjërash.
04. Concat
Siç sugjeron emri, kjo shtojcë thjesht merr skedarë të shumtë dhe i bashkon ato në një. Ashtu si me kodin minimizues, skedarët bashkues është gjithashtu një praktikë më e mirë e vjetër për të zvogëluar kohën e ngarkimit të faqes.
Bashkimi i skedarit duhet të përdoret gjithmonë në prodhim si për JavaScript ashtu edhe për CSS. Kjo është zakonisht detyra e fundit që do të ekzekutohet - pas detyrës së para-përpunimit të CSS dhe detyrës së minifikimit. Easyshtë e lehtë thjesht t'i thuash kësaj shtojce të bashkojë të gjithë skedarët në një direktori të veçantë, por ki kujdes me rendin që skedarët do të bashkohen - mund të duhet të japësh një urdhër specifik ose të emërtosh skedarët, në mënyrë që ato të bashkohen gjithnjë me rendin që dëshiron. .
05. Imazhi Min
Në të njëjtën mënyrë si CSSMin dhe Uglify, ImageMin trajton një problem tjetër të vjetër për ngarkimin e faqes - madhësia e skedarit të imazhit. Minifikimi i imazhit është zakonisht një thirrje e parë për optimizim, kështu që kjo shtojcë është thelbësore për të zvogëluar madhësinë totale të skedarit të faqes sa më shumë që të jetë e mundur.
Nëse jeni duke punuar me JPG, PNG, GIF ose SVG (një format imazhi vektor gjithnjë e më popullor), kjo shtojcë do të rezultojë në uljen pa humbje të madhësisë së skedarit të imazheve tuaja, pa pasur nevojë të ngrini gishtin. Nëse keni shumë imazhe në projektin tuaj, është një ide e mirë të ekzekutoni këtë detyrë vetëm kur jeni duke shtyrë drejt prodhimit, në vend se ta ekzekutoni këtë detyrë në një ngjarje të shikimit (shih pikën tjetër).
06. Shikoni
Kjo shtojcë nuk ndikon në të vërtetë në faqen e përparme të faqes tuaj të internetit, por është jashtëzakonisht e dobishme në krijimin e një procesi efikas të Grunt. Shikimi thjesht mban një vështrim mbi drejtoritë që ju specifikoni, dhe sapo diçka të ndryshojë, ajo automatikisht do të shkaktojë disa detyra të Grunt.
Kështu që mund të vendosni një kusht shikimi në drejtorinë tuaj 'js' për të ekzekutuar detyrat tuaja JavaScript dhe një tjetër në drejtorinë tuaj 'css' për të ekzekutuar detyrat tuaja CSS. Kjo do të thotë që ju kurrë nuk do të duhet të drejtoni manualisht procesin tuaj kryesor Grunt! Thjesht inicializoni detyrën e shikimit të zhurmshëm para se të filloni të bëni ndryshime dhe mund ta harroni se është edhe atje.
Fjalët: Jamie Shields
Jamie Shields është një zhvillues i fundit në agjensinë e marketingut dixhital Stickyeyes.
Si kjo? Lexoje kete!
- Grunt vs Gulp: Cilin mjet ndërtimi JavaScript duhet të zgjidhni?
- 8 mënyra për të përmirësuar përbërjen tuaj të Grunt
- Temat më të mira falas WordPress
