Wsrtjtyk

Problem:
I am running Gulp 3.9.1 with BrowserSync 2.26.3. Everything works fine when I compile SASS and JS files. But after awhile, when I make changes to the Twig files BrowserSync stops working and remain stuck, displaying the message: "Reloading Browsers…".

Temporary Solution:
I need to restart the default gulp task again to make it work. Here is gulpfile

var gulp            = require('gulp'),

    sass            = require('gulp-sass'),

    autoprefixer    = require('gulp-autoprefixer'),

    concat          = require('gulp-concat'),

    uglify          = require('gulp-uglify-es').default,

    browserSync     = require('browser-sync').create(),

    plumber         = require('gulp-plumber');

    Promise         = require('es6-promise').Promise;

    jquery          = require("jquery");



var projectName = 'MYPROJECTNAME';



var paths = {

    twig:                   'wp-content/themes/' + projectName + '/views/**/*.twig',

    php:                    'wp-content/themes/' + projectName + '/**/*.php',

    yml:                    'wp-content/themes/' + projectName + '/**/*.yml',

    sass:                   'wp-content/themes/' + projectName + '/scss/**/*.scss',

    js:                     'wp-content/themes/' + projectName + '/js/**/*.js',

    cssOutputRoot:          'wp-content/themes/' + projectName + '',

    cssOutput:              'wp-content/themes/' + projectName + '',

    jsOutput:               'wp-content/themes/' + projectName + ''

};



var jsFiles = [

    'node_modules/jquery/dist/jquery.min.js',

    'node_modules/foundation-sites/dist/js/foundation.min.js',

    'wp-content/themes/' + projectName + '/js/app.js'

];



var sassFiles = [

    'wp-content/themes/' + projectName + '/scss/style.scss'

];



gulp.task('css', function () {

    gulp.src(sassFiles)

        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))

        .pipe(autoprefixer())

        .pipe(concat('style.css'))

        .pipe(gulp.dest(paths.cssOutputRoot))

        .pipe(browserSync.reload({

            stream: true

        }));

});



gulp.task('js', function() {

    gulp.src(jsFiles)

        .pipe(plumber(function(error){

            console.log("Error happend!", error.message);

            this.emit('end');

        }))

        .pipe(uglify())

        .pipe(concat('app.js'))

        .pipe(gulp.dest(paths.jsOutput))

        .pipe(browserSync.reload({

            stream: true

        }));

});



gulp.task('browserSync', function() {

    browserSync.init({

        proxy: 'localhost/' + projectName,

        notify: false

    });

});



gulp.task('default', ['browserSync','css','js'], function() {

    gulp.watch(paths.sass, ['css']);

    gulp.watch(paths.js, ['js']);

    gulp.watch(paths.twig, browserSync.reload);

    gulp.watch(paths.php, browserSync.reload);

    gulp.watch(paths.yml, browserSync.reload);

});