我正在使用browsersync,设置如下。问题是当代码发生变化时,browsersync会识别并刷新页面。但是,它不会等待脚本文件进入gulp.dest
,所以通常它会自动刷新,脚本文件找不到,然后再次刷新,它就在那里了。
有没有办法保证它会等到任务完全完成?
var browserSync = require('browser-sync').create();
gulp.task('cleanScripts', function () {
return gulp.src('./assets/js', {read: false})
.pipe(clean());
});
gulp.task('scripts', ['cleanScripts'], function() {
return browserify('./client/js/main.js')
.bundle()
.on('error', function (e) {
gutil.log(e);
})
.pipe(source('main-' + packageJson.version + '.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./assets/js'));
});
//Watch our changes
gulp.task('watch', function () {
browserSync.init({
proxy: "localhost:3000"
});
gulp.watch(['./client/js/**/*.js', ['scripts']).on('change', browserSync.reload);
});
4条答案
按热度按时间apeeds0o1#
BrowserSync具有可在gulpfile.js中设置的选项reloadDelay
指示浏览器在文件更改事件后重新加载/插入之前等待的时间(毫秒)
aydmsdu92#
您可以尝试简单的也许方式,否则您将需要也许超时:
并将browserSync.reload放在脚本管道的末尾:
如果不起作用,尝试超时和玩弄时间,但如果你真的需要快速开发和编译,这不是一个合适的解决方案:
在这种情况下,您不需要在脚本管道的末尾重新加载。
vpfxa7rd3#
我用的是Gulp 4
解决办法是
现在,只要我的代码有变化,我的“some-task-name”就会被执行,然后浏览器页面就会被重新加载,我根本不需要延迟我的浏览器同步。
这是package.json文件中我的开发依赖项
yvt65v4c4#
这里有一个简单的基于任务的Gulp4解决方案,它将重载变成一个连续完成的任务,而不是在change事件上触发它。