BrowserSync не обновляет файлы HTML - PullRequest
Новая
       6

BrowserSync не обновляет файлы HTML

0 голосов
/ 15 мая 2018

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 ]

0 голосов
/ 05 июня 2018

Я считаю, что ваша проблема заключается в относительных путях, которые вы используете. Почему бы вам не настроить 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);
});
0 голосов
/ 23 мая 2018

У меня была похожая проблема, и я обратился к внедрению 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
    });
});
0 голосов
/ 01 июня 2018 
gulp.task('watch', ['browserSync'], function() {
  gulp.watch('../**/**/*.html', browserSync.reload);
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', ['js']);
});

Здесь я поднял действие html вверх по цепочке на тот случай, если кто-то из других активно с ним связывается, попробуйте и наоборот. Также убрана избыточность в параметрах. запуск "sass" и "js" внутри массива параметров не нужен или не оправдан тем, что я вижу здесь, поскольку эти задачи выполняются в каждой из соответствующих строк gulp.watch в поисках изменений в базовом коде.

0 голосов
/ 17 мая 2018

Ваша задача «наблюдать» слишком сложна и, возможно, глоток запутывается. Попробуйте: 

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);
});
...