Gulp browsersync gets stuck reloading browser

Question

I am trying to streamline my workflow and include templating. I installed Nunjucks and tried to set it up so whenever I save a change to a template file gulp watch will fire the nunjucks function and refresh my browser.(firefoxdeveloperedition)

It works at first, but then my browser stops reloading the changes. Every time I save the browser will refresh but the changes do not appear. Here is my gulpfile(i removed the other tasks from this but keep the requirements in so you can see the modules i have installed)

/* Module Requirements */
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var nunjucksRender = require('gulp-nunjucks-render');
/* //Module Requirements */



//Compile sass into css
gulp.task('sass', function(){
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))    
});

gulp.task('nunjucks', function() {
  // Gets .html and .nunjucks files in pages
  return gulp.src('app/pages/**/*.+(html|nunjucks)')
  // Renders template with nunjucks
  .pipe(nunjucksRender({
      path: ['app/templates']
    }))
  // output files in app folder
  .pipe(gulp.dest('app'))
});


//Watch for changes in sass and html and update browser.
gulp.task('watch', ['browserSync', 'sass', 'nunjucks'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  gulp.watch('app/templates/**/*.+(html|nunjucks)', ['nunjucks']);  
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload);   
  // Other watchers
});

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

Is my code wrong?

EDIT: After some more testing it actually seems to be tied to Firefox Developer Edition...

Gulp browsersync gets stuck reloading browser

0 Answers0