gulp-ccr-watch

    0.1.1 • Public • Published

    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

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

    Install

    npm i gulp-ccr-watch

    DownloadsWeekly Downloads

    6

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • amobiz