Gulp - Live Reload

Live Reload specifies the changes in the file system. BrowserSync is used to watch all HTML and CSS files in the CSS directory and perform live reload to the page in all browsers, whenever files are changed. BrowserSync makes the workflow faster by synchronizing URLs, interactions, and code changes across multiple devices.

Installing BrowserSync Plugin

The BrowserSync plugin provides cross-browser CSS injection and can be installed using the following 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 in the following command.

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 using the following 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 the configuration, run both BrowserSync and watchTask for the occurrence of live reloading effect. Instead of running two command lines separately, we will run them together by adding browserSynctask along with the watchTask as shown in the following code.

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

Run the following command in your project directory to execute the above combined tasks.

gulp

After running the task using the above command, you will get the following 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.

Advertisements