Search code examples
node.jsgulp-watchbrowser-sync

BrowserSync only firing in Gulp once on watch, but not on subsequent changes

I am following this tutorial, but having trouble getting browserSync to fire when I make CSS changes.

If I call gulp watch it reloads one time, and the SASS compiles to CSS automatically, but browserSync does not fire on change.

The below gist is the entire gulpfile.js

https://gist.github.com/RyanNovas/c940324270b57754e487

Solution

  • Looks like you are missing 

    var watch  = require('gulp-watch');

    not sure why that wouldn't throw an error. Anyway.

    Here's a chunk of the below gulpfile, with relevant stuff.

    // Gulpfile
var gulp            = require('gulp');
var watch           = require('gulp-watch');

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

// define the default task, call 'serve'.
gulp.task('default', ['serve']);

// Use BrowserSync to fire up a localhost server and start a livereload. We
// inject CSS changes, and reload fully for javascript and html changes.
// http://www.browsersync.io/docs/options/
gulp.task('serve', ['sass', 'webpack'], function() {

    browserSync.init({
        server: "./",
        notify: false,
        reloadOnRestart: true,
        open: false,
    });

    // scss
    gulp.watch("./css/sass/*.scss", ['sass']);
    gulp.watch("./javascript/app/**/*.scss", ['sass']);
    gulp.watch("./css/styles.css").on('change', reload);

    // html
    gulp.watch("./index.html").on('change', reload);
    gulp.watch("./javascript/app/**/*.html").on('change', reload);

    // js
    gulp.watch('./javascript/app/**/*.js', ['webpack']);
    gulp.watch('./javascript/dist/**/*.js').on('change', reload);

});