0

I upgraded to gulp 4 and need a better understanding of how to run an ongoing watch task along with getting tasks to run asynchronously. I'm using gulp-livereload for my reload task.

When I tried to run my gulpfile at first, it was throwing an error about async completion. It looked like this:

// templating task
gulp.task('html', function() {
    return gulp.src('views/**/*.html')
    .pipe(livereload());
});

//styles build/minification
gulp.task('styles', function() {
    return sass('client/scss/styles.scss', {
        noCache: true,
        style: 'compressed'
    })
    .pipe(cleanCSS())
    .pipe(gulp.dest('public/build/stylesheets'))
    .pipe(livereload());
});

gulp.task('scripts', function() {
    gulp.src('client/js/script.js')
    .pipe(webpack(require('./webpack.config.js')))
        .pipe(uglify())
    .pipe(gulp.dest('public/build/javascripts'))
    .pipe(livereload());
});

// uses livereload
gulp.task('watch', function() {
  livereload.listen();
    gulp.watch('views/**/*.html', ['html']);
  gulp.watch('client/scss/*.scss', ['styles']);
    gulp.watch('client/js/**/*.js', ['scripts']);
});

gulp.task('server', function () {
    // Start the server at the beginning of the task
    server.run(['./bin/www']);
});

My default task was:

//default task
gulp.task(
    'default', 
        gulp.series('html', 'styles', 'scripts', 'watch', 'server')
);

This threw:

[10:37:30] Using gulpfile /site/gulpfile.js [10:37:30] Starting 'default'... [10:37:30] Starting 'html'... [10:37:30] Finished 'html' after 80 ms [10:37:30] Starting 'styles'... [10:37:31] Finished 'styles' after 1.24 s [10:37:31] Starting 'scripts'... [10:37:33] Version: webpack 1.15.0 Asset Size Chunks Chunk Names scripts.min.js 17.7 kB 0 [emitted] main [10:37:33] The following tasks did not complete: default, scripts [10:37:33] Did you forget to signal async completion?

i found the answer Gulp error: The following tasks did not complete: Did you forget to signal async completion? so I changed my code to:

//default task
gulp.task('default', function(done) {
    gulp.series('html', 'styles', 'scripts', 'watch', 'server');
    done();
});

Which does:

[10:59:08] Using gulpfile /site/gulpfile.js
[10:59:08] Starting 'default'...
[10:59:08] Finished 'default' after 2.06 ms

But it looks like it just...skips over everything and none of my assets actually compile, and my watch task never starts. In the docs for gulp live reload it states:

3.x Upgrade Notice gulp-livereload will not automatically listen for changes. You now have to manually call livereload.listen unless you set the option start:

livereload({ start: true })

This does not start live reload.

How do I run an ongoing watch task and get tasks to run in Gulp 4.0?

kawnah
  • 2,503
  • 4
  • 31
  • 70
  • Probably you have already come by this one [https://stackoverflow.com/a/32704073/3676036](https://stackoverflow.com/a/32704073/3676036) ..but sharing it just it case it helps... – SJL Sep 22 '18 at 06:13

0 Answers0