Википедија

Gulp.js

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

Gulp.js
Програмер(и)Fractal и GitHub заједница
Стабилно издање
3.9.1[1] / 8. фебруар 2016. год.; пре 8 година (2016-02-08)
Репозиторијум
Уреди на Википодацима
Написан уЈаваскрипту
Платформаза различите платформе
ЛиценцаМИТ лиценца[2]
Веб-сајтgulpjs.com

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

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

Преглед уреди

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

Значај алата за извршавање задатака уреди

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

Извршавање уреди

Gulp задаци се извршавају из командне линије (енгл. Command Line Interface - CLI)[9] и захтевају фајлове package.json и gulpfile.js (галп фајл) у кореном директоријуму. У галп фајлу се учитавају додаци и дефинишу задаци. Прво се сви потребни модули учитавају а онда се задаци дефинишу у галп фајлу. Сви потребни додаци наведени у галп фајлу се инсталирају у devDependencies.[11] Подразумевани задатак се извршава помоћу $gulp. Појединачни задаци се дефинишу помоћу gulp.task и извршавају помоћу gulp <task> <othertask>.[12] Сложенији задаци се дефинишу повезивањем додатака и уз помоћ .pipe()функције.[13]

Структура галп фајла уреди

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

Додаци уреди

Сваки инсталирани додатак, који је потребан да би се извршио задатак, се додаје на почетку галп фајла у виду зависности (енгл. dependency) у следећем формату.[12][13] 

//Додавање зависности
var gulp = require ( 'gulp');
var gutil = require ( 'util-gulp');

Задаци уреди

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

Следећи пример приказује како се креира Gulp задатак. Први параметар taskName је обавезан и дефинише назив помоћу кога се задатак извршава у терминалу[15] 

// Дефинисање задатака
gulp.task ( 'taskName', function () {
// уради нешто
});

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

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

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

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

Подразумевани задатак уреди

Подразумевани задатак се дефинише на крају галп фајла. Може се извршити помоћу gulp команде у терминалу. У следећем случају подразумевани задатак неће ништа урадити.[13] 

// Gulp подразумевани задатак
gulp.task ( 'default', [ '']);

Подразумевани задатак се у Gulp-у користи за извршење неодређеног броја зависних подзадатака аутоматски дефинисаних изнад у секвенцијалном низу. Gulp такође може да прати изворне фајлове и да над њима изврши одговарајући задатак када се фајлови измене. Подзадаци се наводе као елементи низа у другом параметру. Процес се једноставно може покренути извршењем подразумеваног задатка помоћу gulp команде.[14]

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

Задатак са сликом уреди

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

Затим, дефинишите модул на почетку галп фајла на следећи начин: 

var imagemin = require ( 'gulp-imagemin');

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

.pipe(imagemin()) спроводи пронађене слике кроз процес оптимизације и помоћу .pipe(gulp.dest()) оптимизоване слике се чувају у фолдер 'images/'. Без gulp.dest()слике би се такође оптимизовале али не би биле сачуване у одговарајућем фолдеру.[17] С обзиром на то да су оптимизоване слике сачуване у другом фолдеру, оригиналне остају непромењене.[13] 

// Задатак са сликама
gulp.task ( 'images', function () {
    gulp.src ( 'images-orig/*. {png, gif, jpg}')
        .pipe (imagemin ())
        .pipe (gulp.dest ( 'images/'));
});

Задатак са скриптама уреди

У следећем примеру сви Јаваскрипт фајлови у фолдеру 'scripts/' су оптимизовани помоћу функције .pipe(uglify()) и gulp.dest('scripts/') својим резултатом прелази преко оригиналних фајлова.[18] Због овога једна функција мора да се врати до додаткаgulp-uglify plugin[19] на npm инсталацију пакета и на почетку галп фајла мора се дефинисати модул. 

//Задатак са скриптом
gulp.task ( 'scripts', function () {
    gulp.src ( 'scripts/*. js')
        .pipe (uglify ())
        .pipe (gulp.dest ( 'scripts/'));
});

Задатак са ослушкивањем уреди

Задатак са ослушкивањем служи да одреагује на промену у фајловима. У следећем примеру задаци са називима scripts и images се позивају када се било који од Јаваскрипт фајлова или слика промени у наведеним фолдерима.[20] 

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

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

Референце уреди

  1. ^ „Gulp.js ГитХаб репозиторијум”. ГитХаб. Приступљено 2017-10-07. 
  2. ^ „License to github.com” (на језику: енглески). Приступљено 2016-05-30. 
  3. ^ Mao, Jed; Schmitt, Maximilian; Stryjewski, Tomasz; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1st изд.). Bleeding Edge Press. ISBN 978-1-939902-14-6. 
  4. ^ „Building With Gulp – Smashing Magazine”. Smashingmagazine.com. Приступљено 2016-12-14. 
  5. ^ „gulp.js plugin registry”. Gulpjs.com. Приступљено 2016-12-14. 
  6. ^ „gulpjs/gulp”. GitHub. Приступљено 2016-09-22. 
  7. ^ а б „substack/stream-handbook: how to write node programs with streams”. GitHub. Приступљено 2016-12-14. 
  8. ^ „gulpjs/gulp”. GitHub. Приступљено 2016-09-22. 
  9. ^ а б „gulpjs/gulp”. GitHub. Приступљено 2016-09-23. 
  10. ^ „Gulp for Beginners”. CSS-Tricks. 2015-09-01. Приступљено 2016-12-14. 
  11. ^ „install | npm Documentation”. docs.npmjs.com. Приступљено 2016-09-22. 
  12. ^ а б „gulpjs/gulp”. GitHub. Приступљено 2016-09-23. 
  13. ^ а б в г Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472. 
  14. ^ а б „An Introduction to Gulp.js - SitePoint” (на језику: енглески). 2014-02-10. Приступљено 2016-09-23. 
  15. ^ „gulp/API.md at 4.0 · gulpjs/gulp · GitHub”. GitHub. 2016-05-12. Архивирано из оригинала 06. 03. 2017. г. Приступљено 2016-12-14. 
  16. ^ „gulp-imagemin”. Npmjs.com. Приступљено 2016-12-14. 
  17. ^ „Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren”. Magazin.phlow.de. 2014-05-25. Архивирано из оригинала 16. 06. 2017. г. Приступљено 2016-12-14. 
  18. ^ „Front-end Workflow mit Gulp - Liechtenecker”. Liechtenecker.at. 2015-05-29. Приступљено 2016-12-14. 
  19. ^ „gulp-uglify”. Npmjs.com. Приступљено 2016-12-14. 
  20. ^ „gulp-watch”. Npmjs.com. Приступљено 2016-09-23. 
  21. ^ „Browsersync + Gulp.js”. Browsersync.io. Приступљено 2016-12-14. 

Литература уреди

  • Mao, Jed; Schmitt, Maximilian; Stryjewski, Tomasz; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1st изд.). Bleeding Edge Press. ISBN 978-1-939902-14-6. 
  • Odell, Den (2014). „Build Tools and Automation”. Pro JavaScript Development Coding, Capabilities, and Tooling. Apress. ISBN 978-1-4302-6268-8. 
  • Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472. 

Спољашње везе уреди

Преузето из „https://sr.wikipedia.org/w/index.php?title=Gulp.js&oldid=26745843”