使用 Gulp 更改后浏览器同步不刷新页面

Posted 2023-03-07

【中文标题】使用 Gulp 更改后浏览器同步不刷新页面

【英文标题】：browser-sync does not refresh page after changes with Gulp

【发布时间】：2015-09-18 18:05:53

【问题描述】：

我是 Gulp 的新手，我想利用它的自动 scss 编译和浏览器同步。但我无法让它工作。

我剥离了所有内容，只在 Browsersync 网站上留下了示例的内容：

http://www.browsersync.io/docs/gulp/#gulp-sass-css

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() 

    browserSync.init(
        server: "./app"
    );

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
);

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() 
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
);

gulp.task('default', ['serve']);

我可以调用 gulp serve。该网站正在显示，我从 Browsersync 收到一条消息。当我修改 HTML 时，页面会重新加载。但是，当我修改 scss 时，我可以看到：

[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms

但我必须手动重新加载。我错过了什么？

【参考方案1】：

当我不熟悉浏览器同步使用时，我也遇到了类似的问题，命令行说“重新加载浏览器”但浏览器根本没有刷新，问题是我的 HTML 中没有包含 body 标签浏览器同步可以为其功能注入脚本的页面，请确保您的 HTML 页面具有正文标记。

【讨论】：

感谢您为我节省了几天的挫败感。坦率地说，这与 Gulp 无关，因此可能值得拥有自己的问题/答案，因为我知道我不是唯一一个用简单的无标签 index.html 文件以懒惰的方式首先测试它并想知道......嘿为什么这不起作用？

宝贵的知识，先生。

我遇到了完全相同的问题！省略了正文标签以进行快速测试，然后无法弄清楚为什么浏览器同步停止工作......非常感谢！！！

这个简单的概念是我在阅读有关 BrowserSync 时一定错过的。感谢您的发帖，刚刚结束了 2 小时的挫败感。

如果你真的不想在我的 HTML 中使用 </body> 标签，你可以使用 snippetOptions 选项将 BrowserSync 脚本注入到你的 HTML 文件的另一个位置。

【参考方案2】：

如果愿意，您可以只注入更改，而不必在 SASS 编译时强制刷新浏览器。

browserSync.init(
    injectChanges: true,
    server: "./app"
);

gulp.task('sass', function() 
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream(match: '**/*.css'));
);

【讨论】：

太糟糕了，这并不容易。如果我没有偶然发现你的答案，我永远不会用 MAMP/Gulp 设置来解决这个问题......

我想知道为什么我的页面没有加载，但实际上它正在注入 css.. 不过很好。

现在defaults to true

【参考方案3】：

这是因为您在 html 手表而不是 scss 手表上调用 browserSync.reload。

试试这个：

gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);

【讨论】：

你是对的。我以为那是.pipe(browserSync.stream()) 的工作。谢谢。

【参考方案4】：

这是我使用的，它在 sass 或任何其他文件中都可以正常工作

gulp.task('browser-sync', function () 
   var files = [
      '*.html',
      'css/**/*.css',
      'js/**/*.js',
      'sass/**/*.scss'
   ];

   browserSync.init(files, 
      server: 
         baseDir: './'
      
   );
);

【讨论】：

我认为这个答案更好；但是，就我而言（可能是因为我使用了代理），我无法使用 './**/*' glob 模式。

^ 我现在意识到我的问题是我正在查看 node_modules 目录

这是最简单的答案，它仍然可以与最新的稳定浏览器同步开箱即用。

【参考方案5】：

我将它包含在我的 html 中，就在 body 标记的下方。它有效。

<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]>
</script>

【讨论】：

像魅力一样工作！如果您在本地开发分支上，请不要忘记创建一个查看某个环境变量的检查:)

【参考方案6】：

在尝试重新加载 php 和 js 文件和流式传输 css 文件时遇到了同样的问题。我只能通过使用 pipe 方法来使用流，这是有道理的。无论如何，这对我有用：

gulp.watch(['./**/*.css']).on('change', function (e) 
    return gulp.src( e.path )
        .pipe( browserSync.stream() );
);

但是，我实际上更喜欢 @pixie 的答案修改：

gulp.task('default', function() 
    var files = [
            './**/*'
        ];
    browserSync.init(
        files : files,
        proxy : 'localhost',
        watchOptions : 
            ignored : 'node_modules/*',
            ignoreInitial : true
        
    );
);

【参考方案7】：

我也有同样的问题。当我将 reload 方法作为单独的任务调用时，它起作用了。

gulp.task('browserSync', function() 
  browserSync.init(null, 
    server: 
      baseDir: './'
    ,
  );
)

gulp.task('reload', function()
    browserSync.reload()
)

gulp.task('watch', ['sass', 'css', 'browserSync'], function()
   gulp.watch('*.html', ['reload']);
)

【讨论】：

我打算输入这个答案，但由于它已经在这里，我投了赞成票。我也在这里找到了答案：youtube.com/watch?v=4y8Iw85__Xk

抛出错误：AssertionError [ERR_ASSERTION]: Task function must be specified

【参考方案8】：

有时在使用 CLI 时，您的 HTML 主文件中没有插入脚本，因此您应该手动添加它或使用 gulp。

    <!-- START: BrowserSync Reloading -->
    <script type='text/javascript' id="__bs_script__">
        //<![CDATA[
        document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
        //]]>
    </script>
    <!-- END: BrowserSync Reloading -->