Live Reloading with Browser Sync

Previous
Quiz
Next

Live Reload specifies the changes in the file system. The BrowserSync is used to watch all HTML and CSS files in the css directory and performs the live reload to the page in all browsers whenever files were changed. BrowserSync makes workflow faster by synchronizing URL's, interactions and code changes across multiple devices.

Installing BrowserSync Plugin

The BrowserSync plugin gives you cross browser CSS injecting and can be installed by using below command:

npm install browser-sync --save-dev

Configuring BrowserSync Plugin

To use BrowserSync plugin, you need to write dependency in your configuration file as shown below: 

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

You need to create task for BrowserSync to work with server using Gulp. Since you are running server, so you need to tel BrowserSync about the root of your server. Here, we are using base directory as 'build'.

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

You can also inject new styles into the browser by using below task for CSS file:

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
    }))
});

Before creating task for BrowserSync, you need to install the plugins using package manager and write dependencies in your configuration file as defined in this chapter.

When you are done with configuration, run the both browserSync and watch tasks for the occurrence of live reloading effect. Instead of running two command lines separately, we will run them together by adding browserSync task along with the watch task as shown below:

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

Just run the following command in your project directory to execute the above combined tasks:

gulp

After running the task by using the above command, you will get to see below result in the command prompt: 

C:\project>gulp
[13:01:39] Using gulpfile C:\project\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

It will open the browser window with the URL http://localhost:3000/. Any changes made to the CSS file, will reflect in the command prompt and browser reloads automatically with the changed styles.

Print Page
Previous
Next
Advertisements