CODEWITHSUNDEEP
javascriptnode.jsgulpbrowser-syncgulp-watch
MeltingDog
MeltingDog

Reputation: 15404

BrowserSync not trigger when watching .html files

I am using Gulp to compile and minify my SASS. This works fine, but I want to extend the automation by using BrowserSync.

I've followed the instructions on a few tutorial sites but cannot get it working - the browser does not refresh when I update either my .scss or .html files, not do any errors appear on the Terminal.

My gulpfile.js is as such. Would anyone know why browserSync fails to run?

(ps running gulp browserSync does sucessfully open the browser window and index file with http://localhost:3000/ but there is no automatic refreshing).

const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();

// Normal .scss compilation
gulp.task('sass', function(){
  return gulp.src('scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});

// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
    return gulp.src('dist/css/main.css')
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))

gulp.task('watch', function(){
  gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
  gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'
    },
  })
})

Upvotes: 0

Views: 1448

Answers (1)

d-h-e
d-h-e

Reputation: 2548

Your watch task should be your default task. Try to put the browserSync.init() in the watch task und then start your gulp with gulp watch

const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const browserSync = require('browser-sync').create();

// Normal .scss compilation
gulp.task('sass', function(){
  return gulp.src('scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});

// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
    return gulp.src('dist/css/main.css')
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))

gulp.task('watch', function(){
  browserSync.init({
    server: {
      baseDir: './'
    }
  });

  gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
  gulp.watch("*.html").on('change', browserSync.reload);
});

Upvotes: 1

Related Questions