Browser-sync not updating changes in browser

[adolfojbarreto]

When I hit save on my project it builds everything fine. My browser blinks and says "Connected to Browser-sync" on the upper right hand corner. It does not load the changes though. When I manually hit refresh, on chrome, it will load the changes. I've been up and down the gulp file and can find nothing wrong. Any advice?

I reached out to the folks at gulp.js: https://github.com/gulpjs/gulp/issues/1489 and they refered me here.

This is my gulp.js file:

var $ = require('gulp-load-plugins')(); var argv = require('yargs').argv; var browser = require('browser-sync'); var gulp = require('gulp'); var panini = require('panini'); var rimraf = require('rimraf'); var sequence = require('run-sequence'); var sherpa = require('style-sherpa');

// Check for --production flag var isProduction = !!(argv.production);

// Port to use for the development server. var PORT = 8000;

// Browsers to target when prefixing CSS. var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];

// File paths to various assets are defined here. var PATHS = { assets: [ 'src/assets//_', '!src/assets/{img,js,scss}//' ], sass: [ 'bower_components/foundation-sites/scss', 'bower_components/motion-ui/src/' ], javascript: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/what-input/what-input.js', 'bower_components/foundation-sites/js/foundation.core.js', 'bower_components/foundation-sites/js/foundation.util..js', // Paths to individual JS components defined below 'bower_components/foundation-sites/js/foundation.abide.js', 'bower_components/foundation-sites/js/foundation.accordion.js', 'bower_components/foundation-sites/js/foundation.accordionMenu.js', 'bower_components/foundation-sites/js/foundation.drilldown.js', 'bower_components/foundation-sites/js/foundation.dropdown.js', 'bower_components/foundation-sites/js/foundation.dropdownMenu.js', 'bower_components/foundation-sites/js/foundation.equalizer.js', 'bower_components/foundation-sites/js/foundation.interchange.js', 'bower_components/foundation-sites/js/foundation.magellan.js', 'bower_components/foundation-sites/js/foundation.offcanvas.js', 'bower_components/foundation-sites/js/foundation.orbit.js', 'bower_components/foundation-sites/js/foundation.responsiveMenu.js', 'bower_components/foundation-sites/js/foundation.responsiveToggle.js', 'bower_components/foundation-sites/js/foundation.reveal.js', 'bower_components/foundation-sites/js/foundation.slider.js', 'bower_components/foundation-sites/js/foundation.sticky.js', 'bower_components/foundation-sites/js/foundation.tabs.js', 'bower_components/foundation-sites/js/foundation.toggler.js', 'bowercomponents/foundation-sites/js/foundation.tooltip.js', 'src/assets/js/*/!(app).js', 'src/assets/js/app.js' ] };

// Delete the "dist" folder // This happens every time a build starts gulp.task('clean', function(done) { rimraf('dist', done); });

// Browser Sync wrapper task // allows for proper injection of css files gulp.task('reload', function(cb) { browser.reload(); cb(); });

// Copy files out of the assets folder // This task skips over the "img", "js", and "scss" folders, which are parsed separately gulp.task('copy', function() { return gulp.src(PATHS.assets) .pipe(gulp.dest('dist/assets')); });

// Copy page templates into finished HTML files gulp.task('pages', function() { return gulp.src('src/pages/*/.{html,hbs,handlebars}') .pipe(panini({ root: 'src/pages/', layouts: 'src/layouts/', partials: 'src/partials/', data: 'src/data/', helpers: 'src/helpers/' })) .pipe(gulp.dest('dist')); });

gulp.task('pages:reset', function(cb) { panini.refresh(); gulp.run('pages', cb); });

gulp.task('styleguide', function(cb) { sherpa('src/styleguide/index.md', { output: 'dist/styleguide.html', template: 'src/styleguide/template.html' }, cb); });

// Compile Sass into CSS // In production, the CSS is compressed gulp.task('sass', function() { var uncss = $.if(isProduction, $.uncss({ html: ['src/*/.html'], ignore: [ new RegExp('^meta..'), new RegExp('^.is-.') ] }));

