Gulp.js
Gulp.js је Јаваскрипт алат отвореног кода развијен од стране Fractal Innovations и заједнице отвореног кода у Гиту и има значајну примену у front-end веб развоју.

Gulp је алат за извршавање задатака заснован на Node.js окружењу и Node Package Manager (npm) систему за управљање пакетима, који се користи за аутоматизацију задатака који се често понављају и одузимају доста времена као што су минимизација кода, надовезивање (), кеширање, тестирање модула, уклањање грешака у коду, оптимизација и др.

Gulp користи приступ конфигурације у самом коду за дефинисање својих задатака и заснива се на упрошћеним додацима за њихово решавање. Gulp екосистем садржи преко 300 оваквих додатака које се могу изабрати.

Преглед 
Gulp је алат у Јаваскрипту заснован на нод току података (). Ови токови података олакшавају повезивање операција са фајловима путем "канала" за обраду података (). Gulp чита податке из система фајлова и шаље их из једног у други додатак помоћу функције .pipe(), тако што извршава само један задатак у одређеном тренутку. На оригиналне фајлове се не утиче све док се не изврше сви додаци. Може се подесити да се модификују оригинални фајлови или да се креирају нови. На овај начин се обезбеђује могућност да се изврши велики број комплексних задатака повезивањем различитих додатака. Програмери могу писати своје додатке како би дефинисали своје задатке које треба решити. За разлику од других алата за решавање задатака који подразумевано извршавају задатке, Gulp захтева знање Јаваскрипта и програмирања за дефинисање задатака. Gulp осим решавање задатака има и могућност копирања фајлова са једне на другу локацију, компајлирања, распоређивања, креирања обавештења, тестирања модула, уклањања грешака у коду, итд.

Значај алата за извршавање задатака 
Алати за извршавање задатака, као што су Gulp или Grunt су засновани на нодовима а не на Node Package Manager (npm) јер су npm скрипте неефикасне у решавању вишеструких задатака.
Иако програмери често користе Node Package Manager (npm) скрипте зато што су једноставне и лаке за имплементацију, постоји много примера где су се Gulp и Grunt боље показали у односу на подразумеване скрипте. Grunt решава задатке тако што трансформише фајлове и чува их као нове фајлове у привременим фолдерима и резултат једног задатка се узима као улаз у други све док резултат не достигне одредишни фолдер. Ово захтева пуно улазно/излазних позива и креирање мноштва привремених фајлова. С обзиром да Gulp пролази кроз фајл систем а не захтева ниједну од ових привремених локација, на тај начин смањује број улазно/излазних позива и побољшава перформансе. Grunt користи конфигурационе фајлове за извршавање задатака док Gulp захтева кодирање свог извршног фајла. Код Grunt-a, сваки додатак мора да се подеси тако да његов улаз одговара излазу претходног додатка. Код Gulp-a, додаци су аутоматски "каналисани" ().

Извршавање 
Gulp задаци се извршавају из командне линије () и захтевају фајлове package.json и gulpfile.js (галп фајл) у кореном директоријуму. У галп фајлу се учитавају додаци и дефинишу задаци. Прво се сви потребни модули учитавају а онда се задаци дефинишу у галп фајлу. Сви потребни додаци наведени у галп фајлу се инсталирају у devDependencies. Подразумевани задатак се извршава помоћу $gulp. Појединачни задаци се дефинишу помоћу gulp.task и извршавају помоћу gulp <task> <othertask>. Сложенији задаци се дефинишу повезивањем додатака и уз помоћ .pipe()функције.

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

Додаци 
Сваки инсталирани додатак, који је потребан да би се извршио задатак, се додаје на почетку галп фајла у виду зависности () у следећем формату. //Додавање зависности
var gulp = require ( 'gulp');
var gutil = require ( 'util-gulp');

Задаци 
Након тога се могу креирати задаци. Gulp задатак се дефинише помоћу gulp.task и као параметре узима назив задатка и функцију.

Следећи пример приказује како се креира Gulp задатак. Први параметар taskName је обавезан и дефинише назив помоћу кога се задатак извршава у терминалу // Дефинисање задатака
gulp.task ( 'taskName', function () {
// уради нешто
});

Као алтернативу, може се креирати задатак који извршава неколико предефинисаних функција. Ове функције се прослеђују као други параметар у облику низа. function fn1 () {
// уради нешто
}

function fn2 () {
// уради нешто друго
}

// Задатак са низом имена функција
gulp.task ( 'taskName', ['fn1','fn2']);

Подразумевани задатак 
Подразумевани задатак се дефинише на крају галп фајла. Може се извршити помоћу gulp команде у терминалу. У следећем случају подразумевани задатак неће ништа урадити. // Gulp подразумевани задатак
gulp.task ( 'default', [ '']);Подразумевани задатак се у Gulp-у користи за извршење неодређеног броја зависних подзадатака аутоматски дефинисаних изнад у секвенцијалном низу. Gulp такође може да прати изворне фајлове и да над њима изврши одговарајући задатак када се фајлови измене. Подзадаци се наводе као елементи низа у другом параметру. Процес се једноставно може покренути извршењем подразумеваног задатка помоћу gulp команде.

Примери задатака

Задатак са сликом 
За наредни пример потребан је gulp-imagemin додатак. Да бисте инсталирали додатак, откуцајте  npm install --save-dev gulp-imagemin.

Затим, дефинишите модул на почетку галп фајла на следећи начин: var imagemin = require ( 'gulp-imagemin');

Следећи задатак са сликом оптимизује слике.  gulp.src() враћа све слике типа .png, .gif или .jpg у фолдер 'images-orig/'.

.pipe(imagemin()) спроводи пронађене слике кроз процес оптимизације и помоћу .pipe(gulp.dest()) оптимизоване слике се чувају у фолдер 'images/'. Без gulp.dest()слике би се такође оптимизовале али не би биле сачуване у одговарајућем фолдеру. С обзиром на то да су оптимизоване слике сачуване у другом фолдеру, оригиналне остају непромењене. // Задатак са сликама
gulp.task ( 'images', function () {
    gulp.src ( 'images-orig/*. {png, gif, jpg}')
        .pipe (imagemin ())
        .pipe (gulp.dest ( 'images/'));
});

 Задатак са скриптама 
У следећем примеру сви Јаваскрипт фајлови у фолдеру 'scripts/' су оптимизовани помоћу функције .pipe(uglify()) и gulp.dest('scripts/') својим резултатом прелази преко оригиналних фајлова. Због овога једна функција мора да се врати до додаткаgulp-uglify plugin на npm инсталацију пакета и на почетку галп фајла мора се дефинисати модул. //Задатак са скриптом
gulp.task ( 'scripts', function () {
    gulp.src ( 'scripts/*. js')
        .pipe (uglify ())
        .pipe (gulp.dest ( 'scripts/'));
});

 Задатак са ослушкивањем 
Задатак са ослушкивањем служи да одреагује на промену у фајловима. У следећем примеру задаци са називима scripts и images'' се позивају када се било који од Јаваскрипт фајлова или слика промени у наведеним фолдерима. // Понови извршење задатка са променом у фајлу
gulp.task ( 'watch', function () {
    gulp.watch ( '. scripts/js **', [ 'scripts']);
    gulp.watch ( 'images-orig/**', [ 'images']);
});

Чак је могуће и постићи ажурирање садржаја у Веб-прегледачу коришћењем задатака са ослушкивањем. Ово је могуће постићи коришћењем бројних опција и додатака за Gulp.

Референце

Литература

Спољашње везе 
 
 

Јаваскрипт алати за програмирање