Gulp.js

S Vikipedije, slobodne enciklopedije
Gulp.js
Programer(i)Fractal i GitHub zajednica
Stabilno izdanje
3.9.1[1] / 8. februar 2016. god.; pre 8 godina (2016-02-08)
Repozitorijum
Uredi na Vikipodacima
Napisan uJavaskriptu
Platformaza različite platforme
LicencaMIT licenca[2]
Veb-sajtgulpjs.com

Gulp.js je Javaskript alat otvorenog koda razvijen od strane Fractal Innovations[3] i zajednice otvorenog koda u Gitu i ima značajnu primenu u front-end veb razvoju.

Gulp je alat za izvršavanje zadataka zasnovan na Node.js okruženju i Node Package Manager (npm) sistemu za upravljanje paketima, koji se koristi za automatizaciju zadataka koji se često ponavljaju i oduzimaju dosta vremena kao što su minimizacija koda, nadovezivanje (engl. concatenation), keširanje, testiranje modula, uklanjanje grešaka u kodu, optimizacija i dr.[4]

Gulp koristi pristup konfiguracije u samom kodu za definisanje svojih zadataka i zasniva se na uprošćenim dodacima za njihovo rešavanje. Gulp ekosistem sadrži preko 300 ovakvih dodataka koje se mogu izabrati.[5]

Pregled[uredi | uredi izvor]

Gulp[6] je alat u Javaskriptu zasnovan na nod toku podataka (engl. node stream). Ovi tokovi podataka olakšavaju povezivanje operacija sa fajlovima putem "kanala" za obradu podataka (engl. pipelines).[7] Gulp čita podatke iz sistema fajlova i šalje ih iz jednog u drugi dodatak pomoću funkcije .pipe(), tako što izvršava samo jedan zadatak u određenom trenutku. Na originalne fajlove se ne utiče sve dok se ne izvrše svi dodaci. Može se podesiti da se modifikuju originalni fajlovi ili da se prave novi. Na ovaj način se obezbeđuje mogućnost da se izvrši veliki broj kompleksnih zadataka povezivanjem različitih dodataka. Programeri mogu pisati svoje dodatke kako bi definisali svoje zadatke koje treba rešiti.[8] Za razliku od drugih alata za rešavanje zadataka koji podrazumevano izvršavaju zadatke, Gulp zahteva znanje Javaskripta i programiranja za definisanje zadataka. Gulp osim rešavanje zadataka ima i mogućnost kopiranja fajlova sa jedne na drugu lokaciju, kompajliranja, raspoređivanja, kreiranja obaveštenja, testiranja modula, uklanjanja grešaka u kodu, itd.

Značaj alata za izvršavanje zadataka[uredi | uredi izvor]

Alati za izvršavanje zadataka, kao što su Gulp ili Grunt su zasnovani na nodovima a ne na Node Package Manager (npm) jer su npm skripte neefikasne u rešavanju višestrukih zadataka. Iako programeri često koriste Node Package Manager (npm) skripte zato što su jednostavne i lake za implementaciju, postoji mnogo primera gde su se Gulp i Grunt bolje pokazali u odnosu na podrazumevane skripte.[9] Grunt rešava zadatke tako što transformiše fajlove i čuva ih kao nove fajlove u privremenim folderima i rezultat jednog zadatka se uzima kao ulaz u drugi sve dok rezultat ne dostigne odredišni folder. Ovo zahteva puno ulazno/izlaznih poziva i kreiranje mnoštva privremenih fajlova. S obzirom da Gulp prolazi kroz fajl sistem a ne zahteva nijednu od ovih privremenih lokacija, na taj način smanjuje broj ulazno/izlaznih poziva i poboljšava performanse.[10] Grunt koristi konfiguracione fajlove za izvršavanje zadataka dok Gulp zahteva kodiranje svog izvršnog fajla. Kod Grunt-a, svaki dodatak mora da se podesi tako da njegov ulaz odgovara izlazu prethodnog dodatka. Kod Gulp-a, dodaci su automatski "kanalisani" (engl. pipe-lined).[7]

