Како користити Грунт за аутоматизацију вашег посла [Туториалс] т

Ја сам велики заговорник аутоматизације зато што живот чини много једноставнијим. Зашто трошити време на ручне, монотоне задатке који исисавају вашу животну снагу одмах када имате компјутер да ради ствари за вас? Ово посебно важи за веб развој.

Многи развојни задаци могу бити задатак. Док развијате можда желите компајлирати код, приликом покретања развојне верзије можете спојити и умањити датотеке, уклонити само развојне ресурсе и тако даље. Чак и релативно некомпликовани, као што је брисање гомиле датотека или преименовање фасцикли може заузети велики део нашег времена.

У овом чланку ћу вам показати како можете олакшати живот тако што ћете искористити изванредну функционалност коју нуди Грунт, Јавасцрипт руннер задатака. Ја ћу вас водити кроз цијели процес, тако да не брините чак и ако нисте чаробњак за Јавасцрипт!

Више на Хонгкиат.цом:

ЦССМатиц чини ЦСС једноставним за веб дизајнере
Аутоматизовање задатака у Мац-у са радњама за мапе
Аутоматизујте ваше Дропбок датотеке са радњама
10 апликација за аутоматизацију задатака на вашем Андроид уређају
Како (аутоматски) направити резервну копију ваше веб странице у Дропбок

Инсталлинг Грунт

Инсталирање Грунта је прилично лако јер користи управитеља пакетима чворова. То значи да ћете можда морати да инсталирате и сам Ноде. Отворите терминал или командну линију (назват ћу овај терминал од сада) и уђите нмп -в.

Ако видите број верзије коју имате нпм инсталиран, ако видите грешку "наредба није пронађена", мораћете да је инсталирате тако што ћете отићи на страницу за учитавање чворова и изабрати верзију која вам је потребна.

Када се Ноде инсталира, добијање Грунта је ствар једне наредбе издате у терминалу:

нпм инсталл -г грунт-цли

Басиц Усаге

Користите Грунт на пројектној основи, јер сваки пројекат има различите захтјеве. Почнимо сада пројект креирањем фасцикле и навигацијом до ње преко нашег терминала.

Два фајла чине срце Грунта: пацкаге.јсон и Грунтфиле.јс. Датотека пакета дефинише све зависности треће стране које ће аутоматизација користити, Грунтфиле вам омогућава контролу како управо се користе. Хајде да креирамо датотеку пакета са голим костима сада са следећим садржајем:

"наме": "тест-пројецт", "версион": "1.0", "девДепенденциес": "грунт": "~ 0.4.5",

Име и верзија зависе од вас, зависности морају да садрже све пакете које користите. Тренутно не радимо ништа, па ћемо се побринути да се и сам Грунт дода као зависност.

Можда се питате шта ради та црвена линија (~) названа тилда.

Верзије могу бити потребне користећи правила из семантичке верзије за нпм. Укратко:

Наведите тачну верзију 4.5.2
Можете користити више од / мање него да означите минималну или максималну верзију као што је > 4.0.3
Коришћење тилде означава блок верзије. Користећи ~ 1.2 сматра се 1.2.к, било која верзија изнад 1.2.0, али испод 1.3

Доступно је много више начина одређивања верзија, али то је довољно за већину потреба. Следећи корак је да направимо Грунтфиле који ће извршити наше аутоматизације.

 модуле.екпортс = фунцтион (грунт) грунт.инитЦонфиг (пкг: грунт.филе.реадЈСОН ('пацкаге.јсон')); грунт.регистерТаск ('дефаулт', []); ;

Ово је у основи скелет за Грунтфиле; постоје два интересантна места. Једна локација је унутар инитЦонфиг () функције. Ово је место где се одвија сва конфигурација вашег пројекта. Ово ће укључити ствари као што је руковање ЛЕСС / САСС компајлирањем, скраћивање скрипти и тако даље.

Друга локација је испод те функције, гдје одређујете задатке. Можете видети један задатак који је наведен “Уобичајено”. У овом тренутку је празна, тако да ништа не ради, али то ћемо касније проширити. Задаци у суштини постављају ред у битове и комаде из наше конфигурације пројекта и извршавају их.