var minifycss = $.if(isProduction, $.minifyCss());

return gulp.src('src/assets/scss/app.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ includePaths: PATHS.sass }) .on('error', $.sass.logError)) .pipe($.autoprefixer({ browsers: COMPATIBILITY })) .pipe(uncss) .pipe(minifycss) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/css')) .pipe(browser.reload({stream: true})); });

// Combine JavaScript into one file // In production, the file is minified gulp.task('javascript', function() { var uglify = $.if(isProduction, $.uglify() .on('error', function (e) { console.log(e); }));

return gulp.src(PATHS.javascript) .pipe($.sourcemaps.init()) .pipe($.concat('app.js')) .pipe(uglify) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/js')); });

// Copy images to the "dist" folder // In production, the images are compressed gulp.task('images', function() { var imagemin = $.if(isProduction, $.imagemin({ progressive: true }));

return gulp.src('src/assets/img/*/') .pipe(imagemin) .pipe(gulp.dest('dist/assets/img')); });

// Build the "dist" folder by running all of the above tasks gulp.task('build', function(done) { sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done); });

// Start a server with LiveReload to preview the site in gulp.task('server', ['build'], function() { browser.init({ server: 'dist', port: PORT }); });

// Build the site, run the server, and watch for file changes gulp.task('default', ['build', 'server'], function() { gulp.watch(PATHS.assets, ['copy', 'reload']); gulp.watch(['src/pages//.html'], ['pages', 'reload']); gulp.watch(['src/{layouts,partials}//.html'], ['pages:reset', 'reload']); gulp.watch(['src/assets/scss//.scss'], ['sass']); gulp.watch(['src/assets/js//.js'], ['javascript', 'reload']); gulp.watch(['src/assets/img//'], ['images', 'reload']); gulp.watch(['src/styleguide/*'], ['styleguide', 'reload']); });

Thanks - Adolfo

[adolfojbarreto]

This was resolved by Zurb-foundation. Thanks - Adolfo

[TimLavelle]

What was the fix?

[adolfojbarreto]

Hi, No that was not the fix. this was the fix:

var $ = require('gulp-load-plugins')(); var argv = require('yargs').argv; var browser = require('browser-sync'); var gulp = require('gulp'); var panini = require('panini'); var rimraf = require('rimraf'); var sequence = require('run-sequence'); var sherpa = require('style-sherpa');

// Check for --production flag var isProduction = !!(argv.production);

// Port to use for the development server. var PORT = 8000;

// Browsers to target when prefixing CSS. var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];

// File paths to various assets are defined here. var PATHS = { assets: [ 'src/assets/*/', '!src/assets/{img,js,scss}//_' ], sass: [ 'bower_components/foundation-sites/scss', 'bower_components/motion-ui/src/' ], javascript: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/what-input/what-input.js', 'bower_components/foundation-sites/js/foundation.core.js', 'bowercomponents/foundation-sites/js/foundation.util..js', // Paths to individual JS components defined below 'bower_components/foundation-sites/js/foundation.abide.js', 'bower_components/foundation-sites/js/foundation.accordion.js', 'bower_components/foundation-sites/js/foundation.accordionMenu.js', 'bower_components/foundation-sites/js/foundation.drilldown.js', 'bower_components/foundation-sites/js/foundation.dropdown.js', 'bower_components/foundation-sites/js/foundation.dropdownMenu.js', 'bower_components/foundation-sites/js/foundation.equalizer.js', 'bower_components/foundation-sites/js/foundation.interchange.js', 'bower_components/foundation-sites/js/foundation.magellan.js', 'bower_components/foundation-sites/js/foundation.offcanvas.js', 'bower_components/foundation-sites/js/foundation.orbit.js', 'bower_components/foundation-sites/js/foundation.responsiveMenu.js', 'bower_components/foundation-sites/js/foundation.responsiveToggle.js', 'bower_components/foundation-sites/js/foundation.reveal.js', 'bower_components/foundation-sites/js/foundation.slider.js', 'bower_components/foundation-sites/js/foundation.sticky.js', 'bower_components/foundation-sites/js/foundation.tabs.js', 'bower_components/foundation-sites/js/foundation.toggler.js', 'bower_components/foundation-sites/js/foundation.tooltip.js', 'src/assets/js//!(app).js', 'src/assets/js/app.js' ] };

