Automatizacija u front end razvojnom procesu alatom Gulp

Share

O Gulpu

Gulp je alat napisan u nodu (Node.js) koji služi za automatizaciju čestih i dosadih procesa. Samim tim, Gulp omogućava da se usredsredite na važnije stvari, a to je pisanje dobrog koda. Automatizacija procesa poput minifkacije javaskripta (javascript), optimizacije slika, unit testova, generisanje icon-fontova može uštedeti dosta vremena.

Kako radi?

Gulp za svoj rad koristi strimove (streams). Oni služe da obrade podatke i proslede rezultat za dalju obradu. Korisnici Unixa će to prepoznati ako su kroz komandnu liniju pajpovali neke komande (primer: less package.json | json dependencies | pbcopy). Na ovaj način mogu se razdvojiti celine i olakšati manipulacija podacima.

Zasto Gulp?

Dosta se polemiše koji task menadžer koristiti i zašto je jedan bolji od drugog. Ljudi naviknu na jedan i ne žele tako lako da se odreknu istog zarad novije tehnologije. Poenta i nije u tome, niti oni služe da bi zamenili jedni druge. Ukoliko već duže vreme koristite Grunt za automatizaciju, nema potrebe da se prebacujete na Gulp. Prednosti Gulpa je što je mnogo lakše podesiti neke osnovne stvari za razliku od Grunta. Takođe, pogodan je za ljude koji ne znaju JavaScript, jer je sintaksa jednostavna. Ukoliko još niste počeli da koristite ovakve alate, ali to želite, moja preporuka je Gulp jer je daleko jednostavniji. Ukoliko već koristite Grunt, verovatno nema potrebe da prebacujete automatizaciju na Gulp.

Mane

Pored svih stvari koje nam Gulp olakšava i on ima neke mane. Na primer, možda koristite „rework“ kao CSS parser, ali Gulp verzija rework-a ne koristi poslednju verziju rework-a, pa ste u zaostatku. Takođe neki paketi možda nisu testirani ili nisu napisani najbolje, ali su jedini za tu tehnologiju koju oni automatizuju. To je generalno mana svih ovakvih alata.

Recepti

Gulp recepti se pišu unutar datoteke koja treba da se zove gulpfile.js. Recepti se zatim pozivaju iz komandne linije na sledeći način:

$ gulp [IME_ZADATKA]

gde je [IME_ZADATKA] zadatak koji ste vi napisali u Gulp datoteci. Na primer:

$ gulp minify_css

Taj zadatak bi bio definisan na sledeći način:

// uključujemo gulp i paket za minifikaciju CSS-a
var gulp = require('gulp');
var minify = require('gulp-minify-css');

// definišemo zadatak i nazivamo ga `minify`
gulp.task('minify', function () {
    // ovde definišemo nad kojim datotekama želimo da se izvrši operacija
    return gulp.src('css/*.css')
        .pipe(minify({ keepSpecialComments: 0 })) // izvršavamo minifikaciju
        .pipe(gulp.dest('assets/css/')); // definišemo gde cemo sačuvati novu datoteku
});

Ovaj zadatak bi trebalo da izvršavamo samo pred puštanje produkcije jer nam dok radimo odgovara da css nije minifikovan. Dobra stvar je jer možemo lako razdvojiti zadatke koji treba da se obavljaju prilikom development-a i prilikom puštanja produkcije.

Watch

Kako ne bi smo morali nakon svake promene u kodu da pokrećemo komandu u terminalu, Gulp omogućava da „nadgledamo“ datoteke. Nakon promene sadržaja datoteke, Gulp prepozna promenu i izvrši određene zadatke u zavisnosti koja je datoteka i koji smo mi zadatak definisali za tu datoteku.

gulp.task('watch', function () {
    gulp.watch('css/*.css', ['minify']);
});

Ovim smo rekli Gulpu da nakon svake promene sadržaja datoteke, izvrši zadatak minify. Ovo nam nije baš korisno, ali primer služi da pokaže kako Gulp nadgleda fajlove, tj. kako se koristi watch.

