Watch source files of specific tasks and their descendants and run corresponding task when a file changes. A cascading configurable gulp recipe for gulp-chef.
$ npm install --save-dev gulp-chef gulp-ccr-watchDo on Change
File watching is provided by the chokidar module. Please report any file watching problems directly to its issue tracker.
Options that are passed to chokidar. See chokidar's API for options.
Tasks to take care of.
var gulp = require('gulp');
var chef = require('gulp-chef');
var browserSync = require('browser-sync');
var meals = chef({
src: 'app/',
dest: 'dist/',
markups: {
src: '**/*.html',
recipe: 'copy'
},
styles: {
src: '**/*.less',
plugin: 'gulp-less',
spit: true
},
browserSync: {
plugin: 'browser-sync',
options: {
server: '{{dest.path}}'
}
},
watch: ['markups', 'styles'],
build: { parallel: ['markups', 'styles'] },
serve: ['build', 'browserSync', 'watch']
});
gulp.registry(meals);This roughly do the same thing as the following normal gulp construct:
var gulp = require('gulp');
var less = require('gulp-less');
var sync = require('browser-sync');
var config = {
dest: 'dist/',
markups: 'app/**/*.html',
styles: 'app/**/*.less'
};
function markups() {
return gulp.src(config.markups)
.pipe(gulp.dest(config.dest));
}
function styles() {
return gulp.src(config.styles)
.pipe(less())
.pipe(gulp.dest(config.dest));
}
function browserSync() {
sync({
server: config.dest
});
}
function watch() {
gulp.watch(config.markups, markups)
.on('change', sync.reload);
gulp.watch(config.styles, styles)
.on('change', sync.reload);
}
gulp.task(markups);
gulp.task(styles);
gulp.task(watch);
gulp.task('build', gulp.parallel(markups, styles));
gulp.task('serve', gulp.series('build', browserSync, watch));