Gulp Watch only run once

Question

I'm using this Gulp Watch sample: https://github.com/floatdrop/gulp-watch/blob/master/docs/readme.md#starting-tasks-on-events.

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

gulp.task('build', function () { console.log('Working!'); });

gulp.task('watch', function () {
    watch('**/*.js', batch(function () {
        gulp.start('build');
    }));
});

When I run it on my Windows 8 machine, it only runs the first time I change a file:

C:\test>gulp watch
[08:40:21] Using gulpfile C:\test\gulpfile.js
[08:40:21] Starting 'watch'...
[08:40:21] Finished 'watch' after 2.69 ms
[08:40:31] Starting 'build'...
Working!
[08:40:31] Finished 'build' after 261 µs

Next time nothing happens. Why?

Did you change any file? Because you when you execute gulp watch, it is watching the files. When you then change a file, the function in watch gets fired. — blablabla, Mar 30 '15 at 11:41
Yes, maybe I'm not clear enough. I'm changing files, but `watch` is only executed the first time I change a file. E.g. if I start `gulp watch`, change something in my *.js file and save it, watch is running. If I then change something else in the same file and save it again, then watch is not running. The `gulp watch` process is still running, but nothing happens. — dhrm, Mar 30 '15 at 11:44
If you still want to use the `gulp-batch` the correct usage is to have a `done` callback there: `done` - is callback for your function signal to batch, that you are done. So: `gulp.task('watch', function () { watch('**/*.js', batch(function (events, done) { gulp.start('build'); done(); })); });` — nemesv, Mar 30 '15 at 12:11

score 23 · Answer 1 · answered Feb 19 '19 at 17:55

23

For me it was adding a "return" to the task:

gulp.task('styles', function(){
 return gulp.src('css/styles.css')
    .pipe(autoprefixer())
    .pipe(gulp.dest('build'));
});

answered Feb 19 '19 at 17:55

Tim Nong

231
2
2

...or a passing and calling a callback: `(cb) => { something(); cb(); }` – kraftwer1 Feb 20 '20 at 09:18

score 22 · Accepted Answer · answered Mar 30 '15 at 11:47

22

If you read the documentation closely, you see the following phrase:

You can pass plain callback, that will be called on every event or wrap it in gulp-batch to run it once

So, that's basically the deal with gulp-batch. To constantly watch it, just remove the batch call:

gulp.task('build', function (done) { 
    console.log('Working!'); 
    done();
});

gulp.task('watch', function () {
    watch('app/*.js', function () {
        gulp.start('build');
    });
});

(and add the 'done' callback to build to let Gulp know when you're finished).

Btw... I'm not sure, but I think gulp-watch is meant to not only watch files, but also directly returning a vinyl object. So actually using the built-in gulp.watch should have the same effect:

gulp.task('watch', function () {
    gulp.watch('app/**/*.js', ['build']);
});

answered Mar 30 '15 at 11:47

ddprrt

7,424
3
29
25

2

Old post but lemme quote something again from what @ddprrt said, `"(and add the 'done' callback to build to let Gulp know when you're finished)."` And that nearly made me hit my head on the wall for hours. Thanks man – Temitayo Dec 01 '16 at 18:27
starting with gulp 4, the `done` callback is a must, it seems....thx! – benzkji Jan 21 '20 at 15:28
Hi @ddprrt it seems that when two dev working on the same system then other dev subsequent(first working) cntrl + s not detected through the gulp. Even though it works for the same system. Any idea? – Shashank Bhatt Aug 07 '21 at 09:39

lacostenycoder · Answer 3 · 2022-03-29T14:14:40.290

9

This appears to be known issue I had the same problem and used the same as ddprrt. The difference was using directory glob (wildcard) as apposed to absolute path.

I changed this:

 gulp.task('watch', function() {
   gulp.watch('sass/shortcutcss/*.scss', ['sass'])
 });

to this:

 gulp.task('watch', function() {
   gulp.watch('sass/**/*.scss', ['sass'])
 });

edited Mar 29 '22 at 14:14

answered Jun 15 '15 at 20:43

lacostenycoder

10,623
4
31
48

1

Same problem and same solution here. Maybe open an issue on github about this would be a good ideia. – Matheus Dal'Pizzol Dec 03 '15 at 16:19
1

I had the same problem and resolved it adding the wildcard directory /**/*.scss, now it work – cesar andavisa Jun 14 '17 at 17:10
1

Looks like the issue is still relevant. /**/ wildcard dir resolved my issue. – bakis Jan 16 '20 at 16:59
1

I had to use a `**` wildcard for directories and a `*` wildcard for file names. I couldn't use the exact directory and file name, strange! – tyler.frankenstein Feb 10 '21 at 02:51
1

This also occurs even if just one of the paths is in that format, e.g. `'./css/*.css', './css/*.scss', './css/*/*.scss'` – Kohjah Breese Mar 29 '22 at 11:55

score 1 · Answer 4 · edited May 23 '17 at 11:53

This problem made me crazy for a weekend. I tried all:

Add done()-Event
Rename/Touch/Clear target CSS
Be more specific with the filepaths

But the (reason for this problem and) the solution was so easy that I felt pathetic after that:

Just update your nodejs installation, mine was 0.12.x! No wonder that this doesn't worked.

After that the watch event works again. Sometimes it goes wrong again, too. But in this cases just save your file a second time and it get recognized. (I think foundation/gulp watch checks for changes to fast and while your file get replaced with the new uploaded one)

score 0 · Answer 5 · answered Mar 12 '21 at 15:09

Long story:
For me it did not work for long time. All seems to be set right but run only once.

But suddenly I started with parcel js on another project and same thing happened with their builtn watch. So I looked for the answer and I found out that problem was with my Vim settings.

Answer what helped me is this one from @acobster https://stackoverflow.com/a/55435197/2686510

In short:
Update .vimrc by adding set backupcopy=yes

Gulp Watch only run once

5 Answers5

Linked