Despre Live Reload

BrowserSync este folosit pentru a urmari schimbarile din fisierele HTML si CSS si sa faca refresh paginii din browser cand acestea se schimba.

Instalare BrowserSync

Acest plugin poate face cross-browser css injection. Poate fi instalat cu urmatoarea comanda:

npm install browser-sync --save-dev

Configurare BrowserSync

Pentru a putea folosi BrowserSync trebuie sa mai scriem ceva in fisierul de configurare:

var browserSync = require('browser-sync').create();

Trebuie sa facem un task si pentru BrowserSync astfel incat sa il folosim alaturi de Gulp. Din moment ce rulam gulp trebuie sa setam si pentru BrowserSync unde este proiectul:

gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })})

Putem injecta noile stiluri in browser folosind si task-ul pentru CSS-uri:

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))});

Inainte de a face un task si pentru BrowserSync trebuie sa instalam plugin-ul si sa ii facem o dependinta, exact cum v-am artat in articolele precedente din serie.

Cand ati terminat cu configurarea, rulam browserWatch odata cu watch astfel incat sa apara reloading-ul la modificari.

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);});   

Rulam urmatoarea comanda:

gulp

Dupa rularea comenzii primim urmatorul raspuns in consola:

C:\invata-programare>gulp
[13:01:39] Using gulpfile C:\invata-programare\gulpfile.js
[13:01:39] Starting 'browserSync'...[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------[BS] Serving files from: build

Va deschide browser-ul catre localhost:3000 si la orice schimbare din cod va face reload paginii.