floatdrop/gulp-watch

Watch, that actually is an endless stream

gulp-watch

File watcher that uses super-fast chokidar and emits vinyl objects.

Installation

npm install --save-dev gulp-watch

Usage

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

gulp.task('stream', function () {
	// Endless stream mode
    return watch('css/**/*.css', { ignoreInitial: false })
        .pipe(gulp.dest('build'));
});

gulp.task('callback', function () {
	// Callback mode, useful if any plugin in the pipeline depends on the `end`/`flush` event
    return watch('css/**/*.css', function () {
        gulp.src('css/**/*.css')
            .pipe(gulp.dest('build'));
    });
});

Protip: until gulpjs 4.0 is released, you can use gulp-plumber to prevent stops on errors.

More examples can be found in docs/readme.md.

API

watch(glob, [options, callback])

Creates a watcher that will spy on files that are matched by glob which can be a glob string or array of glob strings.

Returns a pass through stream that will emit vinyl files (with additional event property) that corresponds to event on file-system.

Callback function(vinyl)

This function is called when events happen on the file-system. All incoming files that are piped in are grouped and passed to the events stream as is.

• vinyl — is vinyl object that corresponds to the file that caused the event. Additional event field is added to determine what caused changes.

Possible events:

• add - file was added to watch or created
• change - file was changed
• unlink - file was deleted

Options

This object is passed to the chokidar options directly. Options for gulp.src are also available. If you do not want content from watch, then add read: false to the options object.

options.ignoreInitial

Type: Boolean
Default: true

Indicates whether chokidar should ignore the initial add events or not.

options.events

Type: Array
Default: ['add', 'change', 'unlink']

List of events, that should be watched by gulp-watch. Contains event names from chokidar.

options.base

Type: String
Default: undefined

Use explicit base path for files from glob. Read more about base and cwd in gulpjs docs.

options.name

Type: String
Default: undefined

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

options.verbose

Type: Boolean
Default: false

This option will enable verbose output.

options.readDelay

Type: Number
Default: 10

Wait for readDelay milliseconds before reading the file.

options.read

Type: Boolean
Default: true

Setting this to false will return file.contents as null and not read the file at all. Most useful as an optimization if your plugins pipeline doesn't make use of the file contents (e.g. gulp-clean), or to avoid reading the file twice if you use gulp.src() inside the callback instead of the file object that is passed as argument.

Methods

Returned Stream from constructor has some useful methods:

• add(path / paths)
• unwatch(path / paths)
• close()

Events

All events from chokidar:

• add, change, unlink, addDir, unlinkDir, error, ready, raw

Changelog

License

MIT (c) 2014 Vsevolod Strukchinsky ([email protected])

gulp-watch's Issues

Incompatibility with gulp-angular-templatecache?

I am attempting to use gulp-watch with gulp-angular-templatecache, like so:

gulp = require("gulp");
watch = require("gulp-watch");
templateCache = require("gulp-angular-templatecache");

gulp.task("templates", function() {
  gulp.src("src/**/*.html")
      .pipe(watch())
      .pipe(templateCache({ standalone: true })) // => templates.js.
      .pipe(gulp.dest("build/src"));
});

Every time a .html file changes, I want gulp-angular-templatecache to re-generate build/src/templates.js. However, nothing seems to happen. 😓 No file is generated, and I'm not sure whether the problem lies with gulp-watch or gulp-angular-templatecache...

New files in empty or new directory are not watched

I've noticed an issue when creating new files.

I'm using the following watch, to look for all .less files in my src directory.

watch({glob: config.src + '**/*.less', name: 'LESS', emitOnGlob: false}, ['less'])

This works as expected, and new .less files gets detected.
Unless i create a .less file in an existing subdirectory that did not contain any .less files at the watch start. The files will not be detected before i restart the watch.

Is this an issue with globbing in general? If so, any idea of how to work around it?

Browserify cache remains persistant between calls

When using gulp-browserify in combination with gulp-watch odd behavior occurs:

The first time browserify is called it follows all require() calls recursively, building up the bundle. The second time browserify is called (through gulp-watch) it just loads all require() calls from a cache (in a similar fashion as node handles require) even though files have changed. Only when you edit the root file (which has the first require()) browserify properly reloads all files.

Is it possible to make it so that gulp-watch spawns a new instance / forces a cache reset of handled tasks on each call? It seems that this might make the task slower, but imo it's preferable over unwanted behavior.