На пример, задатак именован “сцриптс” може спојити све наше скрипте, а затим смањити резултирајућу датотеку и затим је премјестити на своју коначну локацију. Све три акције су дефинисане у конфигурацији пројекта, али су “повукао заједно” задатак. Ако ово није јасно само још не брините, показат ћу вам како се то ради.

Наш први задатак

Хајде да креирамо задатак који ће смањити један јавасцрипт фајл за нас.

Постоје четири ствари које морамо да урадимо кад год желимо да додамо нови задатак:

Ако је потребно, инсталирајте додатак
Захтевајте то у Грунтфилеу
Напишите задатак
По потреби га додајте у радну групу

(1) Пронађите и инсталирајте додатак

Најлакши начин да пронађете додатак који вам је потребан је да откуцате нешто слично у Гоогле: “минифи јавасцрипт грунт плугин”. Први резултат би вас требао одвести на грунт-цонтриб-углифи плугин који је управо оно што нам је потребно.

Гитхуб страница вам говори све што требате знати. Инсталација је једна линија у терминалу, ево шта требате користити:

 нпм инсталирај грунт-цонтриб-углифи --саве-дев

Можда ћете морати да покренете ово са администраторским привилегијама. Ако добијеш нешто слично нпм ЕРР! Покушајте поново да покренете ову команду као роот / Администратор. на путу само упишите судо пре команде и унесите лозинку када се то од вас затражи:

 судо нпм инсталирај грунт-цонтриб-углифи --саве-дев

Ова команда заправо анализира вашу пацкаге.јсон датотеку и додаје је као зависност тамо, нећете морати то да радите ручно.

(2) Захтевати у Грунтфиле-у

Следећи корак је да додате свој Грунтфиле као захтев. Волим да додам додатке на врху датотеке, ево моје комплетне Грунтфиле након додавања грунт.лоадНпмТаскс ('грунт-цонтриб-углифи');.

 модуле.екпортс = функција (грунт) грунт.лоадНпмТаскс ('грунт-цонтриб-углифи'); грунт.инитЦонфиг (пкг: грунт.филе.реадЈСОН ('пацкаге.јсон')); грунт.регистерТаск ('дефаулт', []); ;

(3) Креирајте задатак за минимизирање скрипти

Као што смо дискутовали, ово треба да се уради у оквиру инитЦонфиг () функције. Гитхуб страница за плугин (и већину других додатака) даје вам обиље информација и примјера. Ево шта сам користио у свом тест пројекту.

 углифи: буилд: срц: 'јс / сцриптс.јс', дест: 'јс / сцриптс.мин.јс'

Ово је прилично једноставно, прецизирао сам сцриптс.јс датотеку у директоријуму јс мог пројекта и одредиште за датотеку миниране. Постоје многи начини да одредите изворне датотеке, то ћемо погледати касније.

За сада, погледајмо комплетан Грунтфиле након што је ово додато, како би били сигурни да знате како се ствари уклапају заједно.

 модуле.екпортс = функција (грунт) грунт.лоадНпмТаскс ('грунт-цонтриб-углифи'); грунт.инитЦонфиг (пкг: грунт.филе.реадЈСОН ('пацкаге.јсон'), углифи: буилд: срц: 'сцриптс.јс', дест: 'сцриптс.мин.јс'); грунт.регистерТаск ('дефаулт', []); ;

(4) Додајте ову конфигурацију групи задатака

Сада можете отићи до вашег терминала и куцати грунт углифи али ће нам требати радне групе да касније покрену више задатака. Имамо подразумевани задатак празан, само чекамо да се нешто дода, па да га модификујемо на следеће:

 грунт.регистерТаск ('дефаулт', ['углифи']);

У овој фази би требало да можете да идете до терминала, откуцајте грунт и види да се догоди минификација. Не заборавите да направите сцриптс.јс наравно наравно!

То није трајало много времена за постављање? Чак и ако сте нови у свему овоме и требало вам је мало времена да прођете кроз кораке, вријеме уштеде ће надмашити вријеме проведено на њему у неколико наврата..

Цонцатенатинг Филес

Хајде да погледамо повезивање фајлова и научите како да одредите више датотека као циљ успут.

