BrowserSync 突然无法连接到浏览器

Question

BrowserSync 突然无法连接到浏览器

jer*_*rad 4 javascript browser sync gulp browser-sync

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

有谁知道这怎么可能发生？

这是我正在使用的 gulpfile：

var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');

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

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

// process JS files and reload all browsers when complete.
gulp.task('js', function () {
    return gulp.src('app/assets/js/*js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest('app/assets/js'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('sass', function() {
  return gulp.src('app/assets/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/assets/css'))
    .pipe(reload({stream: true}));
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function() {
  gulp.watch('app/assets/js**/*.js', ['js']);
  gulp.watch('app/assets/sass/*.scss', ['sass']);
  gulp.watch('app/*html', ['bs-reload']);
});

Run Code Online (Sandbox Code Playgroud)

感谢您的任何建议！

Answer 1

moh*_*ule 6

看起来 browsersync 'script' 标签没有被注入到你提供服务的 html 文件中，重新检查你的 html 文件，有时我忘记了 body 标签，如果没有 body 标签，脚本标签不会被注入.

当您运行 gulp 并且您的页面加载时，请在打开时检查源代码（查看页面源代码）并检查 html 结构。

您可以从其他工作正常的项目复制标签，运行它并复制注入的脚本标签并将其粘贴到当前项目页面上。

脚本标签如下所示（可能因 BrowserSync 版本而异）

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，3 月前
查看次数：	3775 次
最近记录：	7 年前