Kako si gulp

Gulp je js programčić (nešto poput make iz C jezika) kojeg možemo podesiti da prati promjene u datotekama, da spaja/filtrira datoteke i na kraju, kojeg možemo povezati/sinkronizirati sa browser-syncom da dobijemo prikaz promjena u pregledniku bez osvježavanja (refresh).

U primjeru koristim i PostCSS. PostCSS je alatka kroz koju kao filter, možemo primijeniti CSS minify ali i mnoštvo ostalih ekstenzija poput Autoprefixer ekstenzije koja pomaže u održavanju kompatibilnosti sa starijim browserima.

Instalacija

Prvo moramo instalirati gulp (terminal verziju):

sudo npm install gulp-cli -g

Arhiva sa primjerom se nalazi ovdje.

Naravno, potrebno je raspakirati arhivu i unutra pokrenuti komandu:

npm install

Nakon instala slijedi komanda:

gulp

‘gulp’ otvara browser i stranicu. I sada kada editiramo:

./pcss/module.css 

i promjenimo css:

background:green;

cijela stvar se “kompajlira” i odmah vidimo promjene u browseru.

gulpfile.js

“gulpfile.js” je datoteka u kojoj određujemo kada i kako će se odvijati određene akcije.

Watch

‘watch’ funkcijom pratimo promjene u određenom direktoriju i kao drugi argument dodajemo naziv funkcije koja biva pozivana nakon što se dogodi promjena.

Tasks

U funkcijama zadataka određujemo… zadatke. Tako da na primjer ‘cssTask’ prati promjene u ‘pcss’ direktoriju i nakon promjena filtrira CSS datoteke kroz autoprefixer ekstenziju i prebaciva u ‘css’ direktorij.

function cssTask(){
  return src('./pcss/*.css', { sourcemaps: true })
    .pipe(postcss([autoprefixer()]))
    .pipe(dest('css', { sourcemaps: '.' }));
}

‘watchTask’ zadatak prati promjene u ./index.html i zove ‘browsersyncReload’. Druga ‘watch’ funkcija prati promjene u ‘pcss’ direktoriju i poziva ‘cssTask’ i ‘browsersyncReload’ funkcije.

Browser-sync funkcije

‘browsersyncServe’ funkcija pokreće server a ‘browsersyncReload’ osvježava html u browseru.

Exports

Na kraju izvozimo zadatke (tasks) i ‘browsersyncServe’ init funkciju kroz ‘series’ funkciju koja serijski poziva funkcije (izvršava zadatke) kada u terminalu upišemo ‘gulp’.