What is the usage of gulp-sync

Question

I am reading one software https://github.com/SKempin/reactjs-tmdb-app

And there is one module name sync, when I read the github of it: https://github.com/kaminaly/gulp-sync It didn't say something. I assume it should allow some tasks to run synchronously. But in the gulp file of it, https://github.com/SKempin/reactjs-tmdb-app/blob/master/gulpfile.js#L132, if I replace

gulp.task('watch', sync(['clean-bundle', 'serve']), function() {
    bundler.watch();
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/*.html', ['html']);
    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/images/**/*', ['images']);
    gulp.watch('app/fonts/**/*', ['fonts']);
});

With

gulp.task('watch', ['clean-bundle', 'serve'], function() {
    bundler.watch();
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/*.html', ['html']);
    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/images/**/*', ['images']);
    gulp.watch('app/fonts/**/*', ['fonts']);
});

The website would open after we run gulp, but after it open, it shows

Cannot GET /

in the brower. And the console shows:

localhost/:10 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-gpnLwpFw97DB28/JjA3G79AHgq5DtCgFiFwjahrA1d4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

After I refresh this page, the real website would show up. Could you tell me the role sync plays here? Thanks.

Answer 1

The developer wants to make sure that serve can not run until clean-bundle has finished. Since gulp by default runs tasks async, you can use that plugin to control which methods run async vs sync.