Gulp BrowserSync不';刷新HTML文件
BrowserSync正确刷新我正在修改的任何PHP页面,或SCSS或JS。但对于HTML文件,它不会刷新任何内容。为什么不呢 注意我的Gulp BrowserSync不';刷新HTML文件,gulp,browser-sync,Gulp,Browser Sync,BrowserSync正确刷新我正在修改的任何PHP页面,或SCSS或JS。但对于HTML文件,它不会刷新任何内容。为什么不呢 注意我的gulpfile.js嵌套在它自己的子文件夹/gulp/,下面是它的内容: var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync').create(); var autoprefixer = require('gu
gulpfile.js
嵌套在它自己的子文件夹/gulp/
,下面是它的内容:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var onError = function (err) {
console.log('An error occurred:', gutil.colors.magenta(err.message));
gutil.beep();
this.emit('end');
};
gulp.task('sass', function() {
return gulp.src('../assets/styles/**/*.scss')
.pipe(plumber({ errorHandler: onError }))
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('../dist/styles'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('js', function() {
return gulp.src(['../assets/scripts/*.js'])
.pipe(gulp.dest('../dist/scripts'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
proxy: 'http://127.0.0.1/vuejs/',
})
})
gulp.task('watch', ['browserSync','js','sass'], function() {
gulp.watch('../assets/styles/**/*.scss',['sass']);
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../**/**/*.html', browserSync.reload);
gulp.watch('../assets/scripts/*.js', ['js']);
});
你的“观察”任务过于复杂,可能是gulp弄糊涂了。尝试:
gulp.task('watch', ['browserSync','js','sass'], function() {
// you are already calling reload in your sass and js tasks so remove it here
// plus the array is for tasks, not a function call
// also those 'tasks' would run in parallel - which is not what you want
gulp.watch('../assets/styles/**/*.scss',['sass']);
gulp.watch('../**/**/*.php', browserSync.reload);
// you must be able to simplify the following three lines
// ** will match on zero or more entries so all three of these
// will match '../*.html', so try keeping only the first
// EDIT : try this for html reload
gulp.watch("../**/**/*.html").on("change", browserSync.reload);
// gulp.watch('../**/**/*.html', browserSync.reload);
// gulp.watch('../**/*.html', browserSync.reload);
// gulp.watch('../*.html', browserSync.reload);
// see above
gulp.watch('../assets/scripts/*.js', ['js']);
// a duplicate, remove
// gulp.watch('../*.html', browserSync.reload);
});
我遇到了类似的问题,转而注入HTML,而不是完全重新加载—速度更快,而且您仍然可以得到所需的更改。我用的是bs html注入器。这是你想要的
var htmlInjector = require("bs-html-injector");
gulp.task('watch', ['browserSync','js','sass'], function() {
gulp.watch('../assets/styles/**/*.scss',['sass']);
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../**/**/*.html', htmlInjector);
gulp.watch('../assets/scripts/*.js', ['js']);
});
请注意,您需要稍微更改一下browsersync任务:
gulp.task('browsersync', function() {
browsersync.use(htmlInjector, {
files: "./wherever"
});
browsersync.init({
server:"./anotherfolder" //launch server
});
});
在这里,我提出了一个html操作链,以防其他操作之一正在积极干扰它,也请尝试相反的操作。还删除了参数中的冗余。从我在这里看到的情况来看,在参数数组中运行“sass”和“js”并不是必需的,也不是保证的,因为这些任务是在各自的gulp上运行的。请注意查看基本代码中的更改。我相信您的问题在于使用的相对路径。为什么不将gulp设置为按如下方式查看每个html文件:
// add reference to reload function in your var list
var reload = browserSync.reload;
gulp.task('watch', ['browserSync','js','sass'], function() {
gulp.watch("*.html").on("change", reload);
});
谢谢我编辑以显示我应用了您建议的更改,现在它工作了一次,之后它再也不工作了(不再刷新)。我编辑了我的答案,为html侦听器添加了另一个建议。谢谢,但现在不再刷新,就像以前一样:/谢谢,但似乎没有改变任何事情。下一个想法是,也许这就是你启动browsersync的方式-你的服务器指向哪里?我不确定我是否理解这个问题。请提供一个示例项目。还请说明您在哪个操作系统上使用它?
// add reference to reload function in your var list
var reload = browserSync.reload;
gulp.task('watch', ['browserSync','js','sass'], function() {
gulp.watch("*.html").on("change", reload);
});