Повезивање је процес комбиновања садржаја више датотека у једну датотеку. Требаће нам плуг-ин грунт-цонтриб-цонцат. Хајде да радимо кроз кораке:

Да бисте инсталирали плугин користите нпм инсталирај грунт-цонтриб-цонцат --саве-дев у терминалу. Када завршите, побрините се да га додате на ваш Грунтфиле као и пре употребе грунт.лоадНпмТаскс ('грунт-цонтриб-цонцат');.

Следећа је конфигурација. Комбинујмо три специфичне датотеке, синтакса ће бити позната.

 цонцат: дист: срц: ['дев / јс / хеадер.јс', 'дев / јс / миплугин.јс', 'дев / јс / фоотер.јс'], дест: 'јс / сцриптс.јс', ,,

Горњи код узима три фајла датих као извор и комбинира их у датотеку дату као одредиште.

Ово је већ прилично снажно, али шта ако се дода нова датотека? Морамо ли се стално враћати овамо? Наравно да не, можемо да наведемо целу фасциклу датотека да се повеже.

 цонцат: дист: срц: 'дев / јс / *. јс "], дест:' јс / сцриптс.јс ',,,

Сада, било која јавасцрипт датотека унутар дев / јс фасцикле ће бити спојена у један велики фајл: јс / сцриптс.јс, много боље!

Сада је време да направите задатак тако да можемо да спојимо неке датотеке.

 грунт.регистерТаск ('мергејс', ['цонцат']);

Ово више није задани задатак па ћемо морати да упишемо његово име у терминал када издамо грунт команду.

 грунт мергејс

Аутоматизација наше аутоматизације

Већ смо направили велики напредак, али има још! За сада, када желите спојити или минификовати морате отићи до терминала и уписати одговарајућу наредбу. Крајње је вријеме да погледамо гледати команду која ће то учинити за нас. Такође ћемо научити како да извршимо више задатака одједном, успут.

Да би сте кренули, морамо да зграбимо грунт-цонтриб-ватцх. Сигуран сам да га можете инсталирати и додати до Грунтфиле на иуор до сада, тако да ћу почети тако што ћу вам показати шта користим у свом тест пројекту.

 ватцх: сцриптс: филес: ['дев / јс / *. јс'], задаци: ['цонцат', 'углифи'],,

Назвао сам скуп датотека за гледање “сцриптс”, само да знам шта ради. Унутар овог објекта сам одредио фајлове за гледање и задатке за покретање. У претходном примјеру уланчавања скупили смо све датотеке у директоријуму дев / јс.

У примјеру минификације ми смо смањили ову датотеку. Има смисла гледати дев / јс фасциклу за промене и извршавати ове задатке кад год их има.

Као што можете да видите, више задатака се може лако позвати раздвајањем зареза. Они ће се изводити редом, прво уланчавањем, затим минификацијом у овом случају. То се такође може урадити са групама задатака, што је и разлог зашто они постоје.

Сада можемо да изменимо подразумевани задатак:

 грунт.регистерТаск ('дефаулт', ['цонцат' ',' углифи ']);

Сада имамо два избора. Кад год желите спојити и смањити скрипте можете се пребацити на терминал и уписати грунт. Такође можете користити команду за праћење да бисте покренули гледање датотека: грунт ватцх.

Он ће седети тамо и чекати да измените ове датотеке. Када то урадите, он ће извршити све задатке који су му додељени, само напред, покушајте.

То је много боље, од нас нема потребе за улазом. Сада можете радити са својим датотекама и све ће бити лепо за вас.

Преглед

Са тим основним знањем о томе како се плугинс-и могу инсталирати и користити и како ради команда за гледање, сви сте спремни да сами постанете овисник о аутоматизацији. Грунт је много више од оног о чему смо разговарали, али ништа што не можете сами да решите.

Коришћење наредби за компајлирање САСС, оптимизирање слика, аутоматско поправљање и још много тога само је питање слиједа корака о којима смо разговарали и читања синтаксе коју плугин захтијева.

Ако знате за неке посебно добре кораке за Грунт, јавите нам у коментарима, увек смо заинтересовани да чујемо како користите алате као што је Грунт!