Search code examples
cssgulpbrowser-syncgulp-watch

Gulp - BrowserSync doesn't reload page

I'm following a basic tutorial for Gulp from here and I got stuck on the browser-sync implementation. I have copied the code exactly as it is in the example, however when I run the watch task, even though sass task executes no problem (new version of the css file is created), the browser doesn't want to refresh! Here is my code:

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

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

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

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

And here is my index.html

<!doctype html>
<html>
    <head>  
        <title>test</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

My styles.scss files has only one style:

body {
    background: blue;
}

And here is the output from the console window when I update the styles.scss

enter image description here

So I can see that the browser-sync is aware of the change being made, but it doesn't reload the page in the browser. Why is that? I have looked through the comments under the tutorial and no one seemed to face similar issue. I have also seen couple of other tutorials, but none of them works for me. I use latest version of chrome as my default browser, browser-sync version 5.6.0 and gulp version 3.9.1

Solution

  • I've never heard of piping files through browserSync.reload as a way to reload the dev server, and couldn't find any examples of that particular technique in the browserSync documentation. That doesn't necessarily mean that the method is invalid, but maybe the API has changed since CSS-Tricks published their tutorial in 2015? Three years can be an eternity in tooling time.

    Anyway, I know I've used Gulp/browserSync/SASS successfully before so I dug up the code relevant to your situation from one of my old gulpfiles.

    //watch task
gulp.task('watch', function () {
    //spin up dev server
    browserSync.init({
        server: {
            baseDir: "./"
        },
    });

    //when scss files change, run sass task first and reload browserSync second
    gulp.watch('./sass/*.scss', ['sass']).on('change', function () {
        browserSync.reload();
    });

});

//call watch task
gulp.task('default', ['watch']);

    Basically when you call the watch task it immediately spins up the development server and then listens for changes to your scss files. When a change is detected, it calls the sass task as a dependency and runs whatever code you have for preprocessing (which you said is currently working in your file). After the sass task is completed, browserSync.reload is called via the .on method.

    I haven't used this particular configuration in awhile but let me know if it works and if not I'd be happy to troubleshoot it with you. It's good boilerplate for any dev to have on hand.

    EDIT: The above snippet was taken from a much larger gulpfile and upon second inspection I identified some parts that prevented it from working in a standalone context. Edited snippet to correct this.