Replace livereload with browserSync?

[wilsonwc]

LiveReload didn't seem to be working properly for me when running the develop task, so I replaced it with browsersync and it's working much better. If I get time to do it right I can submit a PR if you approve.

[ducksoupdev]

If you are happy to submit the PR then more than happy to replace livereload with browsersync. Thanks for finding the issue!

[renomateo]

Since gulp processes tasks asynchronously, and the build task takes a while, the livereload-html task would run before anything changed. I tried changing the develop task to this, but then connect.reload() fires too many times:

    gulp.watch(["./src/sass/**/*.scss"], ["build"]);
    gulp.watch(["./src/js/**/*.js"], ["build"]);
    gulp.watch(["./src/images/**/*.{gif,jpg,png}"], ["build"]);
    gulp.watch(["./src/content/**/*.md"], ["build"]);
    gulp.watch(["./build/**/*.*"], ["livereload-html"]);

Browser-sync can debounce, but even running it from the command-line with the defaults seems to be sufficient (in build, with livereload task disabled):

../node_modules/.bin/browser-sync start --proxy="localhost:8080" --files="*.html, css/*.css"

[ringods]

@wilsonwc could you share your BrowserSync setup? Possibly any progress on a pull request?

[wilsonwc]

This is what I have changed in gulp/tasks/develop.js. I'll get a PR in a couple of days. The setTimeout is kindof a hack, so I want to clean that up a little bit before I submit.

develop.js.txt

[ringods]

@wilsonwc would you mind adding the option to pass browsersync options from site.json to the task? I'm running all my tooling in Docker containers, but I need polling: true for BrowserSync to detect changes correctly.

[ducksoupdev]

@wilsonwc A new release has updated the development tasks so only specific tasks run depending on the change rather than the whole build running each time. Would be interested to hear if it makes a difference to your workflow or if browsersync would still be a better alternative?

[alexrdz]

FYI, I added browser-sync successfully to replace livereload-connect but found that the uncss task was making the refresh take a long time (up to 8 seconds at times). I replaced it with the sass task and left uncss to run only with the build task. Now, browser-sync refreshes instantly without delays. I'm not entirely sure it's the best set up but it works quite well for me.

If anyone is interested in my version of the develop task, you can view it here: https://github.com/alexrdz/gulp-site-generator/blob/master/gulp/tasks/develop.js

@ducksoupdev loving this repo! Thanks for sharing.

[ducksoupdev]

Thanks @alexrdz, would you be happy to create a PR for this?

[alexrdz]

hi,@ducksoupdev I'd be more than happy to submit a PR. I'm away from home for the next few days but will submit it ASAP (Tuesday if that's ok). Thanks!

[ducksoupdev]

Thanks to @alexrdz for replacing livereload with browser-sync. This has been added in v0.4.1