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’.