Hatékonyságnövelés a Gulp.js használatával

Fejlesztés vagy akár sitebuild során számtalan esetben kerülhetsz szembe újra és újra lefuttatandó feladatokkal, úgy mint a CSS vagy JavaScript fájlok összefűzése, lekicsinyítése (minify), a képek tömörítése vagy a CSS preprocesszorok (SASS, LESS) használata. A Gulp automatizált feladatvégrehajtó-eszközként ezen folyamatok kezelésében lehet nagy segítségedre.

A Gulp nem az első a task runner eszközök terén, a legismertebb talán a Grunt, ami hamarabb jött létre, így több plugint kínál, viszont a Gulp más irányból közelített meg sok dolgot és gyors iramban elkezdett felzárkózni. Számos összehasonlító cikk és sebességteszt jelent meg a két eszközről, ahol kiemelik a Gulp gyorsaságát és könnyebb használhatóságát.

A Gulp tulajdonképpen egy Node.js csomag, így futtatásához elengedhetetlen, hogy telepítve legyen. Legyen az egy egyszerű feladat, élesítés előtti optimalizálás vagy folyamatosan futó, a változásokat figyelő folyamat, tökéletes megoldást nyújt a Gulp, a feladatokat összefűzve, feltételhez kötve vagy akár bonyolult módon felépítve.

Az eszköz használatát leginkább pár példán keresztül lehet megérteni, jöjjenek most ezek.

Gulp telepítése és alapok beállítása

1. Gulp package globális telepítése

npm install -g gulp 

2. Gulp telepítése a projektünkbe, és függőség beállítása

npm install gulp --save-dev 

3. A gulpfile.js létrehozása a projekt könyvtárunk gyökerébe

var gulp = require('gulp');

gulp.task('default', function() {
 console.log('Hello from Gulp!');
});

Ha nem vagy tisztában, mit is jelent a pontosan a Node.js függőségek beállítása, a linken hasznos tudnivalókat találsz ezzel kapcsolatban. Ezzel a pár lépéssel már rendelkezésedre is áll az eszköz és nincs más hátra, minthogy létrehozz futtatható feladatokat. Számos leírás található kész megoldásokkal, de érdemes böngészni az elérhető pluginok között is.

Alkalmanként futtatható taskok

Vannak olyan folyamatok, amiket nem szükséges minden módosítás után lefuttatnod, tipikusan ilyenek a kódminőség ellenőrző eszközök (csshint, jslint), nyelvi fájl generátorok (gettext függvénytár, po/pot generálás) vagy különböző reportot készítő scriptek (plato).

var jshint = require('gulp-jshint');
var csslint = require('gulp-csslint');
var gulp   = require('gulp');

// $ gulp jshint
gulp.task('jshint', function() {
 return gulp.src('./lib/*.js')
   .pipe(jshint())
   .pipe(jshint.reporter());
});

// $ gulp csslint
gulp.task('csslint', function() {
 gulp.src('./css/*.css')
   .pipe(csslint())
   .pipe(csslint.reporter());
});

// $ gulp 
gulp.task('default', ['csslint','jshint']);

Folyamatos figyelés

Egyes fájlokat folyamatosan figyelő és azok módosulásakor megadott taszkokat lefuttató folyamatok kezeléséhez a watch funkciót kell igénybe venned. Ez tulajdonképpen egy véget nem érő streamet hoz létre, aminek a futását manuálisan kell megszakítanod. A legjobb példa ezekre a folyamatokra a CSS és JavaScript preprocesszorok igénybe vétele.

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

gulp.task('sass', function() {
    return gulp.src('./sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

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

gulp.task('default', ['sass', 'watch']);

Deploy, avagy élesítés

Minden oldal esetében fontos annak betöltődési sebessége, amihez már régóta léteznek bevett módszerek. Tömörítjük a képeket, megtisztítjuk a kódot a felesleges kommentektől és debug funkcióktól, összefűzzük a CSS és JS fájlokat, majd ráengedjük a minify tool-t. A Gulp megfelelő konfigurlálásával ezt egy parancs kiadásával véghez viheted, könnyen és egyszerűen.

var gulp = require('gulp');
var concat = require('gulp-concat')
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var svgmin = require('gulp-svgmin');
var imagemin = require('gulp-imagemin');

gulp.task('process-js', function(){
    gulp.src('./app/js/*.js')
.pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));
});

gulp.task('process-css', function(){
    gulp.src('./app/css/*.css')
    .pipe(concat('app.css'))
    .pipe(minifycss())
    .pipe(gulp.dest('./build/'));
});

gulp.task('process-svg', function() {
    gulp.src('./app/img/*.svg')
    .pipe(svgmin())
    .pipe(gulp.dest('./build/img/svg'));
});

gulp.task('process-img', function () {
    gulp.src(['./app/img/*', '!./app/img/*.svg'])
    .pipe(imagemin())
    .pipe(gulp.dest('./build/img'));
});

gulp.task('deploy', ['process-css', 'process-js',
'process-svg', 'process-img']);

Egyéb hasznos pluginek

Végigböngésztem az összes elérhető plugint és jópár hasznos darabot találtam köztük, amik használatát kíváncsian várom, vagy már napi szinten alkalmazom is. Egyik ígéretes lehetőség az ftp / sftp kapcsolaton keresztül feltöltést megvalósító plugin, ami folyamatos fejlesztés és élesítés esetén roppant módon megkönnyítheti a munkád. Ha szeretnéd elkerülni, hogy ne maradjanak „todo”-k a kódodban, akkor könnyen rájuk tudsz keresni a forráskódban (vagy akár más stringre is) a check plugin alkalmazásával, továbbá érdekes és hasznos információkat kaphatsz a forráskódunkról a Plato által generált reportot tanulmányozva.

A fenti példák csak nagyon kis részét fedik le a Gulp nyújtotta lehetőségeknek. Ha érdekesnek találod, csak bíztatni tudlak, hogy nézz utána, hiszen jól összerakott feladatokkal nagy mértékben növelheted hatékonyságodat és megkönnyítheted a fejlesztésed menetét, továbbá növelheted kódbázisod minőségét!