gpt4 book ai didi

javascript - Browsersync 不同步滚动

转载 作者:行者123 更新时间:2023-11-28 19:26:42 25 4
gpt4 key购买 nike

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

最佳答案

您的问题可能与同时使用 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
}
});
});

关于javascript - Browsersync 不同步滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27766350/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com