Despre metoda watch

postat acum 2 ani de Stefanescu Mihai in categorie Gulp

Metoda Watch este folosita pentru a-ti monitoriza fisierele sursa. Cand apare o schimbare in fisier, task-ul necesar va fi rulat automat. Putem folosi task-ul default scris mai devreme pentru a monityoriza schimbarile din HTML, CSS si JavaScript.

Cum facem watch petaskul Default

In articolul trecut am discutat despre cum putem combina task-urile folosindu-ne de un 'task' default. Am folosit gulp-minify-css, gulp-autoprefixer si gulp-concat pentru a face un task numit 'styles' ce va face minify pe fisierele CSS.

Pentru a urmari modificarile din CSS trebuie sa modificam putin codul din task-ul default:

gulp.task('default', ['styles'], function() {
   // urmarim modificarile din CSS
   gulp.watch('src/styles/*.css', function() {
      // rulam styles cand se modifica ceva
      gulp.run('styles');
   });});

Acum toate fisierele din  invata-programare/src/styles sunt urmarite pentru orice schimbare si comanda styles va fi executata.

Rularea taskului Default

Pentru a rula acest task default folosim comanda aceasta:

gulp

Dupa ce am executat comanda ne va fi afisat mesajul acetsa

C:\invata-programare>gulp
[17:11:28] Using gulpfile C:\invata-programare\gulpfile.js
[17:11:28] Starting 'styles'...[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...[17:11:28] Finished 'default' after 21 ms

Cand apare o schimbare o sa vedem acest mesaj:

C:\invata-programare>gulp
[17:11:28] Using gulpfile C:\invata-programare\gulpfile.js
[17:11:28] Starting 'styles'...[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.[17:18:46] Starting 'styles'...[17:18:46] Finished 'styles' after 5.1 ms

Acest proces va ramane activ si va raspunde la orice schimbare a fisierelor din folder. Pentru a opri acest proces apasam Ctrl+C

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