How do you call tasks in gulp with live reload - after file changes have occured

Question

I defined in a gulp file, the following task:

gulp.task('watch:livereload', function(){
  livereload.listen();
  gulp.watch('app/**').on('change', livereload.changed);
});

Which only recently did I realize is great only for static things like html. Because I use sass and the app is primarily js. I would like to call some tasks I have predefined to recompile the js and css upon any change to them.

The way I have been calling tasks is by:

gulp.task('compile:development',
  [
    'bower',
    'compile:scripts:development',
    'compile:sass:development',
    'serve',
    'watch:livereload'
  ]
);

But I want the tasks to happen on change. Ideas?

Preview · Accepted Answer · 2014-07-29T21:35:01.173

1

You should keep using livereload just as you do, for browser refresh purposes. If you want to re-run some tasks upon change, I think that gulp.watch is the simple and built-in way to go.

gulp.watch('app/**', ['compile:development']);

Or more specific tasks :

gulp.watch('app/**', ['compile:scripts:development', 'compile:sass:development']);

Example of a watch task which defines some watchers with different tasks :

gulp.task('watch', function () {
   gulp.watch('app/sass/*', ['compile:sass:development']);
   gulp.watch('app/js/*', ['compile:scripts:development']);
});

edited Jul 29 '14 at 21:35

answered Jul 29 '14 at 21:23

Preview

35,317
10
92
112

Would this be a separate task or can I build it off my existing one? – user3379926 Jul 29 '14 at 21:27
Personally I would advice you to create a `watch` task that will contain all your different `watchers`, so you can find them easily – Preview Jul 29 '14 at 21:30
Can you update your answer to show an example of how one might do this? (please) – user3379926 Jul 29 '14 at 21:31
Of course, just done that based on your tasks and imaginary paths – Preview Jul 29 '14 at 21:35

How do you call tasks in gulp with live reload - after file changes have occured

1 Answers1