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. Вот хорошая ссылка, что:

«Вы не должны смотреть файлы с BrowserSync + Глоток»https://github.com/shakyShane/gulp-browser-sync/issues/16#issuecomment-43597240

Таким образом, вы, вероятно, хотите удалить LiveReload (пусть BrowserSync обрабатывать все) и изменения используемые по умолчанию Глоток задачи на что-то вроде этого:

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

Вы также можете попробовать настройки прокрутки явно (но он по умолчанию верно в любом случае):

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