Gulp BrowserSync突然无法连接到浏览器

t9aqgxwy  于 2023-09-28  发布在  Gulp
关注(0)|答案(2)|浏览(263)

上周,我尝试为一个小型JavaScript项目从头开始编写一个gulpfile。我选择使用BrowserSync来编译代码并重新加载浏览器(Chrome)。整个周末都很好,我完成了。然而,我觉得我昨天打开了这个项目,现在当我运行'gulp'命令时,它没有连接到浏览器,给予“已连接到BrowserSync”消息,并提供自动重新加载功能。但是在控制台中,我仍然会收到通知,我的文件正在更新和编译。
有人知道这是怎么发生的吗?
下面是我使用的gulpfile:

  1. var gulp = require('gulp'),
  2. gutil = require('gulp-util'),
  3. browserSync = require('browser-sync'),
  4. reload = browserSync.reload,
  5. jshint = require('gulp-jshint'),
  6. sass = require('gulp-sass');
  7. gulp.task('browser-sync', function() {
  8. var files = [
  9. 'app/**/*/.html',
  10. 'app/assets/css/**/*.css',
  11. 'app/assets/js/**/*.js'
  12. ];
  13. browserSync.init(files, {
  14. server: {
  15. baseDir: './app'
  16. }
  17. });
  18. });
  19. // process JS files and reload all browsers when complete.
  20. gulp.task('js', function () {
  21. return gulp.src('app/assets/js/*js')
  22. .pipe(jshint())
  23. .pipe(jshint.reporter('default'))
  24. .pipe(gulp.dest('app/assets/js'))
  25. .pipe(browserSync.reload({stream:true}));
  26. });
  27. gulp.task('sass', function() {
  28. return gulp.src('app/assets/sass/**/*.scss')
  29. .pipe(sass())
  30. .pipe(gulp.dest('app/assets/css'))
  31. .pipe(reload({stream: true}));
  32. });
  33. // Reload all Browsers
  34. gulp.task('bs-reload', function () {
  35. browserSync.reload();
  36. });
  37. gulp.task('default', ['browser-sync'], function() {
  38. gulp.watch('app/assets/js**/*.js', ['js']);
  39. gulp.watch('app/assets/sass/*.scss', ['sass']);
  40. gulp.watch('app/*html', ['bs-reload']);
  41. });

谢谢你的任何建议!

mlmc2os5

mlmc2os51#

它看起来像browsersync 'script'标签没有被注入到你所服务的html文件中,重新检查你的html文件,有时我忘记了body标签,如果没有body标签,脚本标签将不会被注入。
当你运行gulp,你的页面加载时,在打开的时候检查源代码(查看页面源代码),并检查html结构。
您可以从其他工作正常的项目中复制标记,运行它并复制注入的脚本标记并将其粘贴到当前项目页面上。
脚本标记如下所示(可能因BrowserSync版本而异)

  1. <body>
  2. <script id="__bs_script__">
  3. //<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.5'><\/script>".replace("HOST", location.hostname));//]]>
  4. </script>

注意:在上面的<script>标签中,browser-sync版本是2.18.5,请确保将其替换为您安装的浏览器同步版本

ymdaylpp

ymdaylpp2#

我也遇到过类似的问题,结果是在实际的body标签之前注解掉body标签会导致browsersync停止注入script标签,从而刷新页面。参见示例:
这不起作用:

  1. <!-- <body> -->
  2. <body class="modal_on">

此工程:

  1. <body class="modal_on">
  2. <!-- <body> -->
  • 我使用的是browsersync版本2.26.14*

相关问题