browserSync.reload and browserSync.stream()) - what are the difference?

Question

I have this gulpfile.js file:

var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
browserSync = require('browser-sync').create();

gulp.task('sass', function() {
    gulp.src('assets/src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/dist/css'))
    .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
    gulp.src('assets/src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/dist/js'));
}); 

gulp.task('server', ['sass','scripts'], function() {
    browserSync.init({
        proxy: 'http://localhost/example/',
    });
    gulp.watch('assets/src/sass/*.scss', ['sass']);
    gulp.watch('assets/src/js/*.js', ['scripts']);
    gulp.watch('./**/*.php').on('change', browserSync.reload);
});

gulp.task('server', ['run']);

Please tell me what are the difference between:

.pipe(browserSync.stream());

and:

gulp.watch('./**/*.php').on('change', browserSync.reload);

I need both of them? they have different role?

Thanks.

Answer 1

You probably must have got your answer till now but I'll leave the answer here just in case anyone needs to know.

browserSync.reload

is used to do a page refresh. Ideally, it's used on HTML & JS files.

browserSync.stream

is used to inject changes without refreshing the page. Ideally, this is used on CSS and other stylesheet formats. This command is useful because it keeps the scroll position intact and doesn't take you to the top of the page like a page refresh usually would.