Dezvoltarea unei aplicatii

In articolul anterior am vorbit despre instalare si cateva chestii de baza despre Gulp.

In acest articol am sa va vorbesc despre cum putem folosi aceste cunostinte. Iata ce invatam in acest articol:

• Declararea de dependente
• Crearea de tas-uri
• Rularea de task-uri

Declararea de dependente

Cand instalam un plugin pentru aplicatie trebuie sa specificam dependentele acestuia. De aceste dependente se ocupa package managerul.

Hai sa luam ca exemplu un plugin numit gulp-imagemin pentru a defini dependetele lui in fisierul de configurare.  Acest plugin poate fi folosit pentru a comprima imagini si poate fi instalat ruland urmatoarea linie in terminal:

npm install gulp-imagemin --save-dev

Poti adauga aceste dependente in fisierul de configurare astfel:

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

Crearea de task-uri pentru dependente

Putem configura Gulp intr-un mod modular, trebuie sa creeam cate un task pentru fiecare dependenta, astfel incat de fiecare data cand adaugam cate o dependenta sa putem intelege ce am scris acolo.

gulp.task('nume-task', function(){
     //codul ajunge aici
});

Unde nume-task este un nume, iar fuctia iti ruleaza task-ul. 'gulp.task' inregistreaza functia ca un task si seteaza dependentele altor task-uri.

Putem seta un task pentru plugin-ul instalat mai sus astfel:

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));});

Am stabilit mai devreme ca imaginile sunt salvate in src/images/**/*, adica in img_src. Acestea ajung in constructorul imagemin, sunt comprimate si copiaza rezultatul in img_dest (adica build/images).

Rularea task-ului

Suntem gata de executie. Acum rulam urmatoarea comanda in folderul proiectului:

gulp imagemin