Question

与browser-sync一起使用的

gulp即使在简单的设置下也不会刷新浏览器中的页面。

版本：gulp：4.0.2，browser-sync：2.26.7，Chrome：81.0.4044.138

文件夹结构：

|- src/
    |- index.html
|- dist

gulpfile.js：

const { task, src, dest, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();

task('html', () => {
    return src('src/*.html').pipe(dest('dist'));
});

task('browserSync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });
});

task(
    'watch',
    series(
        task('html'),
        (done) => {
            watch('src/*.html', task('html'));
            watch('dest/*.html').on('change', browserSync.reload);
            done();
        },
        task('browserSync')
    )
);

当我运行gulp watch时，src/index.html已成功复制到dest/index.html，并且browser-sync已启动（Chrome打开页面并显示“已连接浏览器同步” ）。

当我在src/index.html中进行任何更改时，它将被复制到dest/index.html，但是browser-sync不会刷新页面。

我尝试在browserSync.reload调用中将() => console.log('reloaded')替换为watch('dist/*.html').on('change', ...)，并且每次我更改src/index.html文件时，日志消息都会成功显示（这意味着观察程序可以正常工作并且browserSync.reload被调用）。还尝试过重启Chrome。

任何帮助或建议将不胜感激。

更新：如果我将watch('dist/*.html', browserSync.reload);放在browserSync任务中（奇怪），它将开始工作：

task('browserSync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });

    watch('dist/*.html', browserSync.reload);
});

另一个有用的选项是添加files属性，以使browser-sync创建自己的文件监视程序：

task('browserSync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist'
        },
        files: [ 'dist/*.html' ]
    });
});

浏览器同步不会从gulp刷新页面

0 个答案: