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?

Answer 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']);
});