Мазмұны
Grunt сияқты JavaScript тапсырмаларын орындаушылар алдыңғы қатарлы әзірлеушілер арасында өте танымал болды. Себебі, олар біздің жұмысымызда бір нәрсе істеуге көмектеседі - уақытты үнемдеңіз!
Қазір 5000-нан астам (және санау) Grunt плагиндері қол жетімді болғандықтан, әзірлеушілерге «алмаздарды» қиын табу мүмкін. Сіз қолданатын Grunt плагиндерінің тамаша рецептін табу үшін Grunt-қа кіріп кеткен кезімізге шолу жасадық.
01. Үлкейту
Кез-келген алдыңғы қатарлы әзірлеуші JavaScript файлдарын азайтудың артықшылықтары туралы біледі және дәл осы плагин жасайды. Бұл оның танымалдығы, ол шын мәнінде Grunt Жұмысты бастау туралы нұсқаулыққа енгізілген. Атауына қарамастан, бұл плагин JavaScript кодын әдемі ету үшін де қолданыла алады, бірақ бұл өндіріс үшін пайдалы емес.
02. Сасс
CSS алдын-ала өңдеушісі шынымен қай жерде басқаратыны туралы бірнеше пікірталастар болуы мүмкін, бірақ біз мұнда Stickyeyes-те оның басты қарсыласы Less-ке емес, Sass-қа орналастық. Бұл плагин бізге Sass файлдарын жазып, оларды автоматты түрде CSS-қа жинауға мүмкіндік береді. CSS алдын-ала процессорды қолданудың артықшылығы бөлек мақалаға кепілдік береді, бірақ егер сіз оны қолданбасаңыз, кешке кешігіп келдіңіз!
03. CSSMin
Бұл плагин Uglify-дің CSS баламасы болып табылады. Ол кез-келген CSS файлын алады және оларды кішірейтеді. Әрине, егер сіз мұны Sass плагинімен бірге қолданғыңыз келсе, онда бұл тапсырманың Sass тапсырмасынан кейін орындалуын қамтамасыз етуіңіз керек.
CSSMin-ге көптеген баламалар бар, олар сіздің CSS файлдарыңыздың өлшемдерін біршама өзгеше әдістермен азайта алады; CSS nano, CSS қысу, CSS кішірейту және т.с.с. Егер сіз осындай материалмен айналысатын болсаңыз, осы ыңғайлы эталонды оқыңыз.
04. Конкат
Атауынан көрініп тұрғандай, бұл плагин бірнеше файлдарды алады және оларды бір файлға біріктіреді. Кодты кішірейту сияқты, файлдарды біріктіру де парақтың жүктелу уақытын қысқартудың ежелгі тәжірибесі болып табылады.
Файлдарды біріктіру әрдайым өндірісте JavaScript үшін де, CSS үшін де қолданылуы керек. Бұл әдетте іске қосылатын соңғы тапсырма - CSS алдын-ала өңдеу тапсырмасынан және азайту тапсырмасынан кейін. Бұл плагинге белгілі бір каталогтағы барлық файлдарды біріктіру туралы айту оңай, бірақ файлдар тізбектелетінінен сақ болыңыз - белгілі бір тапсырыс беруіңіз керек немесе файлдарды атаңыз, сондықтан олар әрқашан өзіңіз қалаған тәртіппен біріктіріледі .
05. ImageMin
CSSMin және Uglify сияқты, ImageMin беттің жүктелуіне арналған тағы бір ежелгі проблема - сурет файлының өлшемін шешеді. Кескінді 'кішірейту' әдетте оңтайландыру үшін бірінші шақыру болып табылады, сондықтан бұл плагин парақтың жалпы көлемін мүмкіндігінше азайту үшін өте маңызды.
Егер сіз JPG, PNG, GIF немесе SVG-мен жұмыс істейтін болсаңыз (суреттің кеңейтілген векторлық форматы), бұл плагин саусағыңызды көтермей-ақ, кескіндеріңіздің файл өлшемін жоғалтпайды. Егер сіздің жобаңызда көптеген кескіндер болса, онда бұл тапсырманы сағат іс-шарасында орындағаннан гөрі, өндірісті алға жылжытқан кезде ғана орындалғаны жөн (келесі тармақты қараңыз).
06. Қараңыз
Бұл плагин сіздің веб-сайтыңызға әсер етпейді, бірақ тиімді Grunt процесін құруда өте пайдалы. Сағат сіз көрсеткен кез-келген каталогты қадағалап отырады және бірдеңе өзгерсе, ол автоматты түрде Grunt тапсырмаларын іске қосады.
Сонымен, сіз JavaScript тапсырмаларын орындау үшін ‘js’ каталогында қараудың бір шартын, ал CSS тапсырмаларын орындау үшін ’css’ каталогында басқаша орнатуға болады. Бұл сізге негізгі Grunt процесін ешқашан қолмен басқарудың қажеті жоқ дегенді білдіреді! Өзгерістер енгізуді бастамас бұрын, сағат туралы күрт тапсырманы инициализациялаңыз, сонда да сол жерде екенін ұмыта аласыз.
Сөздер: Джейми Шилдс
Джейми Шилдс - Stickyeyes цифрлық маркетинг агенттігінің артқы дамытушысы.
Бұл сияқты? Мұны оқыңыз!
- Grunt vs Gulp: JavaScript құрастырудың қай құралын таңдау керек?
- Grunt қондырғысын жақсартудың 8 әдісі
- Үздік WordPress тақырыптары