// Delete the "dist" folder // This happens every time a build starts gulp.task('clean', function(done) { rimraf('dist', done); });

// Copy files out of the assets folder // This task skips over the "img", "js", and "scss" folders, which are parsed separately gulp.task('copy', function() { return gulp.src(PATHS.assets) .pipe(gulp.dest('dist/assets')); });

// Copy page templates into finished HTML files gulp.task('pages', function() { return gulp.src('src/pages/*/.{html,hbs,handlebars}') .pipe(panini({ root: 'src/pages/', layouts: 'src/layouts/', partials: 'src/partials/', data: 'src/data/', helpers: 'src/helpers/' })) .pipe(gulp.dest('dist')) .on('finish', browser.reload); });

gulp.task('pages:reset', function(done) { panini.refresh(); gulp.run('pages'); done(); });

gulp.task('styleguide', function(done) { sherpa('src/styleguide/index.md', { output: 'dist/styleguide.html', template: 'src/styleguide/template.html' }, function() { browser.reload; done(); }); });

// Compile Sass into CSS // In production, the CSS is compressed gulp.task('sass', function() { var uncss = $.if(isProduction, $.uncss({ html: ['src/*/.html'], ignore: [ new RegExp('^meta..'), new RegExp('^.is-.') ] }));

var minifycss = $.if(isProduction, $.minifyCss());

return gulp.src('src/assets/scss/app.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ includePaths: PATHS.sass }) .on('error', $.sass.logError)) .pipe($.autoprefixer({ browsers: COMPATIBILITY })) .pipe(uncss) .pipe(minifycss) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/css')) .pipe(browser.reload({ stream: true })); });

// Combine JavaScript into one file // In production, the file is minified gulp.task('javascript', function() { var uglify = $.if(isProduction, $.uglify() .on('error', function (e) { console.log(e); }));

return gulp.src(PATHS.javascript) .pipe($.sourcemaps.init()) .pipe($.concat('app.js')) .pipe(uglify) .pipe($.if(!isProduction, $.sourcemaps.write())) .pipe(gulp.dest('dist/assets/js')) .on('finish', browser.reload); });

// Copy images to the "dist" folder // In production, the images are compressed gulp.task('images', function() { var imagemin = $.if(isProduction, $.imagemin({ progressive: true }));

return gulp.src('src/assets/img/*/') .pipe(imagemin) .pipe(gulp.dest('dist/assets/img')) .on('finish', browser.reload); });

// Build the "dist" folder by running all of the above tasks gulp.task('build', function(done) { sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done); });

// Start a server with LiveReload to preview the site in gulp.task('server', ['build'], function() { browser.init({ server: 'dist', port: PORT }); });

// Build the site, run the server, and watch for file changes gulp.task('default', ['build', 'server'], function() { gulp.watch(PATHS.assets, ['copy']); gulp.watch(['src/pages//'], ['pages']); gulp.watch(['src/{layouts,partials,helpers,data}//_'], ['pages:reset']); gulp.watch(['src/assets/scss//{.scss, .sass}'], ['sass']); gulp.watch(['src/assets/js//_.js'], ['javascript']); gulp.watch(['src/assets/img//'], ['images']); gulp.watch(['src/styleguide/'], ['styleguide']); });

Got it from here: https://github.com/zurb/panini/issues/10#issuecomment-172692241 ...hope that helps.

[TimLavelle]

That did it, thanks!

[adolfojbarreto]

Your welcome!

[tenkasian]

Dear adolfojbarreto, I am a novice! I also face the same problem that my browser does not update the changes that I save in my index.html file, but refreshing the browser shows the changes already saved. What am I to do? I would appreciate receiving the reply to my email [so that I do not lose track of your reply. Thaanks in advance. Balakrishnan tenkasian at hotmail dot com