gulp-ccr-watch

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.

Install

$ npm install --save-dev gulp-chef gulp-ccr-watch

Recipe

Do on Change

Ingredients

• browser-sync

• gulp.watch()

Type

Flow Controller

API

File watching is provided by the chokidar module. Please report any file watching problems directly to its issue tracker.

config.options

Options that are passed to chokidar. See chokidar's API for options.

config.task

Tasks to take care of.

Usage

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));