CODEWITHSUNDEEP
gulpwatchnotify
Chrillewoodz
Chrillewoodz

Reputation: 28348

Is it possible to run gulp-notify in a watch task?

I'm putting together a gulpfile and I was wondering if you can combine gulp-notify (or some other solution) with a watch task so that a message pops up when the watch task has started running. I can't find anything from my searches on how I would go about doing this. Is it even possible?

Here's my watch task:

// Watch our files for changes
gulp.task('watch', function() {

  // -- I wanna run a notify message here saying 'Watching for changes...' -- //

  gulp.watch('assets/styles/**/*.scss', ['styles']);
  gulp.watch('assets/scripts/**/*.js', ['scripts']);
  gulp.watch('assets/images/**/*', ['images']);
});

Upvotes: 0

Views: 1993

Answers (3)

jnaklaas
jnaklaas

Reputation: 1769

This should do it:

gulp.task('watch', function() {
    notify("Watching for changes...").write('');

    gulp.watch('assets/styles/**/*.scss', ['styles']);
    gulp.watch('assets/scripts/**/*.js', ['scripts']);
    gulp.watch('assets/images/**/*', ['images']);
});

Also, if you meant to have a notification each time a file changes, you could do something like this:

gulp.task('watch', function () {
    //...

    gulp.watch([
        './src/**/*.html',
        './src/**/*.php',
    ]).on('change', function () {
        browserSync.reload();
        notify("File changed: browser synced").write('');
    });
});

Upvotes: 2

mraiur
mraiur

Reputation: 44

I managed to do it with gulp-notify and node-notifier. After you gulp tasks pipe the notifier and in the callback use the node-notifier to show the popup.

var notify = require('gulp-notify');
var nodeNotifier = require('node-notifier');

gulp().src(options.src)
.pipe(gulp.dest(options.dest))
.pipe(notify(function () {
    nodeNotifier.notify({
        'title': 'App',
        'message': 'Build'
    });
}));

Upvotes: 0

DamDamDam
DamDamDam

Reputation: 1

Can't you just use 

gulp.task('watch', function() {

  console.log('Watching for changes...');

  gulp.watch('assets/styles/**/*.scss', ['styles']);
  gulp.watch('assets/scripts/**/*.js', ['scripts']);
  gulp.watch('assets/images/**/*', ['images']);
});

Upvotes: -2

Related Questions