Problem with gulp-watch and typescript task

I have the following:

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

 ...

gulp.task('watch', [ '...' ], function() {
    watch({ glob: config.app.ts, emitOnGlob: false, name: 'TypeScript' })
        .pipe(plumberDefault())
        .pipe(typescript())
        .pipe(gulp.dest(config.deploy))
        .pipe(livereload(server));

    watch({ glob: config.app.jsx, emitOnGlob: false, name: 'React' })
        .pipe(plumberDefault())
        .pipe(react())
        .pipe(gulp.dest(config.deploy))
        .pipe(livereload(server));
});

The other watchers in the task work fine, but this typescript one doesn't output any file when it detects a change.

When the TypeScript watcher runs I only get this:

[17:03:08] TypeScript saw test3.ts was changed 

But when the on of my other watches run watcher runs (hence its getting to the reloaded part):

[17:06:24] React saw hello2.jsx was changed
[17:06:24] hello2.js was reloaded.

Note, if I run the typescript task outside of the watcher it runs fine.

I'm not 100% sure if this is a problem with gulp-watch or with gulp-tsc computability with the way gulp-watch as I don't get any errors out.

Any ideas? // @kotas

Question: Can you use gulp-watch like gulp.watch for callbacks?

Hey,

Might be a dumb question but whenever I've tried to set up a task like this it doesn't play nice.

With gulp.watch I would do this

gulp.watch("src/somefolder/*.ext", ["someOtherDefinedTask"]);

But with gulp-watchthis doesn't play well

watch({glob: "src/somefolder/*.ext"}, ["someOtherDefinedTask"]);

I might just be missing something simple here. But it hasn't worked for me thus far.

Thanks

@jh3y

Deleted

Deleted.

Newer version of gulp-watch seems to stop other tasks from ending.

Hey,

I have various tasks in my gulpfile doing different things. When I am using version ^0.6.0 of gulp-watch, my tasks wont finish. Even something as simple as

gulp.task('cleanup', function(event) {
    return gulp.src(destinations.build)
        .pipe(clean());
});

When I use say version ^0.5.4 it works fine and my tasks finish. I found this out by commenting dependencies within my gulpfile

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

and came to find that gulp-watch was the culprit I'm afraid. I'm also using ^0.5.4 in another project of mine with very similar tasks and that one works fine.

@jh3y

not compatible with gulp-mocha?

gulp-watch doesn't seem to be compatible with gulp-mocha

Does not work with square brackets in folder name

Hi,
I have a problem with very basic usage:

return gulp.src(<glob>)
        .pipe(watch(function(files) {
            console.log('Processing', files)

            return files.pipe(using())
                .pipe(debug());
        }));

if folder like [name] (with square brackets) exists in the working (glob) path - no 'change' events are fired after very first one. Problem exists on MacOS and Windows.

Esformatter isn't triggered in batch mode

Apologies for opening this again, but since the repo got reset the thread got removed.

When using batch mode esformatter isn't triggered. Is there a way to keep writing to the CLI (needed by eslint) and properly trigger esformatter?

gulp.src(path.modules.src)
      .pipe(watch(function(files) {
      return files
        .pipe(esformatter())
        .pipe(eslint())
        .pipe(eslint.format(eslintStylish));
    }));

Watching all files within a subdirectory

I will preface this with the fact that this is my first time using gulp (and, by extension, gulp-watch), so if I am missing something obvious, my apologies in advance!

Anyways, I am currently working on a project that uses Node v. 0.10.3+ and gulp to serve a simple webapp. My gulpfile is as follows (with impertinent components omitted):

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

var paths = {
    server:     "./server.js",
    static: {
        src:    ['./src/static/**'],
        dest:   './dist/public/static/'
    }
};

var copyStatic = function(){
  gulp.src(paths.static.src)
  .pipe(gulp.dest(paths.static.dest));
};

gulp.task('watch', ['serve'], function() {
  watch({ glob: paths.static.src }, copyStatic());
});

gulp.task('serve', function(){
    return nodemon({
    script: paths.server
  });
});

From here, I essentially call the watch task, which I expect to watch for changes in './src/static/**', and (if it finds any changes) copy everything below static over to './dist/public/static'. However, I have noticed that adding a file to './src/static/img/', for example, does not cause anything to happen at all (no console output either). In other tasks, I use specific blobs like './src/js/*.js', and everything works perfectly.

Is this feature of watching all files within a subdirectory available, or am I simple using it incorrectly?

