CODEWITHSUNDEEP
gulpbrowser-sync
drake035
drake035

Reputation: 2877

BrowserSync doesn't refresh HTML files

BrowserSync correctly refreshes any PHP page I'm modifying, or SCSS or JS. But for HTML files it doesn't refresh anything. Why not?

Note my gulpfile.js is nested into its own subfolder /gulp/, here's its content:

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']);
});

Upvotes: 4

Views: 2190

Answers (4)

Roumelis George
Roumelis George

Reputation: 6746

I believe your problem lies in the relative paths you use. Why don't you set gulp to watch every html file like this: 

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

Upvotes: 1

user9844377
user9844377

Reputation: 

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']);
});

Here I raised html action up the chain just in case one of the other ones are actively messing with it, also try the reverse. Also removed the redundancy in the parameters. running "sass" and "js" inside of the parameter array is not needed or warranted from what I see here, as those tasks are ran on each of their respective gulp.watch lines looking for changes in the base code.

Upvotes: 0

Courtney
Courtney

Reputation: 69

I had a similar issue and turned to inject HTML rather than a full reload- much quicker and you still get the changes you want. I used bs-html-injector. Here's what it'll look like for you.

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']);
});

Note that you'll need to change your browsersync task a bit:

gulp.task('browsersync', function() {
    browsersync.use(htmlInjector, {
        files: "./wherever"
    });
    browsersync.init({
        server:"./anotherfolder" //launch server
    });
});

Upvotes: 0

Mark
Mark

Reputation: 180631

Your 'watch' task is overly complicated and maybe gulp is getting confused. Try:

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

Upvotes: 4

Related Questions