CODEWITHSUNDEEP
javascriptsassgulp
Shibbir
Shibbir

Reputation: 2041

Gulp watch task is not working when sass/js/html file is saved

I am trying to reload the browser when scss, HTML and js file is changed but when I run the gulp watch command it's not reloading the browser or can't see any css/js/html changes.

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

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

gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

Upvotes: 0

Views: 826

Answers (2)

Shahnawaz Hossan
Shahnawaz Hossan

Reputation: 2720

With respect to Mark's solution, just add .on('change', browserSync.relod) to the end of the desired watch if you want to see the live reload:

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

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

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

Upvotes: 1

Mark
Mark

Reputation: 182781

You need to make a couple of changes shown here:

gulp.task('browserSync', function(done) {         // done added here
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  });
  done();                                          // done() called here
})

// gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.task('watch', gulp.series('browserSync', 'sass', function () {       // see note below
  
    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));

    // gulp.watch('app/*.html', browserSync.reload);

    gulp.watch("app/*.html", { events: 'all' }, function(cb) {
      browserSync.reload();
      cb();
    });

    gulp.watch('app/js/**/*.js', browserSync.reload);
}));                                                                       // added a )

gulp.watch() takes 2 arguments, not 3. gulp.series() should include all the functions - including your anonymous function that contains the watch calls. And lose the array brackets.

Upvotes: 0

Related Questions