Emit change "notifications"

Previously I used a gulp configuration that was since then deprecated but where I would receive a notification every time a file was changed.

Now, im configuring gulp-watch as following:

gulp.task('coffee', function () {
  gulp.src( options.COFFEE.src )
    .pipe(watch({
      name: "Coffee"
    }))
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(coffee({
      bare: true,
      sourceMap: true
      })
    .on('error', gutil.log))
    .pipe(gulp.dest( options.COFFEE.build ))
    .pipe(livereload());
});

This however only outputs to the console the first time the file changes:

[gulp] Using gulpfile /Users/luismartins/Sites/LAB/books/EloquentJS/gulpfile.js
[gulp] Starting 'html'...
[gulp] Finished 'html' after 33 ms
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 5.22 ms
[gulp] Starting 'coffee'...
[gulp] Finished 'coffee' after 4.16 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 7.85 μs
[gulp] Live reload server listening on: 35729
[gulp] HTML saw 0 files was added from pipe
[gulp] Coffee saw 1 file was added from pipe
[gulp] Sass saw 1 file was added from pipe
[gulp] Sass saw main.scss was changed
[gulp] Coffee saw main.coffee was changed

Any change I can have the task to output feedback every time I change one of the watched files?

gulp-watch width glob

var glob = require("glob");
glob("**/*.less", {}, function (er, files) {
  console.log(files);
})

output:

[ 'test1.less',
  'test/test/test1.less',
  'test/test1.less' ]

But in gulp-watch width glob

gulp.task('lessWatch', function () {
    watch({ glob: '**/*.less',emit:'all'})
    .on("data",function(files){
        console.log(files);
    });
});

output:

[ 'example\test1.less',
  'example\test\test1.less',
  'example\test\test\test1.less' ]

process.cwd() == "e:\example"

Where I is configured incorrectly.

`deleted` event doesn't work

Regarding #23 and 9a9a8e5: it seems that deleted event is not fired in custom events mechanics.

Update gaze to support polling to allow watching for new and deleted files on network shares

I am using Ubuntu 14.04 and have a Windows 8.1 share mounted in my fstab using cifs.

I am using gulp 3.6.2 and gulp-watch 0.6.5.

I noticed that changes to watched files are detected properly. However, new files and deletions are not detected.

Gaze has an option to force polling so that we can have changed and deleted evens when using networked file systems.

This change was introduce in gaze 0.6.0. Would you be able to update the dependency so we can force polling using mode: 'polling'?

calculateBase() processes negative patterns, producing results inconsistent with gulp.src().

When you give a pattern like ["source/**/*.*", "!**/#*#"] to gulp.src(), the base is source/. Passing the same pattern to gulp-watch results in a computed base of ./.

