Gulp Browsersync会在每次文件更改时导致多次重新加载
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Gulp Browsersync会在每次文件更改时导致多次重新加载相关的知识,希望对你有一定的参考价值。
我正在使用与Gulp的browsersync,在特定的文件更改上运行一些任务。每当我保存文件时,我的终端都会获得10+ [BS] Reloading Browsers...
,性能可以理解为滞后。
这是我的gulpfile:
gulp.task('bowerJS', function() {
gulp.src(lib.ext('js').files)
.pipe(concat('lib.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/assets/js'));
});
gulp.task('bowerCSS', function() {
gulp.src(lib.ext('css').files)
.pipe(concat('lib.min.css'))
.pipe(gulp.dest('app/assets/css/'));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('less', function() {
gulp.src('./app/css/*.less')
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('app/assets/css'))
.pipe(browserSync.stream());
});
// Render Jade templates as html files
gulp.task('templates', function() {
gulp.src('views/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('app/src/'))
});
gulp.task('php', function() {
php.server({ base: 'app', port: 8123, keepalive: true});
});
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', 'php'], function() {
var proxyOptions1 = url.parse('http://some-site:1234');
proxyOptions1.route = '/api/hi';
browserSync({
port: 8999,
proxy: '127.0.0.1:8123',
middleware: [
proxy(proxyOptions1),
history()
],
notify: false
});
gulp.watch("app/assets/css/*.less", ['less']);
gulp.watch("app/**/*.html").on('change', browserSync.reload);
gulp.watch("app/assets/js/*.js").on('change', browserSync.reload);
gulp.watch("views/**/*.jade", ['templates']);
});
我在这做错了什么?
答案
仅使用browserSync.stream
(然后替换browserSync.reload)并像这样传递选项once: true
browserSync.stream({once: true})
这应该没问题。
另一答案
Chokidar的awaitWriteFinish
选项为我修复了它。
例:
browserSync.init({
server: dist.pages,
files: dist.css + '*.css',
watchOptions: {
awaitWriteFinish : true
}
});
以上是关于Gulp Browsersync会在每次文件更改时导致多次重新加载的主要内容,如果未能解决你的问题,请参考以下文章
Browsersync结合gulp和nodemon实现express全栈自动刷新
gulp+browserSync+nodemon 实现express 全端自动刷新的实践