Izvršavanje[uredi | uredi izvor]

Gulp zadaci se izvršavaju iz komandne linije (engl. Command Line Interface - CLI)[9] i zahtevaju fajlove package.json i gulpfile.js (galp fajl) u korenom direktorijumu. U galp fajlu se učitavaju dodaci i definišu zadaci. Prvo se svi potrebni moduli učitavaju a onda se zadaci definišu u galp fajlu. Svi potrebni dodaci navedeni u galp fajlu se instaliraju u devDependencies.[11] Podrazumevani zadatak se izvršava pomoću $gulp. Pojedinačni zadaci se definišu pomoću gulp.task i izvršavaju pomoću gulp <task> <othertask>.[12] Složeniji zadaci se definišu povezivanjem dodataka i uz pomoć .pipe()funkcije.[13]

Struktura galp fajla[uredi | uredi izvor]

Galp fajl je lokacija u Gulp-u gde se definišu sve operacije. Osnovna struktura galp fajla se sastoji od zahtevanih dodataka na početku, definicije zadataka i podrazumevanog zadatka na kraju.[14]

Dodaci[uredi | uredi izvor]

Svaki instalirani dodatak, koji je potreban da bi se izvršio zadatak, se dodaje na početku galp fajla u vidu zavisnosti (engl. dependency) u sledećem formatu.[12][13] 

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

Zadaci[uredi | uredi izvor]

Nakon toga se mogu kreirati zadaci. Gulp zadatak se definiše pomoću gulp.task i kao parametre uzima naziv zadatka i funkciju.

Sledeći primer prikazuje kako se kreira Gulp zadatak. Prvi parametar taskName je obavezan i definiše naziv pomoću koga se zadatak izvršava u terminalu[15] 

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

Kao alternativu, može se kreirati zadatak koji izvršava nekoliko predefinisanih funkcija. Ove funkcije se prosleđuju kao drugi parametar u obliku niza. 

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

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

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

Podrazumevani zadatak[uredi | uredi izvor]

Podrazumevani zadatak se definiše na kraju galp fajla. Može se izvršiti pomoću gulp komande u terminalu. U sledećem slučaju podrazumevani zadatak neće ništa uraditi.[13] 

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

Podrazumevani zadatak se u Gulp-u koristi za izvršenje neodređenog broja zavisnih podzadataka automatski definisanih iznad u sekvencijalnom nizu. Gulp takođe može da prati izvorne fajlove i da nad njima izvrši odgovarajući zadatak kada se fajlovi izmene. Podzadaci se navode kao elementi niza u drugom parametru. Proces se jednostavno može pokrenuti izvršenjem podrazumevanog zadatka pomoću gulp komande.[14]

Primeri zadataka[uredi | uredi izvor]

Zadatak sa slikom[uredi | uredi izvor]

Za naredni primer potreban je gulp-imagemin dodatak. Da biste instalirali dodatak, otkucajte npm install --save-dev gulp-imagemin.[16]

Zatim, definišite modul na početku galp fajla na sledeći način: 

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

Sledeći zadatak sa slikom optimizuje slike. gulp.src() vraća sve slike tipa .png, .gif ili .jpg u folder 'images-orig/'.

.pipe(imagemin()) sprovodi pronađene slike kroz proces optimizacije i pomoću .pipe(gulp.dest()) optimizovane slike se čuvaju u folder 'images/'. Bez gulp.dest()slike bi se takođe optimizovale ali ne bi bile sačuvane u odgovarajućem folderu.[17] S obzirom na to da su optimizovane slike sačuvane u drugom folderu, originalne ostaju nepromenjene.[13] 

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

Zadatak sa skriptama[uredi | uredi izvor]