Primer jedne Gulp datoteke za pravi projekat:

// ubacujemo sve pakete koji su nam potrebni
var gulp = require('gulp');
var jshintConfig = require('./package').jshintConfig;
var stylish = require('jshint-stylish');
var jshint = require('gulp-jshint');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var minify = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');

// zadatak koji kompajlira sas (Sass) u CSS i dodaje vendor prefixe (autoprefixer)
gulp.task('css', function () {
    return gulp.src('sass/style.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer('last 2 version', '> 1%'))
        .pipe(gulp.dest('assets/css/'));
});

// zadatak koji proverava kvalitet koda
gulp.task('jshint', function () {
    return gulp.src(['assets/js/**/*.js', '!assets/js/build/*.js'])
        .pipe(jshint(jshintConfig))
        .pipe(jshint.reporter(stylish));
});

// zadatak koji optimizuje slike
gulp.task('images', function () {
    return gulp.src('assets/img/**/*')
        .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
        .pipe(gulp.dest('assets/img'));
});

// zadatak koji minifikuje css kod
gulp.task('minify', function () {
    return gulp.src('assets/css/*.css')
        .pipe(minify({ keepSpecialComments: 0 }))
        .pipe(gulp.dest('assets/css/'));
});

// zadatak koji aglifikuje (uglify) kod
gulp.task('uglify', function () {
    return gulp.src('assets/js/scripts.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/js/scripts.min.js'));
});

// zadatak watch koji nadgleda datoteke i izvršava zadatke pri promeni datoteke
gulp.task('watch', ['css'], function () {
    gulp.watch('sass/**/*.scss', ['css']);
    gulp.watch(['assets/js/**/*.js', '!assets/js/scripts.min.js'], ['jshint']);
});

// definišemo zadatak "default" koji ce izvršiti zadatak "css" i "jshint"
gulp.task('default', ['css', 'jshint']);
// definišemo zadatak "build" koji ce izvršiti zadatak "minify", "uglify" i "images"
gulp.task('build', ['minify', 'uglify', 'images']);

Paketi

Izbor paketa za Gulp je ogroman. Ukoliko ste koristili neki drugi drugi task menadžer poput Grunta, postoji ogromna šansa da je neko napisao isti paket za Gulp. Paketi su raznovrsni, ali obzirom da je tema front-end, pomenućemo one koji se najčešće koriste.

CSS

JavaScript

Slike

Ostalo

Ovo su samo neki od paketa u moru drugih. Pakete možete pretraživati na sajtu Gulpa ili na NPM-u.

Zaključak

Nekada nije bilo potrebno vršiti nikakva kompajliranja kada je Front-End u pitanju. Pojavom novih tehnologija kao što su CSS preprocesori, kompajleri za javascript, itd. automatizacija tih procesa je poželjna, ponekad i neophodna. Naročito je korisno koristiti takve alate kada želimo da automatizujemo različite zadatke koje alat kao što je Gulp objedinuje i spaja u jedan proces. Najčešći primer u developmentu je kombinacija Sasa (Sass), Brauzerifaja (Browserify) i provera kvaliteta koda (JSHint). Za produkciju češći primeri su minifikacija koda i optimizacija slika. Gulp je odličan alat koji to može olakšati i pomoći da se usredsredimo na problem i kod.

Share

Prijavi se da prvi dobijaš nove blogove i vesti.

Ostavite odgovor

Aleksandar Goševski

Visualisation Team Lead @Seven Bridges Genomics
mm

Aleksandar je front end developer u Vast-u. Vešt u razvijanju aplikacija koje pokreće nodeJS server sa širokim spektrom tehnologija na klijentskoj strani, duboko je uključen u inicijative za unapređenje razvojnog procesa u Vast FE timu. Aleksandar je, takođe, korisnik Vim-a i zagovornik novih tehnologija i programerskih paradigmi. Više o njemu možete pronaći na njegovom blogu http://goschevski.com/

Prijavi se da prvi dobijaš nove blogove i vesti.

Kategorije