BrowserSync不刷新HTML文件
BrowserSync不刷新HTML文件
提问于 2018-05-16 02:10:00
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('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']);
});回答 4
Stack Overflow用户
发布于 2018-05-18 03:36:38
你的“手表”任务过于复杂，可能是吞咽变得混乱了。尝试：
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);
});Stack Overflow用户
发布于 2018-06-05 21:33:00
我相信你的问题出在你使用的相对路径上。为什么不设置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);
});Stack Overflow用户
发布于 2018-05-24 04:36:52
我遇到了类似的问题，于是我转而注入HTML，而不是完全重新加载--速度快得多，你仍然可以得到你想要的更改。我使用bs-html-injector。下面是它将为您呈现的样子。
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
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50356730
复制相关文章
相似问题
腾讯云开发者
