上周我尝试为一个小型 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']);
});
感谢您的建议！
看起来 browsersync 'script' 标签没有被注入到您正在提供服务的 html 文件中，重新检查您的 html 文件，有时我忘记了 body 标签，如果没有 body 标签，则 script 标签不会被注入注射了。
当您运行 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>
注意：上面的
标签<script>版本是browser-sync，请务必将其替换为您安装的 browser-sync 版本2.18.5
我遇到了类似的问题，事实证明，在实际的正文标记之前注释掉正文标记会导致 browsersync 停止注入脚本标记，从而刷新页面。查看示例：
这不起作用：
<!-- <body> -->
<body class="modal_on">
这个有效：
<body class="modal_on">
<!-- <body> -->
我使用的是 browsersync 版本 2.26.14