Բովանդակություն
JavaScript առաջադրանքների վազորդները, ինչպիսիք են Grunt- ը, մեծ մասսայականություն են վայելել front-end մշակողների շրջանում: Դա պայմանավորված է նրանով, որ դրանք օգնում են անել մի բան, ինչը բոլորս ուզում ենք անել մեր աշխատանքում ՝ խնայել ժամանակը:
Բայց այժմ ունենալով ավելի քան 5000 (և հաշվելով) Grunt պլագիններ, մշակողների համար կարող է դժվար լինել գտնել այդ ադամանդները կոպիտ: Մենք հետադարձ հայացք ենք նետել այն ժամանակին, երբ խրվել ենք Grunt- ի մեջ ՝ գտնելու Grunt հավելումների կատարյալ բաղադրատոմսը, որոնք դուք պետք է օգտագործեիք:
01. Uglify
Յուրաքանչյուր ճակատային ծրագրավորող, որն արժե իր աղը, գիտի JavaScript ֆայլերի նվազեցման առավելությունների մասին, և դա հենց այն է, ինչ անում է այս plugin- ը: Այդպիսին է նրա ժողովրդականությունը, այն իրականում ներառված է Grunt Getting Started Guide- ում: Չնայած անունին, այս plugin- ը կարող է օգտագործվել նաև ձեր JavaScript կոդը նույնպես գեղեցկացնելու համար, չնայած դա հատկապես օգտակար չէ արտադրական օգտագործման համար:
02. Սասս
Կարող է լինել ինչ-որ բանավեճ, որի վերաբերյալ CSS նախնական պրոցեսորն իրականում ղեկավարում է աթոռը, բայց այստեղ ՝ Stickyeyes- ում, մենք կարգավորեցինք Sass- ը, այլ ոչ թե նրա հիմնական մրցակիցը ՝ Less- ը: Այս լրացումը մեզ հնարավորություն է տալիս գրել մեր Sass ֆայլերը և դրանք ավտոմատ կերպով կազմվել CSS- ում: CSS նախնական պրոցեսոր օգտագործելու արժանիքները ինքնին առանձին հոդված են երաշխավորում, բայց վստահորեն կարելի է ասել, որ եթե այն չես օգտագործում արդեն շատ ուշանում ես երեկույթին:
03. CSSMin
Այս plugin- ը Uglify- ի CSS համարժեքն է: Այն պարզապես ստանում է ցանկացած նշված CSS ֆայլ և փոքրացնում դրանք: Իհարկե, եթե սա օգտագործելու եք Sass plugin- ի հետ միասին, ապա պետք է համոզվեք, որ այս առաջադրանքը գործածվում է Sass- ի առաջադրանքից հետո:
CSSMin- ին կան բազմաթիվ այլընտրանքներ, որոնք կարող են նաև փոքրացնել ձեր CSS ֆայլերի չափը `օգտագործելով մի փոքր այլ մեթոդներ: CSS nano, CSS wring, CSS shrink և այլն: Կարդացեք այս հարմար չափանիշը, եթե այդ տեսակի իրերի մեջ եք մտնում:
04. Կոնկատ
Ինչպես անունն է հուշում, այս կոնտակտը պարզապես տանում է բազմաթիվ ֆայլեր և դրանք միավորում մեկի մեջ: Ինչպես նվազեցնող կոդի դեպքում, ֆայլերի համակցումը նույնպես դարավոր լավագույն փորձ է էջի բեռնման ժամանակները կրճատելու համար:
Ֆայլերի համակցումը միշտ պետք է օգտագործվի ինչպես JavaScript- ի, այնպես էլ CSS- ի արտադրության մեջ: Սովորաբար սա գործարկվող վերջին խնդիրն է. CSS- ի նախնական մշակման և մանրացման առաջադրանքներից հետո: Այս plugin- ին պարզապես հեշտ է ասել, որ բոլոր ֆայլերը միաձուլեն որոշակի գրացուցակում, բայց զգուշացեք ֆայլերի միացման կարգից. Գուցե անհրաժեշտ լինի տալ որոշակի պատվեր կամ անվանել ֆայլերը, որպեսզի դրանք միշտ համակցված լինեն ձեր ուզած կարգով: ,
05. ImageMin
Նույն կերպ, ինչ CSSMin- ը և Uglify- ը, ImageMin- ը լուծում է էջի բեռնման մեկ այլ հնագույն խնդիր `պատկերի ֆայլի չափ: Պատկերի «նվազեցումը» սովորաբար օպտիմալացման առաջին կոչումն է, ուստի այս հավելումը կարևոր է էջի ֆայլի ընդհանուր չափը հնարավորինս նվազեցնելու համար:
Եթե աշխատում եք JPG, PNG, GIF կամ SVG (անընդմեջ տարածված վեկտորային պատկերի ձևաչափ) հետ, այս հավելումը կհանգեցնի ձեր նկարների ֆայլի չափի անվնաս կրճատումներին ՝ առանց մատը բարձրացնելու անհրաժեշտության: Եթե ձեր նախագծում շատ պատկերներ ունեք, լավ կլինի այս գործառույթն իրականացնել միայն այն ժամանակ, երբ դուք մղում եք արտադրության, այլ ոչ թե այս առաջադրանքը գործարկել ժամացույցի իրադարձության վրա (տե՛ս հաջորդ կետը):
06. Դիտեք
Այս plugin- ը իրականում չի ազդում ձեր կայքի դիմային մասի վրա, բայց այն չափազանց օգտակար է Grunt արդյունավետ գործընթաց ստեղծելու համար: Watch- ը պարզապես հետեւում է ձեր կողմից նշված ցանկացած գրացուցակներին, և ինչ-որ բան փոխվելուց հետո այն ավտոմատ կերպով կմեկնարկի որոշակի Grunt առաջադրանքներ:
Այսպիսով, դուք կարող եք ստեղծել մեկ դիտելու պայման ձեր 'js' գրացուցակում ՝ ձեր JavaScript առաջադրանքները գործարկելու համար, և մեկը 'ձեր' css 'գրացուցակում ՝ ձեր CSS առաջադրանքները գործարկելու համար: Սա նշանակում է, որ դուք երբեք ստիպված չեք լինի ձեռքով վարել ձեր հիմնական Grunt գործընթացը: Պարզապես նախաստորագրեք խստաշունչ դիտման առաջադրանքը նախքան փոփոխություններ սկսելը, և կարող եք մոռանալ, որ այն նույնիսկ այնտեղ է:
Բառեր Jamեյմի Շիլդս
Jamie Shields- ը թվային շուկայավարման Stickyeyes գործակալության հետին պլանի մշակող է:
Սրա նման? Կարդա սա!
- Grunt vs Gulp. JavaScript- ի կառուցման ո՞ր գործիքը պետք է ընտրեք:
- Grunt- ի տեղադրումը բարելավելու 8 եղանակ
- Լավագույն անվճար WordPress թեմաները