U sledećem primeru svi Javaskript fajlovi u folderu 'scripts/' su optimizovani pomoću funkcije .pipe(uglify()) i gulp.dest('scripts/') svojim rezultatom prelazi preko originalnih fajlova.[18] Zbog ovoga jedna funkcija mora da se vrati do dodatkagulp-uglify plugin[19] na npm instalaciju paketa i na početku galp fajla mora se definisati modul. 

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

Zadatak sa osluškivanjem[uredi | uredi izvor]

Zadatak sa osluškivanjem služi da odreaguje na promenu u fajlovima. U sledećem primeru zadaci sa nazivima scripts i images se pozivaju kada se bilo koji od Javaskript fajlova ili slika promeni u navedenim folderima.[20] 

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

Čak je moguće i postići ažuriranje sadržaja u Veb-pregledaču korišćenjem zadataka sa osluškivanjem.[21] Ovo je moguće postići korišćenjem brojnih opcija i dodataka za Gulp.

Reference[uredi | uredi izvor]

  1. ^ „Gulp.js GitHab repozitorijum”. GitHab. Pristupljeno 2017-10-07. 
  2. ^ „License to github.com” (na jeziku: engleski). Pristupljeno 2016-05-30. 
  3. ^ Mao, Jed; Schmitt, Maximilian; Stryjewski, Tomasz; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1st izd.). Bleeding Edge Press. ISBN 978-1-939902-14-6. 
  4. ^ „Building With Gulp – Smashing Magazine”. Smashingmagazine.com. Pristupljeno 2016-12-14. 
  5. ^ „gulp.js plugin registry”. Gulpjs.com. Pristupljeno 2016-12-14. 
  6. ^ „gulpjs/gulp”. GitHub. Pristupljeno 2016-09-22. 
  7. ^ a b „substack/stream-handbook: how to write node programs with streams”. GitHub. Pristupljeno 2016-12-14. 
  8. ^ „gulpjs/gulp”. GitHub. Pristupljeno 2016-09-22. 
  9. ^ a b „gulpjs/gulp”. GitHub. Pristupljeno 2016-09-23. 
  10. ^ „Gulp for Beginners”. CSS-Tricks. 2015-09-01. Pristupljeno 2016-12-14. 
  11. ^ „install | npm Documentation”. docs.npmjs.com. Pristupljeno 2016-09-22. 
  12. ^ a b „gulpjs/gulp”. GitHub. Pristupljeno 2016-09-23. 
  13. ^ a b v g Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472. 
  14. ^ a b „An Introduction to Gulp.js - SitePoint” (na jeziku: engleski). 2014-02-10. Pristupljeno 2016-09-23. 
  15. ^ „gulp/API.md at 4.0 · gulpjs/gulp · GitHub”. GitHub. 2016-05-12. Arhivirano iz originala 06. 03. 2017. g. Pristupljeno 2016-12-14. 
  16. ^ „gulp-imagemin”. Npmjs.com. Pristupljeno 2016-12-14. 
  17. ^ „Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren”. Magazin.phlow.de. 2014-05-25. Arhivirano iz originala 16. 06. 2017. g. Pristupljeno 2016-12-14. 
  18. ^ „Front-end Workflow mit Gulp - Liechtenecker”. Liechtenecker.at. 2015-05-29. Pristupljeno 2016-12-14. 
  19. ^ „gulp-uglify”. Npmjs.com. Pristupljeno 2016-12-14. 
  20. ^ „gulp-watch”. Npmjs.com. Pristupljeno 2016-09-23. 
  21. ^ „Browsersync + Gulp.js”. Browsersync.io. Pristupljeno 2016-12-14. 

Literatura[uredi | uredi izvor]

  • Mao, Jed; Schmitt, Maximilian; Stryjewski, Tomasz; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1st izd.). 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. 

Spoljašnje veze[uredi | uredi izvor]

Preuzeto iz „https://sr.wikipedia.org/w/index.php?title=Gulp.js&oldid=27705493”