上周,我尝试为一个小型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文件,有时我忘记了正文标签,如果没有正文标签,脚本标签将不会被注入。
当你运行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
版本是2.18.5
,请确保将其替换为已安装的browser-sync版本
我有类似的问题,事实证明,在实际正文标记之前注释正文标记会导致browsersync停止注入脚本标记,从而刷新页面。看例子:
这行不通:
<!-- <body> -->
<body class="modal_on">
如此:
<body class="modal_on">
<!-- <body> -->
我使用的是browsersync version 2.26.14