Почетак рада са Гулп.јс

Гулп је алатка заснована на Јавасцрипту која вам омогућава да аутоматизујете битове вашег тока посла. Аутоматизација вам буквално може уштедети сате дневно. Без обзира да ли сте програмер или дизајнер који из времена у одређено вријеме ствара ХТМЛ графичке елементе, охрабрујем вас да се упишете.

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

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

Не брините, инсталација је врло једноставна. Потребно је да користимо терминал у ОСКС-у и Линук-у, или командну линију за Виндовс. Од сада ћу говорити о њему као о Терминалу.

Отворите га и упишите нпм -в и притисните ентер. Ако видите приказани број верзије имате већ инсталиран Ноде - ово је зависност за Гулп.

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

Инсталирање Гулпа је исто тако лако. Залијепите наредну наредбу у терминал, то је то:

нпм инсталл - глобал гулп

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

Додавање гулпа пројекту

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

нпм инсталл --саве-дев гулп

Ово би требало да креира фасциклу ноде_модулес и нпм-дебуг.лог датотеку у фасцикли пројекта. Гулп их користи да уради своју ствар у вашем пројекту, не морате размишљати о њима у овој фази.

То је разлог зашто морамо додати Гулп сваком конкретном пројекту сваки пројекат има различите захтјеве. Може се звати САСС, други за Лесс. Један може користити Цоффеесцрипт, други не може, и тако даље.

Тхе Гулпфиле

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

вар гулп = рекуире ('гулп'); гулп.таск ('дефаулт', фунцтион () // За сада ништа не ради, ускоро ћемо додати функционалност);

Када се ова датотека сачува, можете се вратити на свој терминал и покренути гулп команду. Гулп открива у којем је пројекту и покреће задани задатак - онај који смо управо креирали. Требало би да видите нешто овако:

Овде се ништа не догађа, јер је задатак празан, али ради добро. Хајде сада да кренемо са неким примерима!

Копирање датотеке

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

У директоријуму пројекта креирајте датотеку под називом то_цопи.ткт , и именик дев. Идемо у наш Гулпфиле и креирамо нови задатак цопи.

гулп.таск ('цопи', фунцтион () ретурн гулп.срц ('то_цопи.ткт') .пипе (гулп.дест ('дев')););

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

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

Вратите се на терминал и куцајте гулп цопи да би покренуо овај задатак, требало би да копира наведену датотеку у одређени директоријум, нешто слично овоме:

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

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

гулп.таск ('цопи', фунцтион () ретурн гулп.срц ('девелопмент / *') .пипе (гулп.дест ('продуцтион')););

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

Цомпилинг САСС

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

И типе САСС Гулп у Гоогле, први резултат је обично оно што ми треба, треба да нађете страницу за САСС пакет. Показује вам како да га инсталирате (нпм инсталл гулп-сасс). Вероватно ћете морати да користите судо да бисте га инсталирали као администратор, тако да ће вероватно бити (судо нпм инсталл гулп-сасс) .

Када завршите, можете користити синтаксу коју пакет диктира за компајлирање кода. Да бисте то урадили, креирајте датотеку стилес.сцсс са следећим садржајем:

$ примари: # фф9900; боди бацкгроунд: $ примари; 

Сада креирајте следећи Гулп задатак у Гулпфиле-у.

гулп.таск ('сасс', фунцтион () гулп.срц ('*. сцсс') .пипе (сасс ()) .пипе (гулп.дест ('./ цсс')););

Пре покретања команде, не заборавите да 'захтевате' пакет на врху Гулпфилеа на следећи начин:

вар сасс = рекуире ('гулп-сасс');

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

Гледање датотека и фасцикли

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

У Гулпфилеу, креирајте наредбу намед аутомате који ће користити наредбу ватцх да би гледао скуп датотека за промјене и покренуо одређену наредбу када се датотека промијени.

гулп.таск ('аутомате', фунцтион () гулп.ватцх ('*. сцсс', ['сасс']););

Ако куцате гулп аутомате у терминал, он ће покренути и завршити задатак, али се неће вратити на промпт зато што прати промјене. Навели смо да желимо да гледамо све сцсс датотеке у основном директоријуму и ако се промене, желимо да покренемо сасс команду коју смо претходно поставили.

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

Покретање више задатака

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

Ако су задаци повезани, волим ланац их. Добар примјер би био спајање и минификација јавасцрипт датотека. Прво цедимо наше фајлове на цонцат акцију, а затим их преусмеравамо на гулп-углифи, а затим користимо функцију одредишта да их емитујемо.

Ако задаци нису повезани, могли бисте позовете више задатака. Примјер би био задатак у којем желимо спојити и смањити наше скрипте и саставити наш САСС. Ево га пуни Гулпфиле како би то изгледало.

вар гулп = рекуире ('гулп'); вар углифи = рекуире ('гулп-углифи'); вар цонцат = рекуире ('гулп-цонцат'); вар сасс = рекуире ('гулп-сасс'); гулп.таск ('сцриптс', фунцтион () гулп.срц ('јс / ** / *. јс') .пипе (цонцат ('сцриптс.јс')) .пипе (гулп.дест ('.') ) .пипе (углифи ()) .пипе (гулп.дест ('.'))); гулп.таск ('стилес', фунцтион () гулп.срц ('/ *. сцсс') .пипе (сасс ()) .пипе (гулп.дест ('./ цсс'));); гулп.таск ('аутомате', фунцтион () гулп.ватцх (['*. сцсс', 'јс / ** / *. јс'], ['сцриптс', 'стилес']);); гулп.таск ('дефаулт', ['сцриптс', 'стилес']);

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

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

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

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

Преглед

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

• Потражите додатак
• Инсталл плугин
• Захтевајте додатак у Гулпфиле-у
• Користите синтаксу у документацији

Пет команди које су доступне у Гулпу (задатак, трчање, сат, срц, дест) су једине које морате знати, сви додаци трећих страна имају велику документацију. Ево листе неких ствари које користим, а које бисте могли да почнете одмах:

• Оптимизација слика са оптимизацијом гулпа-слике
• Креирање слика духова са гутањем
• Повезивање фајлова са гулп-цонцат-ом
• Смањивање датотека са гулп-углифи
• Брисање датотека са гулп-делом
• Јавасцрипт линтинг са гулп-јслинт
• ЈСОН линтинг са гулп-јсонлинт
• Аутопрефик ЦСС с гулп-аутопрефикер
• Претражите и замените користећи гулп-фреп
• Смањи ЦСС са гулп-минифи-цсс