Package Exports

gulp-ccr-watch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gulp-ccr-watch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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