Gulp 4 browserSync reload

Question

I'm having trouble with browserSync I can't get reload do trigger after trying several different methods. BrowserSync itself is up and running although when I manually reload nothing happens I have to open a new tab to see any changes. I'm not really understanding gulp 4 and all the sources I have watched seem to be using completely different methods to me. Any help would be greatly appreciated feel free to ask any questions.

 var gulp = require('gulp'); var sass = require('gulp-sass'); var concatcss = require('gulp-concat'); var concatjs = require('gulp-concat'); var uglifycss = require('gulp-uglifycss'); var reload = require('browser-sync').reload(); var nunjucks = require('gulp-nunjucks-render'); var browserSync = require('browser-sync').create(); sass.compiler = require('node-sass'); gulp.task('sass', function () { return gulp.src('./Edit/sass/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./Edit/css')); }); gulp.task('concatcss', function() { return gulp.src('./Edit/css/*.css') .pipe(concatcss('style.css')) .pipe(gulp.dest('./Edit/css/concated/')); }); gulp.task('concatjs', function() { return gulp.src('./Edit/java-script/*.js') .pipe(concatjs('scripts.js')) .pipe(gulp.dest('./Upload/js/')); }); gulp.task('css', function () { return gulp.src('./Edit/css/concated/*.css') .pipe(uglifycss({ "maxLineLen": 80, "uglyComments": true })) .pipe(gulp.dest('./upload/css')); }); gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: "./Upload/" } }); }); gulp.task('run',gulp.parallel('browserSync', gulp.series('sass','concatcss','concatjs','css'))); gulp.task('watch', function(){ gulp.watch('./Edit/sass/*.scss',gulp.series('sass')); gulp.watch('./Edit/css/*.css',gulp.series('concatcss')); gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync gulp.watch('./Edit/css/concated/*.css', gulp.series('css')); }); gulp.task('default', gulp.parallel('watch', 'run'));

Answer 1

For anyone else having trouble here is my solution, simply add this .on('change', browserSync.relod) to the end of the desired watch.

 gulp.task('watch', function(){ gulp.watch('./Edit/sass/*.scss',gulp.series('sass')); gulp.watch('./Edit/css/*.css',gulp.series('concatcss')); gulp.watch('./Edit/java-script/*.js',gulp.series('concatjs')); // maybe put extra task in all gulp series for browser sync gulp.watch('./Edit/css/concated/*.css', gulp.series('css')); gulp.watch('./Upload/css/*.css').on('change', browserSync.reload); gulp.watch('./Upload/js/*.js').on('change', browserSync.reload); });