Git Product home page Git Product logo

gulp-watch's Introduction

gulp-watch NPM version Build Status Coverage Status Dependency Status

Watch, that actually is an endless stream

This is implementation of gulp.watch with endless stream approach. If gulp.watch is working for you - stick with it, otherwise you can try gulp-watch plugin.

Main reasons of gulp-watch existance is that it can easly (with a little help of gulp-plumber achieve per-file rebuilding on file change:

Awesome demonstration

Usage

Batching mode

This is close to bundled gulp.watch, but with some tweaks. First - files will be grouped by timeout of 200 and passed into stream inside callback (this will keep git checkout commands do rebuilding only once). Second - callbacks will never run parallel (unless you remove return), until one stream ends working.

var gulp = require('gulp'),
    watch = require('gulp-watch');

gulp.task('default', function () {
    gulp.src('scss/**/*.scss')
        .pipe(watch(function(files) {
            return files.pipe(sass())
                .pipe(gulp.dest('./dist/'));
        });
});

Continuous stream of events

This is usefull, when you want blazingly fast rebuilding per-file.

Be aware: end event is never happens in this mode, so plugins dependent on it will never print or do whatever they should do on end task.

// npm i gulp gulp-watch gulp-sass

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    plumber = require('gulp-plumber'),
    sass = require('gulp-sass');

gulp.task('default', function () {
    gulp.src('scss/**', { read: false })
        .pipe(watch())
        .pipe(plumber()) // This will keeps pipes working after error event
        .pipe(sass())
        .pipe(gulp.dest('./dist/'));
});

If you want to watch all directories, include those, which will be created after:

gulp.task('default', function () {
    watch({ glob: 'sass/**/*.scss' })
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('./dist/'));
});

Trigger for mocha

Problem with gulp.watch is that will run your test suit on every changed file per once. To avoid this gulp-batch was written first, but after some time it became clear, that gulp.watch should be a plugin with event batching abilities.

var grep = require('gulp-grep-stream');
var mocha = require('gulp-mocha');
var plumber = require('gulp-plumber');

gulp.task('watch', function() {
    gulp.src(['lib/**', 'test/**'], { read: false })
        .pipe(watch({ emit: 'all' }))
        .pipe(plumber())
        .pipe(grep('*/test/*.js'))
        .pipe(mocha({ reporter: 'spec' }))
        .on('error', function() {
            if (!/tests? failed/.test(err.stack)) {
                console.log(err.stack);
            }
        });
});

gulp.task('default', function () {
    gulp.run('watch');
});

// run `gulp watch` or just `gulp` for watching and rerunning tests

API

watch([options, callback])

This function creates have two different modes, that are depends on have you provice callback function, or not. If you do - you get batched mode, if you not - you get stream.

Callback signature: function(events, [done])

  • events - is Array of incoming events.
  • done - is callback for your function signal to batch, that you are done. This allows to run your callback as soon as previous end.

Options:

This object passed to gaze options directly, so see documentation there. For batched mode we are using gulp-batch, so options from there are available. And of course options for gulp.src used too. If you do not want content from watch, then add read: false to options object.

options.emit

Type: String Default: one

This options defines emit strategy:

  • one - emit only changed file
  • all - emit all watched files (and folders), when one changes

options.passThrough

Type: Boolean
Default: true

This options will pass vinyl objects, that was piped into watch to next Stream in pipeline.

options.glob

Type: String
Default: undefined

If you want to detect new files, then you have to use this option. When gulp-watch gets files from gulp.src it looses the information about pattern of matching - therefore it can not detect new files.

options.name

Type: String
Default: undefined

Name of the watcher. If it present in options, you will get more readable output:

Naming watchers

Notes:

  1. you cannot pipe to watcher, that got this option (writable stream will be closed).
  2. you will receive vinyl File object only on changes.

Methods

Returned Stream from constructor have some useful methods:

  • close() - calling gaze.close and emitting end, after gaze.close is done.

Events

  • end - all files are stop being watched.
  • ready - all files, that are passed from gulp.src, are now being watched.
  • error - when something happened inside callback, you will get notified.

Properties

  • gaze - instance of gaze in case you want to call it methods (for example remove). Be aware no one guarantee you nothing after you hacked on gaze.

Returns

  • Batched mode - wrapped callback, that will gather events and call callback.
  • Stream mode - stream, that handles gulp.src piping.

License

(MIT License)

Copyright (c) 2013 Vsevolod Strukchinsky ([email protected])

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

gulp-watch's People

Contributors

dashed avatar floatdrop avatar steveluscher avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.