Dezvoltarea unei aplicatii

postat acum 2 ani de Stefanescu Mihai in categorie Gulp

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

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group

Comentariu postate de yeezy boost 350 v2 la data de 17.05.2019
I want to convey my love for your kind-heartedness for those people that have the need for help on the area of interest. Your special dedication to getting the message all around had been particularly powerful and has permitted somebody just like me to realize their dreams. Your new valuable report denotes so much a person like me and much more to my colleagues. Thanks a lot; from everyone of us.
Comentariu postate de nike air max la data de 17.05.2019
I together with my guys have been going through the best tricks found on your web blog and then immediately got an awful feeling I had not expressed respect to the web site owner for them. These ladies happened to be stimulated to see them and have in effect certainly been using them. Thank you for actually being so kind and then for finding varieties of excellent information most people are really eager to learn about. My personal honest regret for not expressing gratitude to sooner.