Browsersync not syncing scroll

Question

I am new to gulp and I'm trying to get browser-sync working. It seems to work fine except that the syncronised scroll is not working. Can anyone see what might be wrong with my setup.

var gulp = require('gulp'),
    jade = require('gulp-jade'),
    uglify = require('gulp-uglify'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    livereload = require('gulp-livereload'),
    browserSync = require('browser-sync');

var outputDir = "builds/development";

gulp.task('jade', function() {
    return  gulp.src('src/templates/**/*.jade')
        .pipe(jade())
        .pipe(gulp.dest(outputDir))
        .pipe(livereload());
});

// Js - to uglify use gulp js --type production ( or just leave out js to build everything )
gulp.task('js', function() {
    return gulp.src('src/js/main.js')
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(gulp.dest(outputDir + '/js'))
        .pipe(livereload());
});

// Sass - to compress use gulp sass --type production ( or just leave out sass to build everything )
gulp.task('sass', function() {
    var config = {};
    if ( gutil.env.type === 'production') {
        config.outputStyle = 'compressed';
    }
    return gulp.src('src/sass/main.scss')
        .pipe(sass(config))
        .pipe(gulp.dest(outputDir + '/css'))
        .pipe(livereload());
});

// Browser Sync ( not working 100% ... not scrolling )
gulp.task('browser-sync', function() {
    browserSync({
        proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
    });
});




// Watch
gulp.task('watch', function() {
    gulp.watch('src/templates/**/*.jade', ['jade']);
    gulp.watch('src/js/**/*.js', ['js']);
    gulp.watch('src/sass/**/*.scss', ['sass']);
});


gulp.task('default', ['jade', 'js', 'sass', 'watch', 'browser-sync'], function () {
    gulp.watch("js/*.js", ['js', browserSync.reload]);
});

Do you have any (socket.io) errors in your browser's console after loading the browser-synced page? Also I don't think you need to use livereload in conjunction with browserSync (not sure if that can cause the problem). Use browserSync.reload instead as described here: http://www.browsersync.io/docs/gulp/ — Kalle Björklid, Jan 04 '15 at 17:03

score 3 · Accepted Answer · answered Jan 04 '15 at 17:26

Your issue might be related to watching with both Gulp and BrowserSync. Here is a good reference to that:

"You shouldn't watch files with BrowserSync + Gulp" https://github.com/shakyShane/gulp-browser-sync/issues/16#issuecomment-43597240

So you would probably want remove livereload (let BrowserSync handle everything) and change your default Gulp task to something like this:

gulp.task('default', ['jade', 'js', 'sass', 'browser-sync'], function () {
    gulp.watch('src/templates/**/*.jade', ['jade', browserSync.reload]);
    gulp.watch('src/js/**/*.js', ['js', browserSync.reload]);
    gulp.watch('src/sass/**/*.scss', ['sass', browserSync.reload]);
});

You could also try setting scroll explicitly (but it defaults to true anyway):

gulp.task('browser-sync', function() {
    browserSync({
        proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
        ghostMode: {
          scroll: true
        }
    });
});

Awarding the tick as you're prob right I shouldn't have live reload in twice but I think I had multiple issues. my index file in the builds/development folder `... gulptutorial/builds/development/` and specifying the location in `proxy: ` was a problem. I put a html file in the same dir as gulpfile and set proxy to `http://localsandbox.dev/gulptutorial/` and it worked fine, dont know why ... I'm late for a deadline so no time to investigate now ... maybe you know and would like to comment ... thanks anyway its working now — byronyasgur, Jan 05 '15 at 18:06

clementducerf · Answer 2 · 2018-12-05T11:30:59.230

0

I had the same problem and that was because I had a javascript function called scrollTo declared in my own code, which was interfering with browserSync code. All I needed to do is to rename that function, and the browsersync scrolling was working again.

edited Dec 05 '18 at 11:30

answered Dec 05 '18 at 09:05

clementducerf

1
2

1

Please add code snippets demonstrating and fully explain the cause of the problem and how your solution addresses it, preferably with links to and quotes from external documentation. – Fred Gandt Dec 05 '18 at 10:27

Browsersync not syncing scroll

2 Answers2