Gulp Watch Not Watching Continuously

Question

Here is my Gulp setup:

var gulp = require('gulp');
// ALLOWS FOR SASS
var sass = require('gulp-sass');
// WATCHES FOR CHANGES
var watch = require('gulp-watch');
// MINIFIES CSS
var cleanCSS = require('gulp-clean-css');
// MERGES CSS FILES INTO ONE
var concat = require('gulp-concat');

// GULP WATCH
gulp.task('watch', function() {
   gulp.watch('wp-content/themes/nss/assets/**/*.sass', ['sass']);
});

// GULP SASS CONVERTER
gulp.task('sass', function(){
  return gulp.src('wp-content/themes/nss/assets/sass/style.sass')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(cleanCSS())
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('wp-content/themes/nss/assets/css'));
});

gulp.task('default', ['sass','watch']);

My Problem: Gulp Watch only runs once and does not continuously look for updates. I've used this exact same code before on other projects so am confused as to what I'm doing wrong.

GULP VERSION: 3.3.4

Answer 1

You need a return in your gulp "watch" task.

If you do not return a stream, then the asynchronous result of each task will not be awaited by its caller, nor any dependent tasks.

Quoted from this awesome answer here.

A little fix on the code.

// GULP WATCH
gulp.task('watch', function() {
   return gulp.watch('wp-content/themes/nss/assets/**/*.sass', ['sass']);
});

That will do.

I've read that it is also advised to use gulp-plumber as it prevents pipe breaking on errors.