I have the following task in my gulpFile
, created by someone else on my team:
gulp.task('serve', [], function(){
gulp.run(
'fonts',
'browsersync',
'watch'
);
});
I would like to leave it alone, but I also wanted to map the default task to this task. So I tried:
gulp.task('default',['serve']);
It appeared to work, in that the server runs, but for some reason the "watch" task is not happening, I am not getting browser refresh on changes.
It all works as planned if I run "gulp serve" but not "gulp". What did I do wrong?
EDIT: Here's the watch task:
gulp.task('watch', ['styles', 'browsersync'], function() { //'default'
gulp.watch(
[
'./app/assets/sass/**/*.scss',
'./app/modules/**/*.scss'
], ['styles']);
gulp.watch([
'./app/**/*.js',
'./app/**/*.html'
], function() {
reload();
});
});
Try updating your default task to include the watch task in the array argument instead of running it inside serve
. Like so:
gulp.task('default', ['serve', 'watch']);
If you checkout the Gulp documentation on asynchronous task support, particularly the last example, you'll see that you can require a dependent task to finish before the designated task is supposed to start.
var gulp = require('gulp');
// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
// do stuff -- async or otherwise
cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});
// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
// task 'one' is done now
});
gulp.task('default', ['one', 'two']);