Reloading browser with Gulp browser-sync

Automating Tasks

gulp-1

In this article, we will see how watch method and browerSync help us to automate some repeated task like pre-processing. We will extend the gulp project we have created in previous articles.

Gulp provide watch method watch out for a file being saved, once a file is saved it call cited gulp task. Gulp watch method comes with gulp module since there is no need to install any npm_modules.

A typical gulp watch method seems as follows

gulp.task( 'files to watch out for change', [ tasks need to run ] )

We will create a gulp watch task as we created the gulp-sass task in the previous article.

gulp.task('watch', function(){
     gulp.watch('app/scss/*.sass', ['sass']);
});

The ‘*’ in front of ‘.sass’ file extension indicates any file that has the extension of ‘.sass’, in real time we will need to watch more than one file to run a specific task. Run the watch task and make a change on sass file we have on app folder, once we save the change in SASS file, CSS file will be updated instantly.

Note: Don’t delete the task sass which we created in the previous article, just paste the above watch task code below to the sass method.

Now everything is fine, we have created a SASS file and automated its compile process, but to make sure that the style is written properly we should head over to the browser and need to reload, Gulp provide us browser-sync plugin to automate this process, watch method observes file change and calls stated tasks, those tasks tells browser-sync to reload the browser page once they complete their task.

First, we will install gulp plugin browser-sync from npm_modules.

npm install browser-sync --save-dev

Create a variable to use browser-sync module.

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

Next, we will create browser-sync task on gulpfile.js, at the end of each task the root of the server should be reloaded (in simple the folder where we have placed the index file), that folder should be mentioned base directory on the browser-sync task. A typical browser-sync task looks like the following

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

We also need to change the sass task since the browser-sync will update the CSS in the browser. Make change on sass task as mentioned below

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.sass') 
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

Finally, we should also do some tweaks on watch task, previously we have created watch task with the single argument and call back function, now will add up the second argument which is typically an array which has the list of task names those tasks will be executed before the watch task is initiated.

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
});

Everything is ready for now, all we need to do is testing our project by running the following command

gulp watch

Here look the change happens in the browser whenever the sass file is modified.

gulp

We will examine few more plugins in the upcoming article.

Happy coding 🙂