首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >BrowserSync不刷新HTML文件

BrowserSync不刷新HTML文件
EN

Stack Overflow用户
提问于 2018-05-16 02:10:00
回答 4查看 2K关注 0票数 4

BrowserSync可以正确刷新我正在修改的任何PHP页面,或者SCSS或JS。但是对于HTML文件,它不会刷新任何内容。为什么不行?

注意:我的gulpfile.js嵌套在它自己的子文件夹/gulp/中,下面是它的内容:

代码语言:javascript
复制
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']);
});
EN

回答 4

Stack Overflow用户

发布于 2018-05-18 03:36:38

你的“手表”任务过于复杂,可能是吞咽变得混乱了。尝试:

代码语言:javascript
复制
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);
});
票数 4
EN

Stack Overflow用户

发布于 2018-06-05 21:33:00

我相信你的问题出在你使用的相对路径上。为什么不设置gulp来查看每个html文件,如下所示:

代码语言:javascript
复制
// 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);
});
票数 1
EN

Stack Overflow用户

发布于 2018-05-24 04:36:52

我遇到了类似的问题,于是我转而注入HTML,而不是完全重新加载--速度快得多,你仍然可以得到你想要的更改。我使用bs-html-injector。下面是它将为您呈现的样子。

代码语言:javascript
复制
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任务:

代码语言:javascript
复制
gulp.task('browsersync', function() {
    browsersync.use(htmlInjector, {
        files: "./wherever"
    });
    browsersync.init({
        server:"./anotherfolder" //launch server
    });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50356730

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档