Gulp – združevanje in minimiranje js in css datotek

Kaj je sploh Gulp?

Gulp je sistem, ki poskrbi za avtomatizacijo najosnovnejših nalog pri razvoju spletne strani. Zgrajen je na NodeJs in je tako gulp kot tudi izvorna datoteka gulpfile.js spisan v javascript kodi kar ga naredi perfektnega in enostavnega za uporabo sploh za front-end razvijalce. Sama uporaba je zelo enostavna in sicer je potrebno za vsako nalogo, pa naj bo to minimiziranje .js ali .css datoteke ali združevanje večih .js oziroma .css datotek v eno ali kaj druga, napisati nalogo (angl. task) v izvorno datoteko gulpfile.js in na koncu vse kar moramo storiti je le-to da poženemo ukaz v ukazni vrstici / terminalu v smislu

Ime naloge določimo v gulpfile.js izvorni datoteki.

Kot smo omenili že zgoraj je sistem baziran na NodeJs, zato si je potrebno najprej  le-tega namestiti. Namestitveno datoteko najdemo na naslovu: NodeJS. Ko imamo nameščeno moramo v powershellu ali kateri koli drugi ukazni vrstici namestiti Gulp z ukazom:

Po istem postopku namestimo tudi vse potrebne plugine oziroma knjižnice.

Kratek primer kako lahko združimo in obenem minimiziramo vse javascript datoteke z zgolj enim ukazom je prikazan spodaj. Ampak najprej moramo seveda namestiti dva plugina, ki ju bomo uporabili in sicer gulp-concat in gulp-uglify. To storimo z naslednjima ukazoma:

  • npm install gulp-concat
  • npm install gulp-uglify

Ko smo to storili gremo v gulpfile.js in spišemo naloge.

Če gremo korak po koraku. Najprej smo zgoraj dodali objekte, nato napisali funkcijo oziroma task, kjer smo kot prvi argument podali ime naloge – productionjs, drugi argument pa je closure funkcija, ki sprejme naslednje argumente:

  • gulp.src() – pot do izvornih datotek, v mojem primeru je to v ./js/. *.js pove, da želimo združiti vse .js datoteke, lahko bi združili naprimer samo 2 ali 3 skripte.
  • .pipe(concat(‘scripts.js’) – concat() funkcija poskrbi za združitev vseh datotek v eno scripts.js datoteko,
  • .pipe(uglify()) minimizira končno scripts.js datoteko,
  • .pipe(gulp.dest(‘./dist/’)) – določi pot kam se bo končna datoteka shranila.

Nato nam preostane zgolj še to, da gremo v ukazno vrstico – npr. powershell, in vnesemo ukaz gulp productionjs, kjer je productionjs ime taska, ki smo ga podali kot prvi argument v gulp.task.