Gulp not watching files with gulp-watch plugin - gulp

Question

I'm trying to rebuild only files that change in my gulpfile.js by using this recipe via the gulp-watch plugin. The problem is when I run my default task gulp, it doesn't watch the files at all after saving any of the files I want it to watch. What am I doing wrong here in my gulpfile.js? Thanks in advance.
/* ----------------------------------------------------- */
/* Gulpfile.js
/* ----------------------------------------------------- */
'use strict';
// Setup modules/Gulp plugins
var gulp = require('gulp'),
del = require('del'),
runSequence = require('run-sequence'),
less = require('gulp-less'),
// minifyCSS = require('gulp-minify-css'),
fileinclude = require('gulp-file-include'),
order = require('gulp-order'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
// browserify = require('browserify'),
// sourceStream = require('vinyl-source-stream'),
connect = require('gulp-connect');
// Configure file paths
var path = {
DEST: 'dist/',
SRC: 'src/',
INCLUDES: 'include/',
LESS_SRC: 'src/frontend/less/',
LESS_MANIFEST: 'src/frontend/less/all.less',
CSS_DEST: 'dist/frontend/css/',
JS_SRC: 'src/frontend/js/',
JS_MINIFIED_OUT: 'all.js',
JS_DEST: 'dist/frontend/js',
IMG_SRC: 'src/frontend/img/',
IMG_DEST: 'dist/frontend/img/',
};
// Clean out build folder each time Gulp runs
gulp.task('clean', function (cb) {
del([
path.DEST
], cb);
});
// Compile LESS
gulp.task('less', function(){
return gulp.src(path.LESS_MANIFEST)
.pipe(watch(path.LESS_MANIFEST))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.CSS_DEST))
.pipe(connect.reload());
});
// Allow HTML files to be included
gulp.task('html', function() {
return gulp.src([path.SRC + '*.html'])
.pipe(watch(path.SRC + '*.html'))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(fileinclude({
prefix: '##',
basepath: path.INCLUDES
}))
.pipe(gulp.dest(path.DEST))
.pipe(connect.reload());
});
// Concatenate and minify JavaScript
gulp.task('js', function() {
return gulp.src(path.JS_SRC + '**/*.js')
.pipe(watch(path.JS_SRC + '**/*.js'))
.pipe(order([
path.JS_SRC + 'framework/*.js',
path.JS_SRC + 'vendor/*.js',
path.JS_SRC + 'client/*.js'
], {base: '.'} ))
.pipe(concat(path.JS_MINIFIED_OUT))
.pipe(uglify())
.pipe(gulp.dest(path.JS_DEST))
.pipe(connect.reload());
});
// Minify images
gulp.task('imagemin', function () {
return gulp.src(path.IMG_SRC + '**/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest(path.IMG_DEST));
});
// Copy folders
gulp.task('copy', function() {
gulp.src(path.SRC + 'extjs/**/*')
.pipe(gulp.dest(path.DEST + 'extjs/'));
// Copy all Bower components to build folder
gulp.src('bower_components/**/*')
.pipe(gulp.dest('dist/bower_components/'));
});
// Connect to a server and livereload pages
gulp.task('connect', function() {
connect.server({
root: path.DEST,
livereload: true
});
});
// Organize build tasks into one task
gulp.task('build', ['less', 'html', 'js', 'imagemin', 'copy']);
// Organize server tasks into one task
gulp.task('server', ['connect']);
// Default task
gulp.task('default', function(cb) {
// Clean out dist/ folder before everything else
runSequence('clean', ['build', 'server'],
cb);
});

Answer 1

Try and remove the watch from your build tasks, and have separate tasks that handle the watching. Something like:
gulp.task("watch-less", function() {
watch(path.LESS_MANIFEST, function () {
gulp.start("less");
));
});
That way, it'll just trigger the task when a file changes. And the task for watching is able to be run separate from your build (which will also make your life easier if you use some form of build automation).
Also, you can specify many watch tasks, like so:
gulp.task("watch", function() {
watch(paths.FOO, function() {
gulp.start("foo");
});
watch(paths.BAR, function() {
gulp.start("bar");
});
});