0

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

tmcd
  • 355
  • 3
  • 16

1 Answers1

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.

ArchNoob
  • 3,946
  • 5
  • 32
  • 59
  • Thank you! Re: gulp-plumber – Why would you want to prevent pipe breaking on errors though? It shows you did something wrong, no? – tmcd Dec 25 '18 at 00:33
  • `gulp-plumber` will log errors without breaking the pipe and since you have `gulp-watch` running, once you fix the error gulp will restart itself, removing the need to run `gulp` every time on your terminal once something breaks. Also, `gulp-plumber` can be extended [see this post](https://scotch.io/tutorials/prevent-errors-from-crashing-gulp-watch) and [this gulp-plumber-notify plugin](https://github.com/hilezi/gulp-plumber-notifier/blob/master/index.js). Happy holidays ☃️☃️ !! – ArchNoob Dec 27 '18 at 06:07