Despre Live Reload

postat acum 2 ani de Stefanescu Mihai in categorie Gulp

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.

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 bape hoodie la data de 18.05.2019
I wish to express some thanks to the writer just for bailing me out of this type of dilemma. Right after checking throughout the online world and finding things that were not pleasant, I assumed my entire life was gone. Being alive without the approaches to the difficulties you have resolved by means of your main website is a critical case, as well as the ones which may have badly affected my career if I hadn't noticed your site. Your primary ability and kindness in maneuvering the whole thing was priceless. I don't know what I would have done if I hadn't come upon such a thing like this. It's possible to at this time look ahead to my future. Thank you so much for the professional and results-oriented guide. I won't be reluctant to propose the sites to any person who should have tips on this topic.