Gulp not watching .scss files?

Question

I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?

// Include gulp
var gulp = require('gulp'); 


// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');

// Styles
gulp.task('styles', function() {
    gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
        .pipe(include())
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});


// Watch
gulp.task('default', ['watch'], function() {
    gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});

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

Answer 1

I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?

You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.

Try this :D

var watch = require('gulp-watch');

// Styles
gulp.task('styles', function() {
    gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
        .pipe(include())
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});


// Watch
gulp.task('watch', function() {
    watch('./_themes/blanktheme/ui/scss/*.scss', function () {
        gulp.start('styles');
    });
});

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