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