Browsersync 不同步滚动

Question

我是 gulp 的新手，我正在尝试让浏览器同步工作。除了同步滚动不起作用外，它似乎工作正常。谁能看出我的设置有什么问题。

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]);
});

Answer 1

您的问题可能与同时使用 Gulp 和 BrowserSync 进行观看有关。这是一个很好的参考：

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

所以您可能想要删除 livereload（让 BrowserSync 处理一切）并将您的默认 Gulp 任务更改为如下内容：

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]);
});

您也可以尝试显式设置滚动（但无论如何它默认为 true）：

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

Answer 2

我遇到了同样的问题，那是因为我在自己的代码中声明了一个名为 scrollTo 的 javascript 函数，它干扰了 browserSync 代码。我需要做的就是重命名该函数，浏览器同步滚动又开始工作了。

Browsersync 不同步滚动

Browsersync not syncing scroll

javascript

development-environment

livereload

gulp