(Obviously, I can work around this by passing an explicit base to gulp-watch, or by changing the negation pattern to also include 'source', but I first spent hours trying to figure out why my changed files weren't being written to disk, when they were actually being written to a different directory than where they were supposed to be.)

Long Init Time

I have about 100 files I am watching, just javascript source files and tests.

I noticed when I init gulp-watch, it takes a good thirty seconds for it to finish adding files to watch, past that, everything is blazing fast. (Mocha etc.) I'm basing my assumption that this is abnormal due to grunt-watch loading relatively fast (~1sec) under the same conditions.

Is this normal?

SCSS partial change doesn't send parent to compile.

This was touched on in a closed issue here: #15

Issue:
While editing a scss partial (ex: _footer.scss), the parent file (with the import) doesn't trigger a recompile when the partial is saved.

While adding 'emit: all' is a short fix, it defeats the purpose of the watch by recompiling everything.

Is there a way to find the parent[s] and only send those down the pipe?

Gulp-watch is not installing on Windows because of the [email protected] issue

You may want to revert back to [email protected] for now.

doesn't work with gulp-ts plugin

Putting it before the gulp-ts plugin causes the gulp-ts compile to never occur. If you could point me in the right direction I'd be happy to try and fix it.

Strange behavior with event-stream.through()

I've been spending the better part of a day trying to figure this out. For some reason, when using gulp-watch a pipe that calls event-stream.through() afterwards completely breaks. I'm attempting to get gulp-watch and gulp-inject to play nice together (gulp-inject issue at klei/gulp-inject#31).

gulp-inject adds a pipe to the stream that calls an event-stream.through(start, end) ( https://github.com/klei/gulp-inject/blob/master/index.js#L114). After start() successfully runs, end() is never called and the collector ends execution without end() ever getting called.

So the odd part, is this only happens when wrapping the stream with gulp-watch. If I remove gulp-watch and use a normal gulp.src everything works fine as seen below:

app = gulp.src(path.scripts)
  .pipe(watch(function(files) {
    return files
      .pipe(gulp.dest(path.build));
  }));

gulp.src('index.html')
  .pipe(debug())
  .pipe(inject(app))
  .pipe(debug())

This outputs:

[16:32:31] gulp-debug: (2014-06-13 23:32:31 UTC)

File
cwd:      C:\projects\app
base:     C:\projects\app\
path:     C:\projects\app\index.html
contents: <!DOCTYPE html>

<html lang="en">...

[16:32:31] gulp-debug: end event fired (2014-06-13 23:32:31 UTC)
[16:32:32] 6 files was added from pipe

The second debug() results in nothing since the inject wasn't able to complete. At this point, I'm not even sure if this is an event-stream bug or a gulp-watch bug.

globs beginning with ./ doesn't work (re-titled)

globs beginning with ./ doesn't work.

ORIGINAL TITLE: watch({glob: ... }) detects new folders but not new files
ORIGINAL POST:

I'm using watch({glob: 'src/**/*.md'}), and it doesn't seem to detect new .md files.

However, folders seem to be detected. I use gulp-ignore to filter them.

`ready` event firing multiple times

This is strange, because first one seems to be falsy.

Support deleting removed or renamed files

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

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

It would be cool if output files of renamed or removed files got deleted (maybe automatically?). Would this be possible to implement with current gulp?

Edit: This of course is not simple, as the output name must be known, possibly requiring something from every gulp-plugin (I haven't gone through the API). If this requires changes in gulp I'll elevate the issue.

Edit2: For example, https://github.com/wearefractal/gulp-coffee/blob/master/index.js#L9 is just passing the file on, if it is null, without changing the extension.

Node under cygwin crashes on lots of files being watched

So I'm running gulp in order to compile my .scss files, but every time I hit the ctrl+s in order to save my .scss file. gulp suddenly stops working and frankly I'm not sure why.

$ gulp
[gulp] Using file C:\users\mark\documents\projects\buddytalk\www\gulpfile.js
[gulp] Working directory changed to C:\users\mark\documents\projects\buddytalk\www
[gulp] Running 'default'...
[gulp] Running 'webserver'...
[gulp] Finished 'webserver' in 11 ms
[gulp] Running 'livereload'...
[gulp] Finished 'livereload' in 4.54 ms
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 7.37 ms
[gulp] Finished 'default' in 25 ms
[gulp] scss was added to watch
[gulp] app.scss was added to watch
[gulp] ionic was added to watch
[gulp] ionic.scss was added to watch
[gulp] ionicons was added to watch
[gulp] _action-sheet.scss was added to watch
[gulp] _animations.scss was added to watch
[gulp] _badge.scss was added to watch
[gulp] _bar.scss was added to watch
[gulp] _button-bar.scss was added to watch
[gulp] _button.scss was added to watch
[gulp] _checkbox.scss was added to watch
[gulp] _form.scss was added to watch
[gulp] _grid.scss was added to watch
[gulp] _items.scss was added to watch
[gulp] _list.scss was added to watch
[gulp] _menu.scss was added to watch
[gulp] _mixins.scss was added to watch
[gulp] _modal.scss was added to watch
[gulp] _nav.scss was added to watch
[gulp] _platform.scss was added to watch
[gulp] _popup.scss was added to watch
[gulp] _radio.scss was added to watch
[gulp] _range.scss was added to watch
[gulp] _reset.scss was added to watch
[gulp] _scaffolding.scss was added to watch
[gulp] _slide-box.scss was added to watch
[gulp] _split-pane.scss was added to watch
[gulp] _tabs.scss was added to watch
[gulp] _toggle.scss was added to watch
[gulp] _type.scss was added to watch
[gulp] _util.scss was added to watch
[gulp] _variables.scss was added to watch
[gulp] ionicons.scss was added to watch
[gulp] _ionicons-animation.scss was added to watch
[gulp] _ionicons-font.scss was added to watch
[gulp] _ionicons-icons.scss was added to watch
[gulp] _ionicons-variables.scss was added to watch
[gulp] 45 files was added from pipe
[gulp] app.scss was changed
/cygdrive/c/Users/Mark/AppData/Roaming/npm/gulp: line 14:  2440 Segmentation fault      node "$basedir/node_modules/gulp/bin/gulp.js" "$@"

Thanks.

Deleted event throw `TypeError('Arguments to path.resolve must be strings')`

Using something :

watch({glob: '**/*'}).pipe(gulpif(isDeleted, doDelete, gulp.dest('dest')));

Expected no error, so I can use use gulp-if to manage the delete

path.js:313
        throw new TypeError('Arguments to path.resolve must be strings');
        ^
TypeError: Arguments to path.resolve must be strings
    at Object.exports.resolve (path.js:313:15)
    at Object.exports.relative (path.js:370:20)
    at Transform._transform (/Users/ylemoigne/Dev/Projects/Gmp/portal/frontend/node_modules/gulp-clean/index.js:12:25)
    at Transform._read (/Users/ylemoigne/Dev/Projects/Gmp/portal/frontend/node_modules/gulp-clean/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/Users/ylemoigne/Dev/Projects/Gmp/portal/frontend/node_modules/gulp-clean/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/ylemoigne/Dev/Projects/Gmp/portal/frontend/node_modules/gulp-clean/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:238:10)
    at writeOrBuffer (/Users/ylemoigne/Dev/Projects/Gmp/portal/frontend/node_modules/gulp-clean/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:228:5)
    at Transform.Writable.write (/Users/ylemoigne/Dev/Projects/Gmp/portal/frontend/node_modules/gulp-clean/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:195:11)
    at write (_stream_readable.js:585:24)
    at flow (_stream_readable.js:594:7)

Can't run gulp-watch

Hi,

I have the following configuration:

gulp.task('lint', function() {
  gulp.src(['*.js','backend/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
gulp.task('watch', function () {
  gulp.watch(['*.js','backend/*.js'], ['lint']);
});

When I execute gulp watch I have the following traceback

[gulp] Running 'watch'...
2014-01-24 16:30 node[6377] (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
Abort trap: 6

I have no idea why and how to fix that.

Emitting lots of changed events

Hi, I just want to notify me the changes when I a change, however when I fireup gulp, I get lots of notify Loop...

gulp.task('watch', function(){
  // changed(sources.files)
  // gulp.watch(sources.files, ['changed']);
  watch({glob:sources.css}, function(files){
    // files.pipe(changed(sources.css))
    files.pipe(notify('files have changed on local repo'))
  })
})

gulp.task('default', ['watch']);

and i get:

[gulp] gulp-notify: [Gulp notification] files have changed on local repo
[gulp] gulp-notify: [Gulp notification] files have changed on local repo
[gulp] gulp-notify: [Gulp notification] files have changed on local repo
[gulp] gulp-notify: [Gulp notification] files have changed on local repo
[gulp] gulp-notify: [Gulp notification] files have changed on local repo
....
....

saving scss partials does not trigger a .css compilation

I have set up my gulpfile exactly as described in the readme using the glob option.

gulp.task('default', function () {
  watch({glob: 'path/to/scss/**/*.scss'}, function (files) {
    return files.pipe(sass())
    .pipe(gulp.dest('public/assets/css'));
  });
});

Saving a scss partial file will trigger the '_filename.scss was changed' to output in my terminal window. However it doesn't trigger my css file to recompile. If I save my main scss file, it triggers the css compile just fine.

If I add the emit: 'all' option to my watch, it then triggers the css file to compile. I don't see that in any of the examples. Is that the correct way to set up scss watching?

Hard to understand doc

This line appears in the docs in a few places: "If you want to watch all directories, include those, which will be created after".

I really don't understand what that's suppose to mean. Can we elaborate on that in the docs?

glob not working for negation at all

I wanted to exclude some folders and it stopped working...not sure how to trace/debug

 gulp =  require 'gulp'
 watch =  require 'gulp-watch'
 coffee =  require 'gulp-coffee'
 gutil =  require 'gulp-util'


    gulp.task 'default', ->
        watch glob:['**/*.coffee','!./node_modules/**/*.coffee'] # if changed to ['**/*.coffee'] it works
                    .pipe coffee sourceMap: true
                    .pipe gulp.dest '.' 

also subquestion...can I watch a directory other than from the run directory for eg
c:\w-jobs*__.coffee ---> This also doesn't work and I don't have a clue what is happening

Adding new files not triggering Watch

Hey there. I'm trying gulp-watch, as opposed to the built-in equivalent, as I'm wanting newly added files to trigger things. I've got the below (in Coffeescript)...

watch glob: "src/images/**/*.{png,gif,jpg,jpeg,svg}", ->
    gulp.start "copy-images"

... but adding new files to the "src/images" directory is NOT triggering anything, while editing the existing files does. Am I missing a step?

Thanks!

Issues with Windows path limit since 0.6.9

This is most likely happening due to lodash. I suggest you downgrade to continue support Windows users.

These issues are being discussed here:
lodash/lodash#501
nodejs/node-v0.x-archive#6960

plugin is too verbose when watching files through continuous streaming

using the following notation:

gulp.task('scripts', function () {
    return gulp.src(paths.origin.js)
        .pipe(watch())
        .pipe(gulp.dest(paths.dist.js));
});

I'm getting way too verbose output such as:

[gulp] common.js was added to watch
[gulp] file.js was added to watch
[gulp] image.js was added to watch
[gulp] longkeyPress.js was added to watch
[gulp] overlay.js was added to watch
[gulp] storage.js was added to watch
[gulp] apps.js was added to watch
...
[gulp] 28 files was added from pipe

How can I get only the concise total files watched output?

I have another task that watches hundreds of files, and as you can tell, it gets annoying

symlinks in watch-paths cause ENOENT error

i have a symlink in my watch-path which causes the task to fail:

[gulp] Errored 'watch' in 680 ms ENOENT, no such file or directory '/Users/felipe/Dropbox/Projects/talbot/out/srtalbotrunhof/src/scss/global'

tried excluding the symlink-dir with a glob-pattern but it didn't work :(

gulp.watch ["out/**/scss/**", "!out/srtalbotrunhof/src/scss/global"], ["styles"]

any suggestions on how to deal with symlinked directories?

Not working with grunt-concat

After doing some investigation, I believe that gulp-watch is doing something that isn't allowing gulp-concat to work properly. Here is my code:

// This is the task running without watch. It runs as expected
gulp
  .src('source/css/**/*.css')
  .pipe(plumber())
  .pipe(concat('app.css'))
  .pipe(csso())
  .pipe(gulp.dest('public/css'));

// This task runs up until concat, then it breaks.
// I've used gulp-debug to test where the pipes are breaking.
watch({glob: 'source/css/**/*.css'})
  .pipe(plumber())
  .pipe(concat('app.css'))
  .pipe(csso())
  .pipe(gulp.dest('public/css'))

I'll continue to try and figure out what's going on. I'm pretty new to gulp (coming from grunt), but I'll help out where I can.

Watching Different File Types

Hi,
I am trying to figure out a way to watch multiple file types and then fire off corresponding tasks per each file type change. Something like this:

gulp.task('default', function() {
  watch({ glob: 'app/**/*.scss' },['sass']),
  watch({ glob: 'app/**/*.js'},['clean', 'jshint', 'app-js-minify']);
});

Could you please point me in the right direction on how this can be achieved with gulp-watch?

Thanks.

Run other tasks when watch is triggered.

I'm currently doing something like the following. To my understanding, correct me if I'm wrong, when a file changes, my dependencies are ran and must complete first then the change event is fired. Correct? If so, how can I do something like this using gulp-watch?

  return gulp.watch([APP_HTML, APP_SASS], ['build-html-dev', 'build-sass-dev']).on('change', function(file) {
    server.changed(file.path);
  });

Add support for base

The following piece of code treats app folder as a base, correctly preserving folder structure in dist:

gulp.src(['app/*.coffee', 'app/controllers/**/*.coffee'], {
  base: 'app'
}).pipe(watch(function(files) {
 files.pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('dist')));
}));

However, there doesn't seem to be a way to keep this behavior when using glob (I want to keep track of new files):

watch({glob: ['app/*.coffee', 'app/controllers/**/*.coffee'],
  base: 'app'},  // doesn't work
 function(files) {
 files.pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('dist')));
});

Patch vinyl-fs objects with event property

Stamp the event on produced vinyl-fs objects.

This will help with issue "Support deleting removed or renamed files"

Does not work with MacFUSE type mounting system

I've been using gulp-watch with success when editing files from the command line, however when using MacFUSE type mounting system such as Expandrive http://www.expandrive.com/expandrive watch is firing before the files have completed writing to disk.

Debug shows the following:

[gulp] gulp-debug: (2014-04-05 00:36:48 UTC)

File
cwd:      /var/www/html/working/0.4.0
base:     /var/www/html/working/0.4.0/less/
path:     /var/www/html/working/0.4.0/less/styles.less
stat:     {
    dev: 51713,
    mode: 33200,
    nlink: 1,
    uid: 500,
    gid: 1001,
    rdev: 0,
    blksize: 4096,
    ino: 3412616,
    size: 0,
    blocks: 0,
    atime: new Date('2014-04-04T16:28:46.000Z'),
    mtime: new Date('2014-04-05T00:36:48.000Z'),
    ctime: new Date('2014-04-05T00:36:48.000Z')
}
contents: ...

As you can see 0 bytes are being written to disk. Any ideas how to use gulp-watch with MacFUSE mounting systems?

Editing files doesn't cause change in actual files (initial run is completed)

(Posted this on Stack Overflow earlier today as well.)

I've set up a gulpfile that watches my Sass/SCSS files. After doing gulp it runs once and works as expected. When I edit files, it outputs the according message in the command line. However the actual files aren't changed.

output:

$ gulp
[09:24:28] Using gulpfile c:\Users\User\_dev\github\project\gulpfile.js
[09:24:28] Starting 'sass'...
[09:24:28] Finished 'sass' after 98 ms
[09:24:28] Starting 'default'...
[09:24:28] Finished 'default' after 7.31 μs
[09:24:35] sass-watch saw _base.scss was changed
[09:25:39] sass-watch saw _base.scss was changed

gulpfile.js:

// Process Sass (compile, prefix, minify)
gulp.task('sass', function() {
    watch({ glob: 'css/**/*.{scss,sass}', name: 'sass-watch'})
        // Keeps pipes working after error event
        .pipe(plumber())

        // Process Sass files
        .pipe(sass())

        // Prefix CSS properties
        .pipe(prefix('last 2 version', "> 1%", 'ie 9', 'ie 8'))

        // Output regular `*.css`
        .pipe(gulp.dest('css'))

        // Minify CSS
        .pipe(minifycss())

        // Append `.min` to filename
        .pipe(rename({suffix: '.min'}))

        // Output minified `*.min.css`
        .pipe(gulp.dest('css'));
});

// Default task is simply called with `gulp`, 'sass-watch'
gulp.task('default', ['sass']);

(Complete gist for reference.)

“file was changed” is only printed once

I'm using ‘streaming’ mode as thus:

gulp.task 'watch-transpile-js', ->
   return gulp
      .src ['./Resources/main.coffee']
      .pipe require('gulp-watch')()
      .pipe require('gulp-debug')()
      .pipe require('gulp-plumber')()
      .pipe require('gulp-coffee'), bare: yes, header: no
      .pipe gulp.dest, './Resources'

When I modify the file, and save, I get output (presumably) from gulp-watch saying “main.coffee was changed.” However, if I edit again and save, I get no such output (even though the later streams are triggered.)

Here's all of the output, from editing, saving, editing, saving (twice):

> 2 files to edit
gulp watch-transpile-js                     
[gulp] Requiring external module coffee-script/register
[gulp] Using gulpfile ~/Documents/Code/wikipedi.as/gulpfile.coffee
[gulp] Starting 'watch-transpile-js'...
[gulp] gulp-debug: (2014-05-24 07:39:43 UTC)

File
cwd:      ~/Documents/Code/wikipedi.as
base:     ~/Documents/Code/wikipedi.as/Resources/
path:     ~/Documents/Code/wikipedi.as/Resources/main.coffee
contents: watf...

[gulp] 1 file was added from pipe
[gulp] main.coffee was changed
[gulp] gulp-debug: (2014-05-24 07:39:51 UTC)

File
cwd:      ~/Documents/Code/wikipedi.as
base:     ~/Documents/Code/wikipedi.as/Resources/
path:     ~/Documents/Code/wikipedi.as/Resources/main.coffee
contents: A...

[gulp] gulp-debug: (2014-05-24 07:39:55 UTC)

File
cwd:      ~/Documents/Code/wikipedi.as
base:     ~/Documents/Code/wikipedi.as/Resources/
path:     ~/Documents/Code/wikipedi.as/Resources/main.coffee
contents: B...

watch a directory other than the one it is running

Hi,

I am running the gulpfile in c:\w and watched directory c:\w-jobs. It doesn't seem to working..I check the gaze..it is able to pick up the changes...why is gulp-watch not transmitting. it...

 gulp =  require 'gulp'
 watch =  require 'gulp-watch'
 coffee =  require 'gulp-coffee'
 gutil =  require 'gulp-util'


    gulp.task 'default', ->
        watch glob:['c:/w-jobs/**/*.coffee']
                    .pipe coffee sourceMap: true
                    .pipe gulp.dest '.'

and I checked with gaze...

var Gaze = require('gaze').Gaze;

var gaze = new Gaze('c:/w-jobs/**/*.coffee');

// Files have all started watching
gaze.on('ready', function(watcher) {

    console.log('in the ready', arguments)

});

// A file has been added/changed/deleted has occurred
gaze.on('all', function(event, filepath) {

    console.log('in the some eventy', event, filepath)

});

the above event is happening on change. leave about the change..it should pick the all the files that got matched with the pattern.

gulp watch is redudant

gulp.task('images', function() {
    return gulp.src('web/images/**/*') // ... pipeline
});

gulp.task('watch', function() {
   gulp.watch('web/images/**/*', ['images']); // already defined in src
});

Gulp 'task finished' is never printed out w/ less compilation

Hi,

I have a gulpfile.coffee (using the CoffeeScript plugin) that looks like this:

gulp.task 'less-styles', () ->
  watch(glob: [
      'src/styles/*.less',
      'src/styles/font-awesome/font-awesome.less'
    ],
    (files) ->
      files.pipe less(
        paths: [pathModule.join(__dirname, 'less', 'includes')]
      ).on 'error', notify.onError
        message: 'Error: <%= error.message %>',
        title: 'Error in styles'
      .on 'finish', () ->
        console.log "FOO!"
      .pipe gulp.dest './ui/styles'
  )

The problem is that when the file is changes, the task runs (and the less file gets recompiled). But, gulp doesn't print out its usual, colorful message. 😢 I assume this is since the task is never finished.

The 'finish' even runs though, so I could probably hook something up, but I'm unsure what this is in that case. And also, why is that needed?

In short: How do you use gulp-watch and still get "task finished" messages being printed out?

Maybe I'm trying to do things the wrong way, I'm a gulp n00b (but have managed to convert our old build pipeline to it, except that it e.g. doesn't detect files being added... 😄 Which is why I want to use gulp-watch)

Are all scripts compiled again when one script is updated?

In Grunt, while it's watching some files, once a file emits change event, the whole task would run again, in the case of CoffeeScript, all .coffee files are compiled, which, might significantly slow down the process of debugging.
So, Gulp says she's fast, how about this case?

Update gaze to 0.6.4

I'm having troubles with gulp/watch with emacs .dotfiles. It seems the issue is solved by shama/gaze#60.

Any change of upgrading gaze? thanks

how to catch gaze errors?

How/where can I catch errors that bubble up from gaze?

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: watch ENOENT
    at errnoException (fs.js:1019:11)
    at FSWatcher.start (fs.js:1051:11)
    at Object.fs.watch (fs.js:1076:11)
    at Gaze._watchDir (/docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/gaze.js:289:30)
    at /docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/gaze.js:358:10
    at iterate (/docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/helper.js:52:5)
    at /docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/helper.js:61:11
    at /docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/gaze.js:420:5
    at iterate (/docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/helper.js:52:5)
    at /docs/browser/node_modules/gulp-watch/node_modules/gaze/lib/helper.js:61:11

My gulp-watch code looks like this:

    var watcher = $.watch({
      glob: [path.join(h.src, '**/*'), path.join(h.unitSrc, '**/*')],
      name: 'watch',
      emitOnGlob: false,
      emit: 'one',
      silent: true
    }, function (file, gulpWatchCb) {
      file.pipe($.util.buffer(function (err, files) {
        // etc.

If have tried catching errors on various pipes and callbacks and the watcher, and these errors just seem to go straight to the console and kill the watch.

FWIW, it happens whenever I rename a watched directory, but in general I'd like to be able to catch gaze errors.

New files watching in subfolders doesn't work

Steps to reproduce:

1. npm install gulp gulp-watch

2. Create local subfolder and subfolder/subsubfolder

3. Put gulpfile.js to the root folder:

   var gulp = require('gulp'),
      watch = require('gulp-watch');
   
   gulp.task('default', function () {   
   watch({glob: 'subfolder/**/*.txt', silent: false, verbose: true})               
   })

4. Run gulp from the root folder.

5. Put new file 1.txt to subfolder/subsubfolder. It does not invoke a watcher, while it should.