Gulp wouldn't watch any changes

Question

I am scratching my head around but can't seem to figure out whats wrong with the following gulpfile which simply watch and compile less file.

This simply won't watch less changes, I have tried all gulp, gulp watch. I have to manually run gulp after each change to compile them. Is there something wrong that causing watch to not work as expected?

Gulp Version CLI version 1.4.0 Local version 3.9.1

NPM 4.1.2 Node v7.7.2

var gulp = require('gulp');

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

// gulp compile paths

var paths = {
    dist: 'assets/dist'
};

gulp.task('css', function() {
    return gulp.src('assets/less/styles.less')
        .pipe(less({
            compress: true
        }))
        .pipe(gulp.dest(paths.dist))
});

gulp.task('watch', function() {
    gulp.watch('assets/less/*.less', ['css']);  // Watch all the .less files, then run the less task
});

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

Answer 1

Make sure you have correct path to the .less files also you need to add bowersync.reload for it to work.

gulp.task('watch', function () {
    gulp.watch('assets/less/*.less', ['css']);
    // init server
    browserSync.init({
        server: {
            proxy: "local.build",
            baseDir: appPath.root
        }
    });

    gulp.watch([appPath.root + '**'], browserSync.reload);
});

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